阅读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

时间: 2024-10-10 12:46:11

阅读jQuery源码的18个惊喜的相关文章

阅读 jQuery 源码的18个惊喜

我热爱 jQuery,且尽管我认为自己算是一名高级 JavaScript 开发者,我从来没有试过由头到尾把 jQuery 的源码看一遍,直到现在.这里分享一些我一路下来学到的东西: 注意:我使用 $.fn.method() 语法来表示调用一组匹配元素的方法.比如当我说 $.fn.addClass,则表示$('div').addClass('blue') 或者 $('a.active').addClass('in-use') 此类的用法.$.fn 是 jQuery 包装元素的原型. 1. Sizz

问答形式阅读jQuery源码(一)

笔者阅读了园友艾伦 Aaron的系列博客<jQuery源码分析系列>,主要是阅读的jQuery的原理,然后跑园友的代码,真正对jQuery源码的阅读并不多.主要是直接阅读jQuery源码,一次能读懂的部分并不多,不如先阅读源码解析的文章,然后再阅读收获更大.笔者在阅读完园友艾伦的全部jQuery源码博客之后,准备真正开始阅读jQuery的源代码.而阅读的形式属于自问自答,把在阅读博客时候的留下来的疑问提出来,再通过自己阅读源码的形式对其解答:当然也包括在阅读源代码的时候那些读不懂的地方,提出疑

问答形式阅读jQuery源码(二)

这一篇笔者主要以设计的角度探索jQuery的源代码,很多人说jQuery设计过于个人主义话,其实这样说是有一定偏见的,因为好的设计是可通用的.共通的,jQuery这么好用,我们怎么能说他的设计是个人主义呢?好了开始正题. 提问:jQuery是怎么暴露自己的api的? 任何框架其实都是个门面模式,外部与框架的通信必须通过一个统一的门面,而这个门面就是我们说所的api.因此学习任何框架的源码,我们都要弄清两件事: 1.哪些是私有方法,因为私有方法是框架自己内部使用,是他不希望暴露给外围用户的,这些方

阅读jquery源码与js依赖加载的模块化!

阅读源码肯定是先下载有注释的源码 我也是醉了,10309 行代码,在陆续续的一个月之内,看完了,虽有收获但收获不大, 直到又一次看jquery的github,怎么会有cmd????没听过使用jquery时候还要用requresjs啊,这是咋回事啊,jquery不是一个独立的js库么, 不过看着 src文件夹下的目录,倒是非常清晰,每个文件里面的文件代码也不多,研究 代码也容易了 然后看了下grunt 配置文件才明白, 原来jq的作者为了在开发的时候,分清楚jq的内部结构,用amd的方式进行模块化

问答形式阅读jQuery源码(三)

通过艾伦的博客,我们能看出,jQuery的promise和其他回调都是通过jQuery.Callbacks实现的.所以我们一起简单看看jQuery.Deferred和jQuery.Callbacks.来看看关于他们的一些提问. 提问:jQuery.Callbacks的配置为什么是用字符串参数? jQuery.Callbacks有四种配置,分别是once.memory.unique.stopOnFalse.而jQuery.Callbacks的配置形式却和以往我们熟悉的不同,不是使用json,而是使

js菜鸟进阶-jQuery源码分析(1)-基本架构

导读: 本人JS菜鸟一枚,为加强代码美观和编程思想.所以来研究下jQuery,有需要进阶JS的同学很适合阅读此文!我是边看代码(jquery2.2.1),边翻“javascript高级程序设计”写的,有很多基本知识点我都写了书本对应的章节.有分析得不好的还请各位多多指教,更正! 希望我的分析对大家有所帮助,谢谢! 一.代码构成 (function(global, factory){ if ( typeof module === "object" && typeof mo

jQuery源码逐行分析学习02(第一部分:jQuery的一些变量和函数)

第一次尝试使用Office Word,方便程度大大超过网页在线编辑,不过初次使用,一些内容不甚熟悉,望各位大神见谅~ 在上次的文章中,把整个jQuery的结构进行了梳理,得到了整个jQuery的简化结构,如下: 1 (function(){ 2 (21 , 94) 定义了一些变量和函数 jQuery = function(){}; 3 (96 , 283) 给JQ对象,添加一些方法和属性 4 (285 , 347) extend : JQ的继承方法 5 (349 , 817) jQuery.ex

jquery源码学习笔记(一)jQuery的无new构建

本人是一名.net程序员..... 你一个.net coder 看什么jQuery 源码啊? 原因吗,很简单.技多不压身吗(麻蛋,前端工作好高...羡慕). 我一直都很喜欢JavaScript,废话不多说了,直接切入正题. 最近看了好几篇jQuery 源码的文章,对于jQuery的无new构建  很是不解. 查了很多资料,总算是搞明白了. jQuery的无new构建 jQuery框架的核心就是从HTML文档中匹配元素并对其执行操作. 回想一下使用 jQuery 的时候,实例化一个 jQuery

Jquery源码分析与简单模拟实现

前言 最近学习了一下jQuery源码,顺便总结一下,版本:v2.0.3 主要是通过简单模拟实现jQuery的封装/调用.选择器.类级别扩展等.加深对js/Jquery的理解. 正文 先来说问题: 1.jQuery为什么能使用$的方式调用,$是什么.$()又是什么.链式调用如何实现的 2.jQuery的类级别的扩展内部是怎样实现的,方法级别的扩展有是怎样实现的,$.fn又是什么 3.jQuery选择器是如何执行的,又是如何将结果包装并返回的 带着这些问题,我们进行jquery的模拟实现,文章下方有