$(document).ready(function(){ function showMenu(){ alert(); // Doing something complex here } $().click(showMenu); $().click(showMenu); });
21.像对待数组一样地对待jQuery对象
由于jQuery对象有index值和长度，所以这意味着我们可以把对象当作普通的数组对待。这样也会有更好地性能。
), iterations = 100000; timer(); for(var z=0;z<iterations;z++){ var length = arr.length; for(var i=0; i < length; i++){ arr[i]; } } timer_result(); timer(); for(z=0;z<iterations;z++){ arr.each(function(i, val) { this; }); } timer_result();
22.当做复杂的修改时要分离元素。
修改一个dom元素要求网页重绘，这个代价是高昂的，所以如果你想要再提高性能，就可以尝试着当对一个元素进行大量修改时先从页面中分离这个元素，修改完之后再添加到页面。
elem = $(); timer(); for(i=0; i < iterations; i++){ elem.width(Math.round(100*Math.random())); elem.height(Math.round(100*Math.random())); } timer_result(); var parent = elem.parent(); // Detaching first timer(); elem.detach(); for(i=0; i < iterations; i++){ elem.width(Math.round(100*Math.random())); elem.height(Math.round(100*Math.random())); } elem.appendTo(parent); timer_result();
23.不要一直等待load事件。
我们已经习惯了把我们所有的代码都放在ready的事件处理程序中，但是，如果你的html页面很庞大，decument ready恐怕会被延迟了，所以对于一些我们不希望ready后才可以触发的事件可以放在html的head元素中。
<script> // jQuery is loaded at this point. We can use // event delegation right away to bind events // even before $(document).ready: $(document).on(, , function(){ alert(); }); $(document).ready(function(){ // This is where you would usually bind event handlers, // but as we are using delegation, there is no need to. // $('#clickMe').click(function(){ alert('Hey!'); }); }); // Note: You should place your script tags at the bottom of the page. // I have included them in the head only to demonstrate that we can bind // events before document ready and before the elements are created. </script>
24.当使用js给多个元素添加样式时更好的做法是创建一个style元素。
我们之前提到过，操作dom是非常慢的，所以当添加多个元素的样式时创建一个style元素并添加到document中是更好的做法。
<ul id=> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> ); // Try commenting out this line, or change the color: style.text(); // Placing it before the result section so it affects the elements style.prependTo();
25.给html元素分配一个名为JS的class。
现代的web apps非常的依赖js，这里的一个技巧就是只有当js可用时才能显示特定的元素。看下面的代码。
$(document).ready(function(){ $().addClass(); }); html.JS #message { display:block; } #message {display:none;}
这样，只有js可用的时候id为message的元素才会显示；如果不支持js，则该元素不会显示。
26.监听不存在的元素上的事件。
jQuery拥有一个先进的事件处理机制，通过on()方法可以监听还不存在的事件。 这是因为on方法可以传递一个元素的子元素选择器作为参数。看下面的例子：
<ul id=> <li>Old</li> <li>Old</li> <li>Old</li> <li>Old</li> </ul> ); // Binding an event on the list, but listening for events on the li items: list.on(,,function(){ $(this).remove(); }); // This allows us to create li elements at a later time, // while keeping the functionality in the event listener list.append();
这样，即使li是后创建的，也可以通过on()方法来监听。
27.只使用一次事件监听。
有时，我们只需要绑定只运行一次的事件处理程序。那么one()方法是一个不错的选择，通过它你就可以高枕无忧了。
相关文章
精彩导读
热门资讯
关注我们
