精製jQuery

<img id="imgHelp" src="Images/Icons/Help16.png" alt="help" style="float:right;" /> 
<div id="hlpCalculator" class="tooltip" style="display:none;"> 
    <ol> 
    <h3>How to use this help</h3> 
    <li>bla</li> 
    <li>bla</li> 
    <li>bla</li> 
    <li>&nbsp;</li> 
    <li>Uh! to make me stay, click on the help once.</li> 
    <li>Click me if you had enough.</li> 
    </ol> 
</div> 
<script> 
    var showCalcHelp = function() { $("#hlpCalculator").slideDown(30); }; 
    var hideCalcHelp = function() { $("#hlpCalculator").slideUp(300); }; 

    $("#imgHelp").bind('mouseenter', showCalcHelp); 
    $("#imgHelp").bind('mouseleave', hideCalcHelp); 

    $("#imgHelp").bind('click', function() { 
     $("#imgHelp").unbind('mouseenter').unbind('mouseleave'); 
     $("#hlpCalculator").slideDown(30); 
    }); 

    $("#hlpCalculator").click(function() { 
     $(this).slideUp(300); 
     $("#imgHelp").bind('mouseenter', showCalcHelp); 
     $("#imgHelp").bind('mouseleave', hideCalcHelp); 
});

上面的代碼工作正常。爲求「精縮」，任何人都可以建議腳本部分的最短途徑，像..精製jQuery

$("#imgHelp").hover(function(){...},function(){...}).click(function(){...});

有懸停之間的衝突，然後單擊雖然。

TIA。

來源

2012-03-15 Gian

糟糕，我會在回答中正確格式化。 – Ohgodwhy 2012-03-15 03:06:31

而是「縮小文件」，爲什麼不只是寫「漂亮代碼」和「刪除冗餘」的？（GZIP在縮小時很好*）。 – 2012-03-15 03:21:45

在jQuery 1.7 .on()和off的優選用於事件綁定和解除綁定的方法。見this

<script> 
    var showCalcHelp = function() { $("#hlpCalculator").slideDown(30); }; 
    var hideCalcHelp = function() { $("#hlpCalculator").slideUp(300); }; 

    $("#imgHelp").on({'mouseenter' : showCalcHelp, 'mouseleave': hideCalcHelp}); 


    $("#imgHelp").on('click', function() { 
     $("#imgHelp").off('mouseenter mouseleave'); 
     $("#hlpCalculator").slideDown(30); 
    }); 

    $("#hlpCalculator").click(function() { 
     $(this).slideUp(300); 
    $("#imgHelp").bind({'mouseenter' : showCalcHelp, 'mouseleave': hideCalcHelp}); 
});

由於mrtsherman建議你要的是方法鏈接縮短代碼，縮小是截然不同的事情。它不僅縮短了代碼，而且使其混淆並使其不可讀。請參閱closure-compiler.appspot.com

來源

2012-03-15 03:44:16

我會將其格式化爲答案，但它實際上是對以前答案的評論彙編。

第一：非常聰明的代碼支持清除代碼。正如@pst所說，GZIP在製造比現在更小的產品方面非常出色。正如@mrtsherman所言，鏈接是讓jQuery遍歷DOM的方式。

第二：在開始擔心它的大小和效率之前考慮壽命。使用很短的使用期限的代碼，正如您在許多jQuery增強的Web「頁面」中發現的，實際上並不需要縮短週期。框架作爲其代碼路徑可以經常使用。

第三：請記住，瀏覽器緩存通常儘可能，所以即使你的代碼是非常大的，它很可能是一次性的打擊。

我不會爲編寫潦草的代碼找藉口;相反，我建議編寫非常清晰的美麗代碼將允許您添加功能，因爲您的意圖在您的代碼中非常明顯。人們幾乎可以肯定地欣賞比您保存的十幾個字節更多的功能。

來源

2012-03-15 04:04:01

回答

相關問題