首页 > 代码库 > 阅读jQuery源码的18个惊喜

阅读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的延时来确认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

阅读jQuery源码的18个惊喜