软件工程师-15个值得开发者关注的jQuery开发技巧和心得.docx

15个值得开发者关注的jQuery开发技巧和心得在这篇文章中，我们将介绍15个让你的jQuery更加有效的技巧，大部分关于性能提升的，希望大家能够喜欢!1. 尽量使用最新版本的jQuery类库jQuery项目中使用了大量的创新。最好的方法来提高性能就是使用最新版本的jQuery。每一个新的版本都包含了优化的bug修复。对我们来说唯一要干的就是修改tag，何乐而不为呢?我们也可以使用免费的CDN服务，例如， Google来存放jQuery类库。1. 2. 3. 4. 2. 使用简单的选择器直 到最近，返回DOM元素的方式都是解析选择器字符串，javascript循环和内建的javascript API例如，getElementbyId()，getElementsByTagName()，getElementsByClassName()三种 方式的整合使用。但是现代浏览器都开始支持querySelectorAll()，这个方法能够理解CSS查询器，而且能带来显著的性能提升。然而，我们应该避免使用复杂的选择器返回元素。更不用说很多用户使用老版本的浏览器，强迫jQuery去处理DOM树。这个方式非常慢。1. $(lidata-selected=truea)/Fancy,butslow 2. $(li.selecteda)/Better 3. $(#elem)/Best选择id是最快速的方式。如果你需要使用class名称， 那么你最好带上tag名称，这样会更快些。特别是在老浏览器和移动设备上。访问DOM是javascript应用最慢的方式 ，因此尽量少使用。使用变量去保存选择器，这样会使用cache来保存。性能更好。1. varbuttons=$(#navigationa.button);/SomepreferprefixingtheirjQueryvariableswith$: 2. var$buttons=$(#navigationa.button);另 外一个值得做的是jQuery给了你很多的额外便利选择器 ，例如，:visible，:hidden，:animated还有其它，这些不是合法的CSS3选择器。结果是你使用这些类库就不能有效地利用 querySelectorAll()方法。为了弥补这个问题，你需要先选择元素，再过滤，如下：1. $(a.button:animated);/DoesnotusequerySelectorAll() 2. $(a.button).filter(:animated);/Usesit3. 数组方式使用jQuery对象运行选择器的结果是一个jQuery对象。然而，jQuery类库让你感觉你正在使用一个定义了index和长度的数组。1. /Selectingallthenavigationbuttons: 2. varbuttons=$(#navigationa.button); 3. 4. /Wecanloopthoughthecollection: 5. for(vari=0;ibuttons.length;i+) 6. console.log(buttonsi);/ADOMelement,notajQueryobject 7. 8. 9. /Wecanevensliceit: 10. varfirstFour=buttons.slice(0,4);如果性能是你关注的，那么使用简单for或者while循环来处理，而不是$.each()，这样能使你的代码更快。检查长度也是一个检查你的collection是否含有元素的方式。1. if(buttons)/Thisisalwaystrue 2. /Dosomething 3. 4. 5. if(buttons.length)/Trueonlyifbuttonscontainselements 6. /Dosomething 7. 4. 选择器属性jQuery提供了一个属性，这个属性显示了用来做链式的选择器。1. $(#containerli:first-child).selector/#containerli:first-child 2. $(#containerli).filter(:first-child).selector/#containerli.filter(:first-child)虽然上面的例子针对同样的元素，选择器则完全不一样。第二个实际上是非法的，你不可以使用它来创建一个对象。只能用来显示filter方法是用来缩小collection。5. 创建一个空的jQuery对象创建一个新的jQuery空间能极大的减小开销。有时候，你可能需要创建一个空的对象，然后使用add()方法添加对象。1. varcontainer=$(); 2. container.add(another_element);这也是quickEach方法的基础，你可以使用这种更快的方式而非each()。6. 选择一个随机元素上面我提到过，jQuery添加它自己的选择器过滤。除了类库，你可以添加自己的过滤器。只需要添加一个新的方法到$.expr:对象。一个非常棒的使用方式是Waldek Mastykarz的博客中提到的：创建一个用来返回随机元素的选择器。你可以修改下面代码：1. (function($) 2. varrandom=0; 3. 4. $.expr:.random=function(a,i,m,r) 5. if(i=0) 6. random=Math.floor(Math.random()*r.length); 7. 8. returni=random; 9. ; 10. 11. )(jQuery); 12. 13. /Thisishowyouuseit: 14. $(li:random).addClass(glow);7. 使用CSS HooksCSS hooks API是提供开发人员得到和设置特定的CSS数值的方法。使用它，你可以隐藏浏览器特定的执行并且使用一个统一的界面来存取特定的属性。1. $.cssHooksborderRadius= 2. get:function(elem,computed,extra) 3. /Dependingonthebrowser,readthevalueof 4. /-moz-border-radius,-webkit-border-radiusorborder-radius 5. , 6. set:function(elem,value) 7. /SettheappropriateCSS3property 8. 9. ; 10. 11. /Useitwithoutworryingwhichpropertythebrowseractuallyunderstands: 12. $(#rect).css(borderRadius,5);更好的在于，人们已经创建了一个支持CSS hooks类库8. 使用自定义的删除方法你可能听到过jQuery的删除插件，它能够允许你给你的动画添加特效。唯一的缺点是你的访问者需要加载另外一个javascript文件。幸运的是，你可以简单的从插件拷贝效果，并且添加到jQuery.easing对象中，如下：1. $.easing.easeInOutQuad=function(x,t,b,c,d) 2. if(t/=d/2)1)returnc/2*t*t+b; 3. return-c/2*(-t)*(t-2)-1)+b; 4. ; 5. 6. /Touseit: 7. $(#elem).animate(width:200,slow,easeInOutQuad);9. $.proxy()使用callback方法的缺点之一是当执行类库中的方法后，context被设置到另外一个元素，例如：1. 2. Close3. 执行下面代码：1. $(#panel).fadeIn(function() 2. /thispointsto#panel 3. $(#panelbutton).click(function() 4. /thispointstothebutton 5. $(this).fadeOut(); 6. ); 7. );你将遇到问题，button会消失，不是panel。使用$.proxy方法，你可以这样书写代码：1. $(#panel).fadeIn(function() 2. /Using$.proxytobindthis: 3. 4. $(#panelbutton).click($.proxy(function() 5. /thispointsto#panel 6. $(this).fadeOut(); 7. ,this); 8. );这样才正确的执行。$.proxy方法接受两个参数，你最初的方法，还有context。这里阅读更多$.proxy in the docs.。10. 判断页面是否太过复杂一个非常简单的道理，约复杂的页面，加载的速度越慢。你可以使用下面代码检查一下你的页面内容：1. console.log($(*).length);以上代码返回的数值越小，网页加载速度越快。你可以考虑通过删除无用多余的元素来优化你的代码11. 将你的代码转化成jQuery插件如果你要花一定得时间去开发一段jQuery代码，那么你可以考虑将代码变成插件。这将能够帮助你重用代码，并且能够有效的帮助你组织代码。创建一个插件代码如下：1. (function($) 2. $.fn.yourPluginName=function() 3. /Yourcodegoeshere 4. returnthis; 5. ; 6. )(jQuery);你可以在这里阅读更多开发教程。12. 设置全局AJAX为缺省如果你开发ajax程序的话，你肯定需要有”加载中“之类的显示告知用户，ajax正在进行，我们可以使用如下代码统一管理，如下：1. /ajaxSetupisusefulforsettinggeneraldefaults: 2. $.ajaxSetup( 3. url:/ajax/, 4. dataType:json 5. ); 6. 7. $.ajaxStart(function() 8. showIndicator(); 9. disableButtons(); 10. ); 11. 12. $.ajaxComplete(function() 13. hideIndicator(); 14. enableButtons(); 15. ); 16. 17. /* 18. /Additionalmethodsyoucanuse: 19. $.ajaxStop(); 20. $.ajaxError(); 21. $.ajaxSuccess(); 22. $.ajaxSend(); 23. */13. 在动画中使用delay()方法链式的动画效果是jQuery的强大之处。但是有一个忽略了的细节就是你可以在动画之间加上delays，如下：1. /Thisiswrong: 2. $(#elem).animate(width:200,function() 3. setTimeout(function() 4. $(#elem).animate(marginTop:100); 5. ,2000); 6. ); 7. 8. /Doitlikethis: 9. $(#elem).animate(width:200).delay(2000).animate(marginTop:100);jQuery动画帮了我们大忙，否则我们得自己处理一堆的细节，设置timtout，处理属性值，跟踪动画变化等等。大家可以参考这个文章：jQuery animations14. 合理利用HTML5的Data属性HTML5的data属性可以帮助我们插入数据。特别合适前后端的数据交换。jQuery近来发布的data()方法，可以有效的利用HTML5的属性，来自动得到数据。下面是个例子：1. 3. 为了存取数据你需要调用如下代码：1. $(#d1).data(role);/page 2. $(#d1).data(lastValue);/43 3. $(#d1).data(hidden);/t