Question

<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);
});

上面的代码工作正常。为了“缩小”，任何人都可以建议脚本部分的最短路径，比如......

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

虽然悬停和点击之间存在冲突。

TIA。

Answer 1

从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

Answer 2

我会将此格式化为答案，尽管它实际上是对以前答案的评论汇编。

首先：在非常聪明的代码上支持清晰的代码。正如@pst所说，GZIP非常擅长缩小规模。正如@mrtsherman建议的那样，Chaining是让jQuery遍历每个元素的DOM的方法。

第二：在开始担心其规模和效率之前，请考虑一下生命周期。如你在许多jQuery增强的Web“页面”中发现的那样具有短寿命的代码实际上不需要挤压循环。可以经常使用框架作为其代码路径。

第三：请记住，浏览器通常会尽可能地缓存，因此即使您的代码非常大，也可能是一次性命中。

我不是在编写草率代码的借口;相反，我建议编写格外清晰的漂亮代码将允许您添加功能，因为您的意图在您的代码中明显表达。人们几乎肯定会欣赏额外的功能而不是你保存的十几个字节。

缩小jQuery

2 个答案: