jQuery 类库的设计_H5之家 - 中国HTML5教程资源分享第一站

　　目前为止，jquery是js社区中最活跃、用户最多的前端类库，具有链式操作、兼容性、基于数组的操作、强大的插件机制等特点，也是很多前端入门同学最早接触到的库。但是内部如何实现的，一直吸引着我。因此最近三个月读完了jquery1.7版本的设计，之所以选择该版本是因为Sizzle在1.8之后引入了编译函数，代码变动比较大。

　　1.总体设计

　　本文对jquery1.7版本进行了阅读学习，将整个jquery源码拆分为11个模块，这些模块相互依赖，构成了一个简单、强大的js类库。jquery是一个基于DOM操作的类库，因此Sizzle选择器引擎的实现就显得尤为重要。针对Sizzle选择器引擎的实现，之前已经做过先关的分析，参见：sizzle选择器引擎介绍。下面对其中的数据存储、事件处理、异常请求ajax、动画等进行简单的介绍。

1.jpg (58.98 KB, 下载次数: 0)

下载附件

4 天前上传

(function(window, undefined) {

var jQuery = function(selector, context) {

return new jQuery.fn.init(selector, context, rootJquery);

}

jQuery.fn = function() {

// 原型对象

...

}

// 工具方法

// 异步队列

// 队列queue

// 浏览器测试support

// 属性操作

// 事件系统

// DOM遍历与操作、样式操作

// ajax请求

// 动画

})(window)

复制代码

　　2. 数据存储

1.jpg (39.06 KB, 下载次数: 0)

下载附件

4 天前上传

　　在实际的项目开发中，经常需要把某些信息附加到一个DOM节点中，那么如果管理DOM节点和附加数据的关系，就显得非常重要。很明显，目前有两种思路来解决这个问题：1）直接附加在DOM节点上；2）通过一个id来关联DOM节点、附加数据。这两种方法各有利弊：方法1的好处是DOM节点、附加数据在一起，便于维护；方法2的好处是可以避免相互依赖，从而避免内存泄露问题。

var arr = [];

function createNode() {

return document.createElement('div');

}

function saveNodes() {

for(var i=0; i<100; i++) {

arr.push(createNode());

}

// 将上述100个nodes节点渲染到页面，之后在将其从页面中剔除掉，那么因为arr引用着100个nodes节点，这些节点就无法被垃圾回收机制回收，从而引起内存泄露问题。

复制代码

　　3. 异步Deferred

　　jQuery中关于异步的实现，大致上遵循Promise/A规范，为什么说是大致呢?

then的返回：then方法并没有返回新的异步对象，这不符合Promise/A规范中的then要求。这一点在jQuery2.0以后已经被修改

结果处理：在进行结果处理的时候，jQuery并没有进行结果的异常捕获

参数的个数：jquery中resolve可以有多个参数，而Promise/A的resolve仅能有一个

　　内部实现比较曲折抽象，代码晦涩难懂，主要是通过”once”、”memory”两个参数进行控制：”once”决定异步的回调函数只能被执行一次;“memory”决定函数具有记忆动能，也就是异步事件完成以后，再绑定回调函数，回调函数会立即执行。

　　4. 事件处理

1.jpg (34.86 KB, 下载次数: 0)

下载附件

4 天前上传

　　jquery内部事件的功能很强大，除了可以处理DOM事件外，还可以自定义事件、触发事件(DOM事件、自定义事件)、定义事件的命名空间等强大功能。并且jquery内部的另外一大亮点就是通过数据存储模块(.data)，尽量降低DOM和监听事件之间的依赖，避免DOM、js对象相互依赖造成的内存泄露。在数据缓存模块的数据结构如下：

$('.a').on('click', function(） {})；

// results is as fellow:

$.cache = {

1: {

events: {

click: [ //click.delegateCount: 记录代理事件的个数，代理回调函数放在数组的前面

{

data: ...,

guid: ...,

selector: ...,

handler: function() {}, // handler.guid = 1 用于定位和移除监听函数

....

}

]

handle: function() {......} // 主监听函数

}

复制代码

　　4.1 事件绑定：

　　当绑定事件时，内部方法的调用链为：bind/delegate/live/one()—>.on()—>$.event.add()—>$.data()/addEventListener/attachEvent()。其实在对于一个DOM元素，所有的事件都对应一个主监听函数($._data(elem).handle),然后通过主监听函数通过事件分发函数($.event.dispatch)来触发相应类型的监听函数。