浅析 jQuery 内部架构设计

jQuery 对于大家而言并不陌生，因此关于它是什么以及它的作用，在这里我就不多言了，而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的内部架构设计，以及 jQuery 是如何利用JavaScript 中的高级特性来构建如此伟大的 JavaScript 库。

初识 jQuery

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

 jQuery 对象

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

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

$('div')执行完后回返回一个jQuery对象，each()方法是对这个对象中的DOM元素进行遍历，我们先看看$('div')的执行过程（本文源码摘自jQuery 3.0）：

jQuery = function(selector, context) {
    return new jQuery.fn.init(selector, context);
}

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

init = jQuery.fn.init = function(selector, context, root) {
    //... 
   return this;
}
init.prototype = jQuery.fn;

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

init.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(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的prototype上，在jQuery加载时，这个对象就会被初始化并一直存在于内存中，以后每次执行 $() 时，只需要将init中的prototype指向这个对象就可以了，而不用每次都去创建一遍相同的对象。

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

new init(selector, context, root) = {
    var obj = {};
    obj.__proto__ = init.prototype;
    var result = init.call(obj, selector, context, root);
    return typeof result === 'object' ? result : obj;
}

如果对new的运行机制不理解的请参考博文：深入理解 new 操作符

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

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

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

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

jQuery 的缺陷

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

 

 

原创发布 @一像素 2016.01

 

转载于:https://www.cnblogs.com/onepixel/p/5097584.html