现在的位置: 首页 > 综合 > 正文

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

2014年02月03日 ⁄ 综合 ⁄ 共 3948字 ⁄ 字号 小 中 大 ⁄ 评论关闭

转自：http://blog.csdn.net/dinglang_2009/article/details/6998296

在这篇文章中，我们将介绍15个让你的jQuery更加有效的技巧，大部分关于性能提升的，希望大家能够喜欢！

1. 尽量使用最新版本的jQuery类库

jQuery项目中使用了大量的创新。最好的方法来提高性能就是使用最新版本的jQuery。每一个新的版本都包含了优化的bug修复。对我们来说唯一要干的就是修改tag，何乐而不为呢？

我们也可以使用免费的CDN服务，例如， Google来存放jQuery类库。

[html] view
plaincopy

  1. <!-- Include a specific version of jQuery -->  
  2. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>  
  3. <!-- Include the latest version in the 1.6 branch -->  
  4. <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树。这个方式非常慢。

[javascript] view
plaincopy

  1. $('li[data-selected="true"] a')    // Fancy, but slow   
  2. $('li.selected a')    // Better   
  3. $('#elem')    // Best  

选择id是最快速的方式。如果你需要使用class名称， 那么你最好带上tag名称，这样会更快些。特别是在老浏览器和移动设备上。

访问DOM是javascript应用最慢的方式 ，因此尽量少使用。使用变量去保存选择器，这样会使用cache来保存。性能更好。

[javascript] view
plaincopy

  1. var buttons = $('#navigation a.button');  // Some prefer prefixing their jQuery variables with $:   
  2. var $buttons = $('#navigation a.button');  

另外一个值得做的是jQuery给了你很多的额外便利选择器 ，例如，:visible，:hidden，:animated还有其它，这些不是合法的CSS3选择器。结果是你使用这些类库就不能有效地利用 querySelectorAll()
方法。为了弥补这个问题，你需要先选择元素，再过滤，如下：
[javascript] view
plaincopy

  1. $('a.button:animated');    // Does not use querySelectorAll()   
  2. $('a.button').filter(':animated');    // Uses it  

3. 数组方式使用jQuery对象

运行选择器的结果是一个jQuery对象。然而，jQuery类库让你感觉你正在使用一个定义了index和长度的数组。

[javascript] view
plaincopy

  1. // Selecting all the navigation buttons:  
  2. var buttons = $('#navigation a.button');  
  3.   
  4. // We can loop though the collection:  
  5. for(var i=0;i<buttons.length;i++){  
  6.     console.log(buttons[i]);    // A DOM element, not a jQuery object  
  7. }  
  8.   
  9. // We can even slice it:  
  10. var firstFour = buttons.slice(0,4);  

如果性能是你关注的，那么使用简单for或者while循环来处理，而不是$.each()，这样能使你的代码更快。

检查长度也是一个检查你的collection是否含有元素的方式。

[javascript] view
plaincopy

  1. if(buttons){ // This is always true  
  2.     // Do something  
  3. }  
  4.   
  5. if(buttons.length){ // True only if buttons contains elements  
  6.     // Do something  
  7. }  

4. 选择器属性

jQuery提供了一个属性，这个属性显示了用来做链式的选择器。

[javascript] view
plaincopy

  1. $('#container li:first-child').selector    // #container li:first-child  
  2. $('#container li').filter(':first-child').selector    // #container li.filter(:first-child)  

虽然上面的例子针对同样的元素，选择器则完全不一样。第二个实际上是非法的，你不可以使用它来创建一个对象。只能用来显示filter方法是用来缩小collection。

5. 创建一个空的jQuery对象

创建一个新的jQuery空间能极大的减小开销。有时候，你可能需要创建一个空的对象，然后使用add()方法添加对象。

[javascript] view
plaincopy

  1. var container = $([]);   
  2. container.add(another_element);  

这也是quickEach方法的基础，你可以使用这种更快的方式而非each()。

6. 选择一个随机元素

上面我提到过，jQuery添加它自己的选择器过滤。除了类库，你可以添加自己的过滤器。只需要添加一个新的方法到$.expr[':']对象。一个非常棒的使用方式是Waldek Mastykarz的博客中提到的：创建一个用来返回随机元素的选择器。你可以修改下面代码：

[javascript] view
plaincopy

  1. (function($){  
  2.     var random = 0;  
  3.   
  4.     $.expr[':'].random = function(a, i, m, r) {  
  5.         if (i == 0) {  
  6.             random = Math.floor(Math.random() * r.length);  
  7.         }  
  8.         return i == random;  
  9.     };  
  10.   
  11. })(jQuery);  
  12.   
  13. // This is how you use it:  
  14. $('li:random').addClass('glow');  

7. 使用CSS Hooks

CSS hooks API是提供开发人员得到和设置特定的CSS数值的方法。使用它，你可以隐藏浏览器特定的执行并且使用一个统一的界面来存取特定的属性。

[javascript] view
plaincopy

  1. $.cssHooks['borderRadius'] = {  
  2.         get: function(elem, computed, extra){  
  3.             // Depending on the browser, read the value of  
  4.             // -moz-border-radius, -webkit-border-radius or border-radius  
  5.         },  
  6.         set: function(elem, value){  
  7.             // Set the appropriate CSS3 property  
  8.         }  
  9. };  
  10.   
  11. // Use it without worrying which property the browser actually understands:  
  12. $('#rect').css('borderRadius',5);  

更好的在于，人们已经创建了一个支持CSS hooks类库

8. 使用自定义的删除方法

你可能听到过jQuery的删除插件，它能够允许你给你的动画添加特效。唯一的缺点是你的访问者需要加载另外一个javascript文件。幸运的是，你可以简单的从插件拷贝效果，并且添加到jQuery.easing对象中，如下：

[javascript] view
plaincopy

  1. $.easing.easeInOutQuad = function (x, t, b, c, d) {  
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞