jQuery的总体结构分析及其实现的详细说明

jQuery的总体框架是非常复杂和难以理解，并一直在研究这一沉重有力的最后几天框架。jQuery的总体结构可分为入口模块，底层模块和功能模块。在这里，我们把jquery-1.7.1为例。

jQuery的总体架构

复制代码代码如下所示：

16（函数（窗口，未定义的）{）

jQuery对象结构

22 var =（函数（））{（）

25 var =函数（选择器，上下文）{

27回新jquery.fn.init（选择器，语境，rootjquery）；

28 }，

本地变量声明

97 jquery.fn = jquery.prototype = { {

98构造函数：jQuery，

99初始化：功能（选择、语境、rootjquery）{…}，

一个原型/属性和方法

319};

322 jquery.fn.init.prototype = jquery.fn；

324 jquery.extend = jquery.fn.extend =函数（）{…}；

388 jquery.extend（{

一堆静态属性和方法

892 }）；

955返回jQuery；

957 }）；

忽略其他模块代码…

9246美元= jQuery window.jquery =窗口；

9266 }）（窗口）；
通过对以上代码的分析，我们发现jQuery采用了匿名函数自执行的方式。这种方法的优点是，它可以有效地防止和变量命名空间污染问题。把上面的代码是：

复制代码代码如下所示：

函数（窗口，未定义）{

Var（jQuery =函数）{ }

…

window.jquery =美元= jQuery的窗口；

}（窗口）；
参数窗口

匿名函数有两个参数，一个是窗口，而另一个是未定义的。我们知道在JS，变量作用域链，这两个变量的进口将成为匿名函数的局部变量，这将是更快的访问时，通过窗口对象可以使窗口作为一个地方可变对象，该函数的参数已经成为局部变量，当访问窗口对象在jQuery，你不需要返回到作用域链范围的顶端，它能够快速地访问窗口对象。

参数定义

js搜索变量时，js引擎首先在函数本身的范围内查找这个变量。如果没有，它将继续向上看。如果它找到了它，它将返回到变量，如果找到它，它将不能返回到未定义的。未定义的是窗口对象的属性。通过传递未定义的参数，但不赋值，可以在查找未定义的时候缩短范围链。在调用匿名函数的范围内，确保未定义的是真正未定义的，因为未定义的可以重写以赋予新的值。

jquery.fn是什么

复制代码代码如下所示：

jquery.fn = jquery.prototype = { {

构造函数：jQuery，

初始化：功能（选择、语境、rootjquery）{…}，

一个原型/属性和方法

}；
通过分析上面的代码中，我们发现，jquery.fn是jquery.prototype，和写作的优点是可以缩短。在那之后，我们看到，jQuery的简单地用美元符号代替jQuery的简单。因此，我们经常在jQuery框架中使用$（）。

构造函数jQuery（）

图片描述

jQuery对象不是由新的jQuery创建，但创建新的jquery.fn.init。

复制代码代码如下所示：

函数（选择器，上下文）{

返回新的jquery.fn.init（选择器，语境，rootjquery）；

}
这里我们定义了一个变量jQuery，它的值是jQuery构造函数，返回并分配给955行中的jQuery变量（顶部代码）

jquery.fn.init

JQuery.fn（97线以上）是构造函数jQuery原型对象（），jquery.fn.init（）是一个jQuery原型方法或构造函数。它负责分析的参数选择和语境的类型执行相应的查询。

参数上下文：您不能传递它，或者将它传递到jQuery对象，DOM元素，一个普通的js对象。

参数rootjquery：包含文档对象用于document.getelementbyid jQuery对象（）查找失败，等等。

复制代码代码如下所示：

jquery.fn.init.prototype = = jquery.prototype jquery.fn

jQuery（选择{，上下文}）
默认情况下，对匹配元素的搜索从根元素文档对象开始，即搜索范围是整个文档树。但是，它也可以通过第二个参数上下文来限制搜索的范围：

复制代码代码如下所示：

$（'div.foo）。Click（function（）{）

（'span美元，此）。AddClass（'bar '）； / /定义搜索的范围，这是上面的语境

}）；

JQuery.extend（）和（）jquery.fn.extend
方法jquery.extend（对象）和jquery.fn.extend（对象）用于合并两个或两个以上对象的第一个对象。相关的源代码如下（部分）：

复制代码代码如下所示：

jquery.extend = jquery.fn.extend =函数（）{（）

VaR的选项，名字，SRC，复制，copyisarray，克隆， / /一组定义的局部变量

目标=论点{ 0 } | | { }，

我= 1，

长度= arguments.length，

深=假；
JQuery.extend（对象）；添加jQuery类方法可以理解为添加一个静态方法。如：

复制代码代码如下所示：

扩展（{

问题补充：功能（A，B）{回归A + B；}

}）；
在jQuery中添加一个静态方法来添加，然后可以使用jQuery引入的这个方法。

添加（3,4）；返回7

JQuery.fn.extend（对象），看到一段官方网站的代码如下：

复制代码代码如下所示：

Foo

酒吧
JQuery.fn.extend（{

检查：函数（）{

返回this.each（函数（）{（）

this.checked =真；

}）；

}，

取消：函数（）{

返回this.each（函数（）{（）

this.checked = false；

}）；

}

}）；

使用新创建的（方法）

$（输入{类型= 'checkbox}）检查（）；
CSS选择器引擎的嘶嘶声

可以说jQuery天生就是操作DOM的。jQuery是如此强大，它得益于CSS选择器引擎的嘶嘶声，和分析规则指的是一个例子，在互联网上。

选择器： + div.aaron输入{类型= 复选框

解析规则：

1从右到左

2取出最后一个标记，如{复选框}

{

匹配：数组{ 3 }

类型：属性

值：

复选框}

}

3个过滤器类型IF类型是四个null关系选择器之一，跳过和继续过滤。

4直到匹配到id、类、标记，因为这可以通过浏览器的接口获得。

5种种子都有采集值，所以选择的收缩条件很小。

6如果有匹配的种子集，需要进一步的滤波的多集，改进的选择器选择器：div＞P + div.aaron {类型= ）复选框

7好，跳转到编译函数的阶段。
延迟对象

在开发Web站点的过程中，经常会遇到一些耗时的Javaｓｃｒｉｐｔ操作，其中有异步操作，如ajax读取服务器数据和同步操作，如遍历一个大数组，而这些数组不能立即得到结果。

通常的做法是为它们指定一个回调函数（回调）。

然而，在回调函数中，jQuery的功能非常弱。

总之，延迟对象是jQuery的回调函数解决方案。

jQuery的ajax操作的传统写作回顾：

复制代码代码如下所示：

$ ajax（{

URL

成功：函数（）{

警报（哈哈，成功！！；

}，

错误：函数（）{

警告（错误）！；

}

}）；
在上面的代码中，$（）接受一个对象参数，它包含两种方法：成功方法在操作成功后指定回调函数，错误方法指定操作失败后的回调函数。

如果美元。Ajax（）操作完成后，如果你使用jQuery，低于1.5.0版本，返回XHR对象，你不能进行连锁经营。如果1.5.0高于1.5.0版本，它将返回延迟对象和连锁经营。

现在，新的写作方式是：

复制代码代码如下所示：

美元（）

完成（函数）{警报（），哈哈，成功！；}

失败（函数）{警报（）错误！；}；
为多个操作指定回调函数

延迟对象的另一大优点是它允许您为多个事件指定回调函数，而这不是传统编写的。

看看下面的代码，它使用了一个新方法，$（）：

复制代码代码如下所示：

美元。当（美元。Ajax（test1 .html），美元。Ajax（test2。html））

完成（函数）{警报（），哈哈，成功！；}

失败（函数）{警报（）错误！；}；
这段代码的意思是先执行两个操作元。Ajax（test1 .html）和美元。阿贾克斯（test2。html）。如果它们都成功，则运行由（）指定的回调函数，如果出现故障或失败，执行由失败（）指定的回调函数。

jQuery的实现原理

在内部，维护三个回调函数列表：成功的回调函数列表、失败的回调函数列表、消息回调函数列表，以及其他方法在这三个列表周围操作和检测。

jQuery的源结构：

复制代码代码如下所示：

JQuery.extend（{

函数（函数）{

成功回调函数列表

无功donelist = jQuery。回调（曾经的记忆），

失败列表回调函数

faillist = jQuery。回调（曾经的记忆），

消息回调列表

progresslist = jQuery。回调（记忆），

初始状态

状态挂起

一个只读复制队列异步

允诺= {

完成、失败、进展

/ /状态，得到的，将被拒绝

，那么，总是

管道

承诺

}，

异步队列

延期= promise.promise（{ }），

关键；

方法来添加触发器成功和失败，消息回调函数列表

对于（列表中的键）{

延迟{键} =列出{ } }火；

递延{键+ 与} = { }用列表的关键；

}

添加回调函数设置状态

deferred.done（函数（）{（）

状态；

}，faillist.disable，progresslist锁）。

失败（函数（）{（））

状态拒绝；

}，donelist.disable，progresslist锁）；

如果输入传入的函数参数参数被执行。

如果（函数）{

func.call（延期，延期）；

}

延迟返回异步队列

收益递延；

}，

}
JQuery.when（延迟）

提供基于一个或多个对象的状态执行回调函数的功能，通常基于异步事件的异步队列。
使用的jquery.when（延迟）

如果有多个异步队列对象传递的方法，jquery.when（）返回一个新的主要的异步队列对象的副本，和只读副本将跟踪异步队列，是进口的最终状态。

一旦所有异步队列成功，就调用主异步队列的成功回调函数；

如果异步队列中的一个成为故障状态，则调用主异步队列的失败回调函数。

复制代码代码如下所示：

*

要求/时。domethod = when1'to返回{ '当'：1 }

要求/时。domethod = when2'to返回{ '当'：2 }

要求/时。domethod = when3'to返回{ '当'：3 }

* /

无功whendone =函数（）{ console.log（'done，参数）；}，

whenfail =函数（）{ console.log（'fail，参数）；}；

美元（当）

美元。Ajax（ /时。domethod =时，{数据类型：json}），

美元。Ajax（ /时。domethod = 2'，{数据类型：json}），

美元。Ajax（ /时。domethod = when3，{数据类型：json}）

）。做（whendone）失败（whenfail）；
图片描述

异步队列延迟

解耦异步任务和回调函数

为ajax模块、队列模块和就绪事件提供基本功能。

原型属性和方法

原型属性和方法源代码：

复制代码代码如下所示：

97 jquery.fn = jquery.prototype = { {

98构造函数：jQuery，

99初始化：功能（选择、语境、rootjquery）{ }

210选择器：

213 jQuery：1.7.1

216长度：0，

219大小：（函数）{ }，

223 toArray（功能）{ }，

229取：函数（数字）{ }，

241 pushstack：功能（单元，姓名，选择器）{ }，

270：函数（回调，args）{ }，

274准备好：函数（FN）{，}

284 EQ：函数（i）{ }，

291第一：（函数）{ }，

295最后一个：（函数）{ }，

299个片：（函数）{ }，

304 map：函数（回调）{ }，

310端：（函数）{ }，

316推：推，

317排序：{排序，

318拼接：{拼接

319 }；
属性选择器用于记录jQuery查找和过滤DOM元素的选择器表达式。

属性长度表示当前jQuery对象中的元素数量。

方法（大小）返回当前jQuery对象中的元素数量，在功能上等同于属性长度，但长度应该首选，因为他没有函数调用成本。

大小（）源代码如下所示：

复制代码代码如下所示：

大小（）：函数（）{

返回this.length；

}
Method.ToArray（）将当前jQuery对象变成一个真正的数组，和转换后的数组包含所有的元素，和源代码如下：

复制代码代码如下所示：

ToArray：函数（）{

返回slice.call（本）；

}，
方法（index）返回当前jQuery对象中指定位置的元素，或所有元素的数组。

代码如下：

复制代码代码如下所示：

获取：函数（数字）{

返回空值

a'clean'array / /返回

This.toArray（）（）：

只是对象返回

(Num < 0 this{this.length + num}: this{num});

}，
如果没有传入的参数，然后calling.toarray（）返回包含锁元件阵列。如果指定了参数索引，则返回一个单独的元素，索引从0开始计数，并支持负数。

第一种方法将确定数字是否小于0，如果小于0，则使用长度+数值计算索引，然后使用数组访问操作符（{ }）获取指定位置上的元素，由小技巧下标支持为负；如果大于或等于0，则将元素返回到指定位置。

Eg（）并获得（）使用详细的解决方案：jQuery常用方法和示例

方法。每（）是用来遍历当前jQuery对象和执行每一element.method.each回调函数（）是通过简单地调用静态方法jquery.each实施（）在（）：

复制代码代码如下所示：

一：函数（回调，args）{

返回jquery.each（这个回调，args）；

}，
回调函数是在当前元素的上下文中触发的，也就是说，这个关键字总是指向当前元素，而返回false可以终止回调函数中的遍历。

方法（map）遍历当前jQuery对象，在每个元素上执行回调函数，并将回调函数的返回值放在一个新的jQuery对象中。

复制代码代码如下所示：

映射：函数（回调）{

返回this.pushstack（jquery.map（这个功能（元素、我）{

返回callback.call（元素、我、元）；

}）；

}，
原型method.pushstack（）创建一个新的空的jQuery对象，然后将DOM元素集合到jQuery对象，并保持参考当前jQuery对象。

原型method.pushstack（）是一个核心的方法，为下面的方法提供支持：

jQuery对象是遍历的。

DOM查找、过滤：找到（），（），（），，。过滤器。最接近的（），（），加AndSelf（）。

DOM遍历：。母（），父母（），ParentsUntil（），（）。接下来，Prev（）、NextAll（）、PrevAll（）、NextUnit（）、PrevUnit（）、（）、兄弟姐妹，兄弟姐妹，（），（）和（

jquery.before DOM插入：（），（），（）jquery.after jquery.replacewith append（），，，，Prepent（），前（），后（），用（）。

The definition method.Push (elems, name, selector), which accepts 3 parameters:

参数单元：元素的数组（或类数组对象），将投入新的jQuery对象。

参数名称：所产生的元件阵列单元的jQuery方法的名称。

参数选择：参数传递给jQuery的方法，它是用来修改原型property.selector。

方法（结束）结束当前链中最近的筛选操作，并将匹配的元素恢复到以前的状态。

复制代码代码如下所示：

结束：函数（）{

返回this.prevobject this.constructor（空）| |；

}，
回到以前的jQuery对象，如果物业prevobect不存在，建立一个空的jQuery对象return.method.pushstack（）用于堆栈，和方法。端（）用于堆栈

静态特性和方法

相关的源代码如下所示：

复制代码代码如下所示：

388 jquery.extend（{

389任何：功能（深）{ }，

402准备：假，

406 readywait：1，

409 holdready：功能（保持）{ }，

418准备好：函数（等待）{ }，

444 bindready：（功能）{ }，

492功能：功能（obj）{ }，

496：Array.isArray | ISArray |功能（obj）{ }，

501 iswindow：功能（obj）{ }，

505 ISNUMERIC：功能（obj）{ }，

509类型：功能（obj）{ }，

515 isplainobject：功能（obj）{ }，

544 isemptyobject：功能（obj）{ }，

551错误：函数（MSG）{ }，

555 parseJSON：功能（数据）{ }，

581 parsexml：功能（数据）{ }，

601空：（功能）{ }，

606 globaleval：功能（数据）{ }，

619骆驼案例：函数（字符串）{ }，

623形式：函数（元素、名称）{ }，

628：功能（对象，回调，args）{ }，

669修剪：修剪功能（文本）：函数（文本）{ }，

684 makearray：函数（数组结果）{ }，

702内部数组：功能（元素，数组，我）{ }，

724合并：函数（第一，第二）{ }，

744一个函数（elems，回调，INV）{ }，

761地图：功能（单元、回调，arg）{ }，

794 GUID：1，

798代理：函数（FN，上下文）{ }，

825访问：功能（单元、关键、价值、执行、FN、通）{ }，

852现在：（函数）{ }，

858 uamatch：功能（UA）{ }，

870个子：（函数）{ }，

891浏览器：{ }

892 }）；
继续，今天在这里第一，下一步。不要匆忙和哈萨克斯坦。