15个值得开发人员关注的jQuery开发技巧和心得

在这篇文章中，咱们将介绍15个让你的jQuery更加有效的技巧，大部分关于性能提高的，但愿你们可以喜欢！

　　1. 尽可能使用最新版本的jQuery类库 　　jQuery项目中使用了大量的创新。最好的方法来提升性能就是使用最新版本的jQuery。每个新的版本都包含了优化的bug修复。对咱们来讲惟一要干的就是修改tag，何乐而不为呢？ 　　咱们也可使用免费的CDN服务，例如， Google来存放jQuery类库。 　　<!-- Include a specific version of jQuery --> 　　<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 　　<!-- Include the latest version in the 1.6 branch --> 　　<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 　　2. 使用简单的选择器 　　直到最近，返回DOM元素的方式都是解析选择器字符串，javascript循环和内建的javascript API，例如， getElementbyId()，getElementsByTagName()，getElementsByClassName()三种方式的整合使用。可是现代浏览器都开始支持querySelectorAll()，这个方法可以理解CSS查询器，并且能带来显著的性能提高。 　　然而，咱们应该避免使用复杂的选择器返回元素。更不用说不少用户使用老版本的浏览器，强迫jQuery去处理DOM树。这个方式很是慢。 　　$('li[data-selected="true"] a') // Fancy, but slow 　　$('li.selected a') // Better 　　$('#elem') // Best 　　选择id是最快速的方式。若是你须要使用class名称， 那么你最好带上tag名称，这样会更快些。特别是在老浏览器和移动设备上。 　　访问DOM是javascript应用最慢的方式 ，所以尽可能少使用。使用变量去保存选择器，这样会使用cache来保存。性能更好。 　　var buttons = $('#navigation a.button'); // Some prefer prefixing their jQuery variables with $: 　　var $buttons = $('#navigation a.button'); 　　另一个值得作的是jQuery给了你不少的额外便利选择器 ，例如，:visible，:hidden，:animated还有其它，这些不是合法的CSS3选择器。结果是你使用这些类库就不能有效地利用 querySelectorAll() 方法。为了弥补这个问题，你须要先选择元素，再过滤，以下： 　　$('a.button:animated'); // Does not use querySelectorAll() 　　$('a.button').filter(':animated'); // Uses it 　　3. 数组方式使用jQuery对象 　　运行选择器的结果是一个jQuery对象。然而，jQuery类库让你感受你正在使用一个定义了index和长度的数组。 　　// Selecting all the navigation buttons: 　　var buttons = $('#navigation a.button'); 　　// We can loop though the collection: 　　for(var i=0;i<buttons.length;i++){ 　　console.log(buttons[i]); // A DOM element, not a jQuery object 　　} 　　// We can even slice it: 　　var firstFour = buttons.slice(0,4); 　　若是性能是你关注的，那么使用简单for或者while循环来处理，而不是$.each()，这样能使你的代码更快。 　　检查长度也是一个检查你的collection是否含有元素的方式。 　　if(buttons){ // This is always true 　　// Do something 　　} 　　if(buttons.length){ // True only if buttons contains elements 　　// Do something 　　} 　　4. 选择器属性 　　jQuery提供了一个属性，这个属性显示了用来作链式的选择器。 　　$('#container li:first-child').selector // #container li:first-child 　　$('#container li').filter(':first-child').selector // #container li.filter(:first-child) 　　虽然上面的例子针对一样的元素，选择器则彻底不同。第二个其实是非法的，你不可使用它来建立一个对象。只能用来显示filter方法是用来缩小collection。 　　5. 建立一个空的jQuery对象 　　建立一个新的jQuery空间能极大的减少开销。有时候，你可能须要建立一个空的对象，而后使用add()方法添加对象。 　　var container = $([]); 　　container.add(another_element); 　　这也是quickEach方法的基础，你可使用这种更快的方式而非each()。 　　6. 选择一个随机元素 　　上面我提到过，jQuery添加它本身的选择器过滤。除了类库，你能够添加本身的过滤器。只须要添加一个新的方法到$.expr[':']对象。一个很是棒的使用方式是Waldek Mastykarz的博客中提到的：建立一个用来返回随机元素的选择器。你能够修改下面代码： 　　(function($){ 　　var random = 0; 　　$.expr[':'].random = function(a, i, m, r) { 　　if (i == 0) { 　　random = Math.floor(Math.random() * r.length); 　　} 　　return i == random; 　　}; 　　})(jQuery); 　　// This is how you use it: 　　$('li:random').addClass('glow'); 　　7. 使用CSS Hooks 　　CSS hooks API是提供开发人员获得和设置特定的CSS数值的方法。使用它，你能够隐藏浏览器特定的执行而且使用一个统一的界面来存取特定的属性。 　　$.cssHooks['borderRadius'] = { 　　get: function(elem, computed, extra){ 　　// Depending on the browser, read the value of 　　// -moz-border-radius, -webkit-border-radius or border-radius 　　}, 　　set: function(elem, value){ 　　// Set the appropriate CSS3 property 　　} 　　}; 　　// Use it without worrying which property the browser actually understands: 　　$('#rect').css('borderRadius',5); 　　更好的在于，人们已经建立了一个支持CSS hooks类库 　　8. 使用自定义的删除方法 　　你可能听到过jQuery的删除插件，它可以容许你给你的动画添加特效。惟一的缺点是你的访问者须要加载另一个javascript文件。幸运的是，你能够简单的从插件拷贝效果，而且添加到jQuery.easing对象中，以下： 　　$.easing.easeInOutQuad = function (x, t, b, c, d) { 　　if ((t/=d/2) < 1) return c/2tt + b; 　　return -c/2 * ((--t)(t-2) - 1) + b; 　　}; 　　// To use it: 　　$('#elem').animate({width:200},'slow','easeInOutQuad'); 　　9. $.proxy() 　　使用callback方法的缺点之一是当执行类库中的方法后，context被设置到另一个元素，例如： 　　<div id="panel" style="display:none"> 　　<button>Close</button> 　　</div> 　　执行下面代码： 　　$('#panel').fadeIn(function(){ 　　// this points to #panel 　　$('#panel button').click(function(){ 　　// this points to the button 　　$(this).fadeOut(); 　　}); 　　}); 　　你将遇到问题，button会消失，不是panel。使用$.proxy方法，你能够这样书写代码： 　　$('#panel').fadeIn(function(){ 　　// Using $.proxy to bind this: 　　$('#panel button').click($.proxy(function(){ 　　// this points to #panel 　　$(this).fadeOut(); 　　},this)); 　　}); 　　这样才正确的执行。$.proxy方法接受两个参数，你最初的方法，还有context。这里阅读更多$.proxy in the docs.。 　　10. 判断页面是否太过复杂 　　一个很是简单的道理，约复杂的页面，加载的速度越慢。你可使用下面代码检查一下你的页面内容： 　　console.log( $('').length ); 　　以上代码返回的数值越小，网页加载速度越快。你能够考虑经过删除无用多余的元素来优化你的代码 　　11. 将你的代码转化成jQuery插件 　　若是你要花必定得时间去开发一段jQuery代码，那么你能够考虑将代码变成插件。这将可以帮助你重用代码，而且可以有效的帮助你组织代码。建立一个插件代码以下： 　　(function($){ 　　$.fn.yourPluginName = function(){ 　　// Your code goes here 　　return this; 　　}; 　　})(jQuery); 　　你能够在这里阅读更多开发教程。 　　12. 设置全局AJAX为缺省 　　若是你开发ajax程序的话，你确定须要有”加载中“之类的显示告知用户，ajax正在进行，咱们可使用以下代码统一管理，以下： 　　// ajaxSetup is useful for setting general defaults: 　　$.ajaxSetup({ 　　url : '/ajax/', 　　dataType : 'json' 　　}); 　　$.ajaxStart(function(){ 　　showIndicator(); 　　disableButtons(); 　　}); 　　$.ajaxComplete(function(){ 　　hideIndicator(); 　　enableButtons(); 　　}); 　　/* 　　// Additional methods you can use: 　　$.ajaxStop(); 　　$.ajaxError(); 　　$.ajaxSuccess(); 　　$.ajaxSend(); 　　*/ 　　详细你能够查看这篇文章jQuery’s AJAX functionality。 　　13. 在动画中使用delay()方法 　　链式的动画效果是jQuery的强大之处。可是有一个忽略了的细节就是你能够在动画之间加上delays，以下： 　　// This is wrong: 　　$('#elem').animate({width:200},function(){ 　　setTimeout(function(){ 　　$('#elem').animate({marginTop:100}); 　　},2000); 　　}); 　　// Do it like this: 　　$('#elem').animate({width:200}).delay(2000).animate({marginTop:100}); 　　jQuery动画帮了咱们大忙，不然咱们得本身处理一堆的细节，设置timtout，处理属性值，跟踪动画变化等等。 　　你们能够参考这个文章：jQuery animations 　　14. 合理利用HTML5的Data属性 　　HTML5的data属性能够帮助咱们插入数据。特别合适先后端的数据交换。jQuery近来发布的data()方法，能够有效的利用HTML5的属性，来自动获得数据。下面是个例子： 　　<div id="d1" data-role="page" data-last-value="43" data-hidden="true" 　　data-options='{"name":"John"}'> 　　</div> 　　为了存取数据你须要调用以下代码： 　　$("#d1").data("role"); // "page" 　　$("#d1").data("lastValue"); // 43 　　$("#d1").data("hidden"); // true; 　　$("#d1").data("options").name; // "John"; 　　若是你想看看实际的例子，请参考这篇教程：使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展现效果 　　data()的jQuery文档：data() in the jQuery docs 　　15. 本地存储和jQuery 　　本地存储是一个超级简单的API。简单的添加你的数据到localStorage全局属性中: 　　localStorage.someData = "This is going to be saved across page refreshes and browser restarts"; 　　可是对于老的浏览器来讲，这个不是个好消息。由于他们不支持。可是咱们可使用jQuery的插件来提供支持一旦本地存储不能用的话。这种方式可使得本地存储功能正常工做。 　　以上是咱们介绍的15个jQuery的开发技巧。