阅读jQuery源码的18个惊喜

注释：本文使用$.fn.method指代调用一系列选中的元素的方法。例如，$.fn.addClass，指代$('div').addClass(‘blue’) 或 $('a.active’).addClass(‘in-use’)这些用法。$.fn指代jQuery对象。

 

1.Sizzle’s weight：Sizzle 是jQuery基于CSS选择器的DOM查找引擎。它可以将$(‘div.active’)转换成一个可操作的元素数组。Sizzle是jQuery很大的一个组成部分，但是它的规模之大的确令人惊讶。在jQuery源码中它无疑是最大的独立模块。计算了一下，它在所有代码中占了22%。这使得jQuery中的第二大的模块-占据源码的8%的$.ajax,显得很小。

 

2.$.grep:这个方法至少有两个参数，一个元素数组和一个函数，返回通过过滤的元素。

 

3.Bubbling caveats：jQuery特别阻止了一类事件的冒泡。就是load事件。本质上讲，jQuery传递了一个特别的noBubble:true标志位给任何的load事件，所以image.load事件不冒泡到window(有可能被误认为成window.load事件).

 

4.Default animation speed：jQuery通过连续不断的改变元素的样式属性来实现元素的动画。每一个改变称之为“tick”.默认的动画速度是每13毫秒进行一个“tick”，可以通过使用自己定义的整数值重写jQuery.fx.interval来调整这个速度。

 

5.$.fn.addClass accepts a function：我们通常提供给$.fn.addClass一个类名字符串来将它添加给一个元素。但它也可以接受一个函数。从这个函数中必须返回一个类名字符串将它们提供给相关元素。这个函数额外的接受关联元素的索引值作为一个参数，可以用它来建立智能的类名。

 

6.So does $.fn.removeClass：这个方法也可以接受函数，与上面提到的方法类似。这个函数也可以自动接收元素的索引值。

 

7.:empty pseudo selector：这个方便的伪类选择器可以选择没有子元素的节点。

 

8.:lt and :gt pseudo selectors：这些方便使用的伪类选择器通过设置的索引值来匹配元素。例如，$('div:gt(2)’)会返回除前三个的所有div元素（从0开始计数）。如果传一个负整数参数，它从后面开始计数。

 

9.$(document).ready() uses a promise：jQuery吃自己的狗粮，就类似这样。本质上讲，可信任的$(document).ready()使用了jQuery的deferred来确认DOM完全加载。

 

10.$.type：我确定我们都很熟悉用typeof来判断一个数据的类型，但你知道jQuery提供了一个.type()方法吗？jQuery的版本比浏览器本地的版本更智能。例如，typeof (new Number(3))返回"object",然而$.type(new Number(3))返回"number".更新下：正如ShirtlessKirk在评论中所说，$.type返回接收对象.valueOf()属性的类型。更精确的说，$.type告诉你一个对象返回的值。

 

11.$.fn.queue：可以通过下面的例子来观察下元素的效果队列:$(‘div’).queue().如果需要知道元素保留有多少效果，这个很有用。更有用的，可以直接操作队列来添加自己的效果。

$( document.body ).click(function() {

$( "div" )

  .show( "slow" )

  .animate({ left: "+=200" }, 2000 )

  .queue(function() {

    $( this ).addClass( "newcolor" ).dequeue();

  })

  .animate({ left: "-=200" }, 500 )

  .queue(function() {

    $( this ).removeClass( "newcolor" ).dequeue();

  })

  .slideUp();

});

12.Click events prohibited on disabled elements：jQuery自动不处理被禁用的元素的click事件，这是一个很棒的优化。

 

13.$.fn.on accepts an object：你知道$.fn.on接收一个对象来一次性连接多个事件吗？可以看个例子：

$( "div.test" ).on({

click: function() {

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

}, mouseenter: function() {

  $( this ).addClass( "inside" );

}, mouseleave: function() {

  $( this ).removeClass( "inside" );

}

});

14.$.camelCase：这个实用的方法将dashed-strings字符串转换成camelCased字符串。

 

15.$.active：调用$.active返回活跃的XHR的数量。这个在限制一次最多允许多少活跃的AJAX请求上会有用。

 

16.$.fn.parentsUntil / $.fn.nextUntil / $.fn.prevUntil：我对于.parents(), .next(), 和 .prev()方法很熟悉，但不知道有其他的版本。本质上，他们会匹配所有父元素、后元素、前元素直到他们遇到停止条件元素。

 

17$.fn.clone arguments：当.clone()元素时，你也可以通过传递true作为clone的第一个参数来克隆它的数据属性和事件。

 

18.More $.fn.clone arguments:除了上面提到的，也可以通过传递一个附加的true参数克隆它的子节点的数据属性和和事件。这被称为深克隆。第二个参数默认是第一个参数的值（默认false）。所以如果第一个参数是true,第二个也需要设置为true,可以完全省略第二个参数。

英文原文：http://quickleft.com/blog/18-surprises-from-reading-jquery-s-source-code