锋利的jQuery

这几天重温完了《锋利的jQuery》这本书，对书中比较精彩的地方做一个总结。1、书写格式

• 对于同一个对象不超过3个操作的，可以直接写成一行；例如

 $("li").show().unbind('click',myClick);

• 对于同一个对象有较多操作的，建议每行写一个；例如

  $(“li”).removeClass(“a”)
  .addClass(“b”)
  .stop()
  .animate()
  .bind(‘click’,myClick);

• 对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以缩进表示，例如：

  $("li").addClass("a")      .children("li").show().end()  .siblings().removeClass("a").      children("li").hide();

• 为区别开DOM对象和jQuery对象，在每一个jQuery对象赋给变量时变量以$开头，例如：
  var $block = $("#block");
• 根据《你不知道的JavaScript》和《锋利的jQuery》两本书的建议，对于需要外部调用的回调函数，最好都写成具名函数；例如：

    $(document).bind('contextmenu',function c(){ return false; });

• 如果选择其中含有特殊符号，要使用转义字符；例如

    $("#c\\#a"); 和 $(".c\\.a");

2、性能优化

1. 选择器尽量使用ID或元素选择器，因为JavaScript都有相对的原生方法支持。例如：

$("#id") 对应 document.getElementById("id");$("input") 对应 document.getElementsByTagName("input");

    对于其他的选择器，尽量组合这上面两个选择器使用，缩小DOM的定位范围，相应的也就提升了性能;2、 缓存对象我们都知道直接的DOM操作很耗内存，其实jQuery在创建对象的时候也会耗费内存，如果同一个对象需要多次创建或查找，那么对性能也是有一定的影响，例如：

$("#id .class div:last:not(:hidden)").show();$("#id .class div:last:not(:hidden)").css();$("#id .class div:last:not(:hidden)").css();

上面的栗子操作的都是同一个对象，但是jQuery却要创建三次，并且是在复杂的选择器情况下，如果需要操作很多次的话，那么性能就会出现下降。最佳实践是将该jQuery对象缓存起来备用，这样jQuery就不用每次都要创建了，从而就提高效率了。例如：

var  $div = $("#id .class div:last:not(:hidden)");$div.show().css();

3、 事件代理（利用事件冒泡）有一个父元素，里面有一个子元素，现在需要点击子元素能出现相应的操作，按照固定逻辑，我们肯定是直接找到那个子元素，然后给他绑定事件，例如：

$("ul li").click(function(){});

这没问题，但是如果有一千个子元素呢，还要对每个子元素一一绑定事件么?不用我说你都知道这个效率肯定会很差，现在我们利用事件冒泡的规则，在父元素上绑定一个事件，再确定事件源，单独绑定事件，是不是就很方便，感觉整个人都轻松了许多。例如：

$("ul").click(function(e){    var e = e || event;    var $target = $(event.target);    .......});

这是通过event.target属性来确定事件源，还有一种方法，就是jQuery的delegate()方法，例如：

函数签名: $(selector).delegate(childSelector,event,data(可选),function)栗子:$("ul").delegate("li","click",function(){    .......});

4、复用代码（插件模式）如果你每次都需要花上一定的时间去开发类似的jQuery代码，那么不妨把它写成插件，提高代码的重用性。例如：

(function($){    $.fn.myPlugin = function(){        //.......        return this;    }})(jQuery);

5、尽量使用原生的JavaScript相对于使用jQuery函数，如果JavaScript中有相应的直接实现，那么使用JavaScript的原生方法要好一些，毕竟直接操作比拐个弯再操作要快。例如：判断一个checkbox是否被选中

jQuery:    if($("div").is(":checked"))javaScript:    if($checkbox.checked){}

JavaScript的方法要比jQuery直接多了，这种方法还可以用在ID查找、css样式修改等方面，工作中可以多观察观察。

总结：其实还有很多东西我没有总结出来，因为jQuery属于大家最常用也是最熟悉的一个前端库，好多东西不必多说，以上的总结只是为了更好地利用jQuery和规范开发，再说现在的计算机性能都提升了好多，有时候这些细节也不用在意。但是会用jQuery和用好jQuery不一样，保持良好的开发习惯，并学着不断去深度钻研，才是我们应该去做的。