这几天重温完了《锋利的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、性能优化
- 选择器尽量使用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不一样,保持良好的开发习惯,并学着不断去深度钻研,才是我们应该去做的。