51Testing软件测试论坛

标题: jQuery 核心架构设计 [打印本页]

作者: 老白的释然 时间: 2018-6-20 17:00
标题: jQuery 核心架构设计
jQuery对于大家而言并不陌生，因此关于它是什么以及它的作用，在这里我就不多言了，而本篇文章的
目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计，以及jQuery 是如何利用javascript中的
高级特性来构建如此伟大的javascript库。

1 初识jQuery

从核心功能来看，jQuery仅仅做了一件简单而又平凡的事：查询。它的语法如此简洁明了，以致于很多
人在不知道javascript是什么的时候就已经会用jQuery了，用一个词形容就是：大道至简。从设计层面
来看，我们可以将jQuery提供方法分为两大类：静态方法和实例方法。静态方法就是直接通过$访问的
方法，这些方法一般不对dom元素操作，而是提供了一些常用的工具，比如ajax请求、以及对字符串的
一些常用操作，除此之外，jQuery还提供了对自身的扩展机制，你可以通过extend方法来编写你需要
的组件。而实例方法和静态方法不一样，它是用来对jQuery查询的DOM元素进行操作，jQuery执行$()
会构建一个jQuery对象，这个对象以数组的方法存储查询出的所有DOM元素，然后在这个对象的原型
链上实现了对这些DOM操作的方法，比如each()方法就是用来遍历每一个DOM元素的。你可能会注意
到，我刚说这个对象“以数组的方式”存储，那就是说，jQuery构建的这个对象不是数组，那这个对象
到底是什么？其实这个对象就是jQuery的核心，也被称作“jQuery对象”。因此，本文的重点就是对jQ
uery对象进行分析和讨论。

2 jQuery对象

一般情况下，我们会这样使用jQuery：

1$('p').each(function(index){ //this ...});

$('p')执行完后回返回一个jQuery对象，each()方法是对这个对象中的DOM元素进行遍历，我们先看看
$('p')的执行过程：

jQuery = function( selector, context ) {

return new jQuery.fn.init( selector, www.267774.com context );

}

这个方法就是$('p')的入口方法，$是jQuery的简写，就相当于jQuery('p') ，可以看出，这个方法只做了
一件事，那就是返回jQuery.fn.init()函数的实例对象，那jQuery.fn.init 又是什么呢，我们再看下面的代码：

1init = jQuery.fn.init = = jQuery.fn;

jQuery.fn.init和init引用了同一个方法，这个方法根据selector查询出符合条件的DOM元素，并返回，可
你会发现，返回的是this，这个this是什么呢？我们待会分析，先看下面的这句话：

1init.prototype = jQuery.fn;

这句话是什么意思呢，这句话是让init方法的prototype对象指向了jQuery.fn对象，那jQuery.fn又是什
么鬼？我们继续看代码：

jQuery.fn = jQuery.prototype = { // The current version of jQuery being used jquery: version,
constructor: jQuery, // The default length of a jQuery object is 0
length: 0, // Execute a callback for every element in the matched set.
each: function( www.46club.com callback ) { return jQuery.each( this, callback );
},
splice: arr.splice
};

复制代码

为了节省篇幅，我省略了其中一些代码，从这里可以看出，jQuery.fn 其实就是jQuery的原型对象，这个
原型对象中定义了一些对this对象进行操作的方法。到这里，你是不是感觉到有点绕，不要着急，我们来
梳理一下思路：jQuery首先定义了一个init方法，然后在init的原型对象prototype上定义了一系列操作方
法。最后将init方法的实例对象返回。所以上面的过程可以简化如下(伪代码表示)：

var init = function(selector,context,root){ //... return this;

}

init.prototype = {

length:0,

each:function(callback){ //... },

splice:[].splice

}

jQuery = function(selector,context,root){ return new init(selector,context,root);

}

那么问题来了，jQuery.fn中的方法为什么不直接定义在init的prototype上，而要定义在jQuery的原型对
象上？

其实，这样做的目的是为了提高jQuery的查询效率，如果直接定义在init的prototype对象上，那么每执行
一次查询，就会在内存中创建这样一个庞大的prototype对象，而如果把这个对象定义在jQuery的protot
ype上，在jQuery加载时，这个对象就会被初始化并一直存在于内存中，以后每次执行$()时，只需要将i
nit中的prototype指向这个对象就可以了，而不用每次都去创建一遍相同的对象。

我们再来看看init 函数中返回的 this 到底是什么，我在之前的博客中讲过，函数中的this总是指向运行期
的调用者，那init的调用者是谁呢？在上面代码中似乎找不到调用者，这时我们就需要深入的理解new运
算符的运行机制了，借用我之前在博客中对new运算符的描述，我们对new init()的执行过程进行如下分
解：

new init(selector,context,root) = { var obj = {};

obj.__proto__ = init.prototype;

init.call(obj,selector,context,root); return typeof result === 'obj'? result : obj

}

从上述分解过程可以看出，javascript在通过 new 来创建一个实例对象的时候，会先创建了一个普通对
象obj，然后将obj的内部属性__proto__指向了init的原型对象，因此obj的原型链将被改变，而第3步使
用call方法调用init()，所以init中的this指的就是这里的obj对象。

init()执行以后，会将匹配到的所有DOM对象以数组的方式存储到this对象中并返回，也就是返回了obj对
象，而new运算符最终也会将这个 obj 对象返回以作为新的实例对象。所以new运算符返回的这个实例
对象具备两个特点：一是包含了DOM查询结果集，二是其原型链继承了init的prototype，而 init 的 proto
type 又指向了jQuery.fn对象，因此实例对象也具备了这些操作方法。

jQuery每执行一次查询就会创建一个jQuery对象，而在同一个应用程序中，所有jQuery对象都会共享同
一个jQuery原型对象。因此，jQuery对象不仅包含了DOM查询结果集，还继承了jQuery原型对象上的
操作方法。这样，你就可以在查询后直接调用方法来操作这些DOM元素了。这就是jQuery的核心架构设
计，简单、方便、实用！

如果你还不理解上面的讲解，不要着急，我按照jQuery的设计思路写了一个完整的小项目jDate，你可
以对比着理解！jDate项目已上传至GitHub，你可以点击这里查看完整代码：jDate，如有不同见解，欢
迎讨论！

3 jQuery 的缺陷

通过对jQuery的核心架构分析，我们会发现，每执行一次查询，jQuery就要在内存中构建一个复杂的j
Query对象，虽然说每个jQuery对象都共享同一个jQuery原型，但jQuery的查询过程远比你想象的要复
杂，它既要考虑各种不同的匹配标识，同时又要考虑不同浏览器的兼容性。因此，如果你只是对DOM
做一些简单的操作，建议使用原生方法 querySelector 替代 jQuery，不过在使用原生方法时，对于不同
的应用场景你可能要做一些兼容性的工作，你要学会取舍，不要过度依赖jQuery！

作者: qqq911 时间: 2018-6-26 11:12
感谢分享·~

作者: 梦想家 时间: 2019-3-13 14:10

作者: Miss_love 时间: 2020-12-25 17:55
感谢分享

欢迎光临 51Testing软件测试论坛 (http://bbs.51testing.com/)