jQuery最佳实践

1:事件的委托处理（Event Delegation）

javascript的事件模型，采用"冒泡"模式，也就是说，子元素的事件会逐级向上"冒泡"，成为父元素的事件。

利用这一点，可以大大简化事件的绑定。比如，有一个表格（table元素），里面有100个格子（td元素），现在要求在每个格子上面绑定一个点击事件（click），请问是否需要将下面的命令执行100次？

$("td").on("click", function(){
　　　　$(this).toggleClass("click");
　　});

答是不需要，我们只要把这个事件绑定在table元素上面就可以了，因为td元素发生点击事件之后，这个事件会"冒泡"到父元素table上面，从而被监听到。

因此，这个事件只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大提高性能。这就叫事件的"委托处理"，也就是子元素"委托"父元素处理这个事件。

　　$("table").on("click", "td", function(){

　　　　$(this).toggleClass("click");

　　});

更好的写法，则是把事件绑定在document对象上面。

　　$(document).on("click", "td", function(){

　　　　$(this).toggleClass("click");

　　});

如果要取消事件的绑定，就使用off()方法。

　　$(document).off("click", "td");　　　　

12. 使用Pub/Sub模式管理事件

当发生某个事件后，如果要连续执行多个操作，最好不要写成下面这样：

　　function doSomthing{

　　　　doSomethingElse();

　　　　doOneMoreThing();

　　}

而要改用事件触发的形式：

　　function doSomething{

　　　　$.trigger("DO_SOMETHING_DONE");

　　}

　　$(document).on("DO_SOMETHING_DONE", function(){

　　　　doSomethingElse(); }

　　);

还可以考虑使用deferred对象。

　　function doSomething(){

　　　　var dfd = new $.Deferred();

　　　　//Do something async, then...
　　　　//dfd.resolve();

　　　　return dfd.promise();

　　}

　　function doSomethingElse(){

　　　　$.when(doSomething()).then(//The next thing);

　　}

巴特西

jQuery最佳实践

最新文章

热门文章