阅读jquery源码带来的十八大惊喜

来源：互联网发布：天通银哪个软件编辑：程序博客网时间：2024/04/29 16:54

译自：https://quickleft.com/blog/18-surprises-from-reading-jquery-s-source-code/?from=timeline&isappinstalled=0

阅读jquery源码带来的十八大惊喜

刊登于javascript周刊

我热爱jquery，尽管我一直认为自己是个前沿的javascript开发者，但我从未从头到尾阅读过jquery源码，直到现在。以下是我在阅读过程收获的几点。

注明：我用$.fn.method()语法来作为匹配元素方法的调用。比如，当我说$.fn.addClass时，那表示使用像$(‘div’).addClass(‘blue’)or$(‘a.active’).addClass(‘in-use’)这些方法。$.fn是用jquery包裹元素的原型。

Sizzle的权重：Sizzle是jquery基于css 选择器寻找DOM元素的选择器引擎。这就是把诸如$(‘div.active’)转变成数组元素的引擎。我知道Sizzle构成了jquery的很大的一部分。但我只是惊讶于它是否真的如此庞大。它当然是jquery源码中单个的最大特征。但我的估算是它覆盖了所有代码库的几乎22%的权重。这使得jquery中的另一大特征$.ajax相比较显得占比量小，只构成了所有代码库的8%。
$.grep:这个方法有点类似于Underscore’s_.filter，其中它包含了2个参数，一个数组元素及一个函数，并且返回通过函数的真测试的元素。
事件冒泡注意事项：jQuery明确禁止一种不断冒泡的事件，即加载事件。在内部，jquery通过任何加载事件传递了一个特别的noBubble:true。所以图片的加载事件就不会冒泡到窗口（这可能被误匹配为window的加载事件）。
默认的动画速度：jquery通过快速的演替改变元素的样式属性来使得他们做动画。每一个这些变化都被称为一个“滴答”。默认的动画速度是每13毫秒运行一次滴答。你可以用自己的数值通过复写jQuery.fx.interval来调整。
$.fn.addClass接受一个函数：我们通常通过提供给$.fn.addClass一个类名的字符串来添加给一个元素。但它也同样能接受一个函数。你必须通过从函数中返回一个空格符分割的类名称的字符串来提供给匹配的元素。这个函数接受匹配元素的索引值来作为一个参数，你可以用来建立智能的类名。
$.fn.removeClass也同样如此：就像上面所提到的方法一样，它也接受一个函数，这个函数可以自动接受元素的索引值。
:empty伪元素选择器：这个便捷的伪元素选择器将匹配那些没有子节点的元素。
:lt和:gt的伪元素选择器：这些伪元素选择器是基于他们在匹配项的索引值来匹配元素的。例如：$(‘div:gt(2)’)会返回除了前三个的所有 div（序列号是从0开始的），如果你提供了一个负数作为参数，那么它就从这组的末端开始向后计数。
$(document).ready()使用了一个承诺：在内部，使用$(document).ready()延迟到等dom完全加载后开始使用jquery。
$.type: 我确信我们都很熟悉用typeof来判断数据的类型。但你是否知道jquery提供了一个.type()的方法？jquery的版本比原生浏览器的版本更加智能。比如，typeof (new Number(3))返回的是对象，而$.type(newNumber(3))返回的是数值。更新：正如ShirtlessKirk在评论中提出的：$.type返回的是接收对象的.valueOf()属性的类型。所以更准确地来说$.type告诉你的是返回的对象的值的类型。

$.fn.queue:你能期待一个元素的队列效果用如下的样例代码：$(‘div’).queue()

。这对于你需要知道一个元素上到底有多少效果是有用的。更有用的是，你可以操作队列来增加你自己的效果，来看这个jquery文档。

$( 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();  });

点击事件被禁止用在disabled的元素上：jquery在disabled的元素上自动不会实行点击事件。这是一个很好的优化，来帮你省去来编写代码校对这个场景。

$.fn.on接受一个对象：你是否知道$.fn.on接受一个对象一次可以附上多个事件？这是jquery文档的一个例子。

$( "div.test" ).on({    click: function() {      $( this ).toggleClass( "active" );    }, mouseenter: function() {      $( this ).addClass( "inside" );    }, mouseleave: function() {      $( this ).removeClass( "inside" );    }  });

$.camelCase:这种工具方法可以把虚线字符串转换成驼峰字符串。
$.active:调用$.active返回的是active XHR的查询数量。这对于实施限制一次允许多少在线的ajax请求是有用的。
$.fn.parentsUntil/ $.fn.nextUntil / $.fn.prevUntil:我非常熟悉.parents(),.next()及 .prev()方法，但我并不知道还有其他的版本存在。实质上，他们可以匹配所有的父（祖先）/下一个/前一个元素直到他们遇到止损条件元素。
$.fn.clone参数：当你用.clone()的方法来克隆一个元素的时候，你也可以克隆它的数据属性及时间，通过对clone的第一个参数传递true。
更多的$.fn.clone的参数：除了上面所提到的之外，你还可以通过传递一个附加的true的参数来克隆其子元素的数据属性及事件，这被称作为“深度克隆”。第二个参数默认为第一个参数的值（第一个参数的默认值是false）。所以如果第一个参数是true，你希望第二个参数也是true，你完全可以忽略第二个参数。

译者：生如夏花

2015.7.4

转载请注明谢谢

0 0