jQuery之结构及$方法的工作原理源码分析_编程设计

jQuery的$方法使用起来非常的多样式，接口实在太灵活了，有点违反设计模式的原则职责单一。但是用户却非常喜欢这种方式，因为不用记那么多名称，我只要记住一个$就可以实现许多功能，这个$简直就像个万能的魔术师，想要什么就变出来。其实当我们拆穿了这个魔术的表象，你会看到一个混乱的内部，jQuery内部做了太多的事了，而能够将这个混乱一一理清，并且毫无问题的运行起来，John Resig的能力不禁让人敬佩。

下面先来看看jQuery中的$方法(又叫jQuery)的几种用途或者调用方式：

1.$(document)
2.$(‘<div>’)
3.$(‘div’)
4.$(‘#test’)
5.$(function(){})
6.$("input:radio", document.forms[0]);
7.$(‘input’, $(‘div’))
8.$()
9.$("<div>", {
         "class": "test",
         text: "Click me!",
         click: function(){ $(this).toggleClass("test"); }
      }).appendTo("body");
10$($(‘.test’))

当我们执行一个$方法时，例如：$('div'),在控制台console.log($('div'))看看出来的是什么东西：

0: div
context: document
length: 1
prevObject: jQuery.fn.jQuery.init[1]
selector: "div"
__proto__: Object[0]

add: function ( selector, context ) {
addBack: function ( selector ) {
addClass: function ( value ) {
after: function () {
ajaxComplete: function ( fn ){
ajaxError: function ( fn ){
ajaxSend: function ( fn ){
ajaxStart: function ( fn ){
ajaxStop: function ( fn ){
ajaxSuccess: function ( fn ){
andSelf: function ( selector ) {
animate: function ( prop, speed, easing, callback ) {
append: function () {

我们看到一个对象有0?， length，（这不是数组吗？），preObject, selector这些属性，而且这是个实例对象，其隐藏属性__proto__指向一个原型对象，那个原型对象有一堆方法，那堆方法正是jQuery手册的方法。

现在就让我们进入$的世界，看看它究竟是何方神圣

在jQuery源码中看到jQuery(即$的定义方式)，返回的是一个jQuery.fn.init这个构造函数的实例,这个jQuery方法就相当于是个简单的工厂方法，rootjQuery也是一个jQuery方法返回的实例，只是其参数是document，这里作为jQuery的根对象

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

//...

rootjQuery = jQuery(document);

接下来往源码下面看：

jQuery.fn = jQuery.prototype = {
    jQuery: core_version,
    constructor: jQuery,
    // 构造函数
    init: function (selector, context, rootjQuery) {
        //…
    }
}

将jQuery的prototype对象的引用指向jQuery.fn，当两者其中一个发生改变，另一个也会随之改变。 jQuery.fn相当于是jQuery.prototype的简写。

然后init这个构造函数了，$的万能钥匙就在这个构造函数里:

// 构造函数 
        init: function (selector, context, rootjQuery) { 
            var match, elem; 
            // 处理 $(""), $(null), $(undefined), $(false) 
            // 返回的是jQuery()方法实例 
            if (!selector) { 
                return this; 
            } 
 
            // 处理HTML字符串 
            if (typeof selector === 'string') { 
                if (selector.charAt(0) === '<' && selector.charAt(selector.length - 1) === '>' && selector.length >= 3) { 
                    // 假设字符串以“<”开始且“>”结束 
                    // 说明是HTML，略过正则检查 
                    match = [null, selector, null]; 
                } else { 
                    match = rquickExpr.exec(selector); 
                } 
 
                // 匹配HTML或者确保#id的上下文没被指定 
                if (match && (match[1] || !context)) { 
                    // 处理 $(html) -> $(array) 
                    if (match[1]) { 
                        context = context instanceof jQuery ? context[0] : context; 
 
                        // 向后兼容 
                        jQuery.merge(this, jQuery.parseHTML( 
                            match[1], 
                            context && context.nodeType ? context.ownerDocument || context : document, 
                            true 
                        )); 
 
                        // 处理 $(html, props) 
                        if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) { 
                            for (match in context) { 
                                // 
                                if (jQuery.isFunction(this[match])) { 
                                    this[match](context[match]); 
                                } else { 
                                    this.attr(match, context[match]); 
                                } 
                            } 
                        } 
 
                        return this; 
 
                        // 处理 $(#id) 
                    } else { 
                        elem = document.getElementById(match[2]); 
 
                        // 检查parentNode，因为Blackberry 4.6 
                        // 返回的节点不在document中 
                        if (elem && elem.parentNode) { 
                            // 处理Opera返回的是name而不是id 
                            if (elem.id !== match[2]) { 
                                return rootjQuery.find(selector); 
                            } 
 
                            // 给this实例对象添加类似数组的属性 
                            this.length = 1; 
                            this[0] = elem; 
                        } 
 
                        // 再添加上下文，选择器属性，最后返回this，结束函数 
                        this.context = document; 
                        this.selector = selector; 
                        return this; 
                    } 
 
                    // 处理 $(expr, [$(...)]) 
                } else if (!context || context.jQuery) { 
                    // 返回jQuery.fn.find()获取的匹配元素， 
                    // 该方法会使用jQuery.find方法(即Sizzle)， 
                    // 然后通过jQuery.fn.pushStack和merge方法附加元素集及合并 
                    return (context || rootjQuery).find(selector); 
 
                    // 处理 $(expr, context) 
                    // 即 $(context).find(expr) 
                } else { 
                    return this.constructor(context).find(selector); 
                } 
 
                // 处理$(DOMElement) 
            } else if (selector.nodeType) { 
                this.context = this[0] = selector; 
                this.length = 1; 
                return this; 
 
                // 处理$(function) 
                // jQUery(document) ready的简写 
            } else if (jQuery.isFunction(selector)) { 
                // 调用jQuery.fn.ready方法 
                return rootjQuery.ready(selector); 
            } 
 
            // 处理$($(...)) 
            if (selector.selector !== undefined) { 
                this.selector = selector.selector; 
                this.context = selector.context; 
            } 
 
            // 返回伪数组对象 
            return jQuery.makeArray(selector, this); 
        }

　　看完了init构造函数大概知道了$方法的多样式原来是这样来的，这么多条件判断。现在我们仅仅知道$()方法是怎么判断参数，却对生成的相应的元素集原理很模糊。我们还是以$('div')为例，当被实例化后会执行到这个分支的内容：

return (context || rootjQuery).find(selector);

这里调用了jQuery.fn.find方法，让我们来看看该部分的源码：

find: function (selector) { 
            var i, ret, self, 
                len = this.length; 
 
            if (typeof selector !== 'string') { 
                self = this; 
                return this.pushStack(jQuery(selector).filter(function () { 
                    for (i = 0; i < len; i++) { 
                        if (jQuery.contains(self[i], this)) { 
                            return true; 
                        } 
                    } 
                })); 
            } 
 
            ret = []; 
            for (i = 0; i < len; i++) { 
                jQuery.find(selector, this[i], ret); 
            } 
 
            // Needed because $( selector, context ) becomes $( context ).find( selector ) 
            ret = this.pushStack(len > 1 ? jQuery.unique(ret) : ret); 
            ret.selector = (this.selector ? this.selector + ' ' : '') + selector; 
            return ret; 
}

　　代码比较简单，没怎么注释，这里遍历jQuery元素集然后使用jQuery.find静态方法（同时也就是Sizzle方法），先暂时不讲解Sizzle选择器的工作原理，因为这不是一个篇幅可以讲完的事。Sizzle方法会将匹配到的元素数组返回给ret。此时ret已经有了我们希望操作的元素了，接下来要给实例对象添加数组特性和context, selector属性。jQuery.fn.pushStack方法会新实例化一个jQuery对象，并且合并元素到该新实例化对象中，再给新实例对象添加prevObject(保存着当前实例化对象的引用，非新实例化对象)和context属性

// 使用传入的元素生成一个新的jQuery元素,（ 
        // 将元素数组合并到this对象中） 
        // 并将这个对象的prevObject设置成当 
        // 前这个实例对象(this).最后将这个新生成的jQuery对象返回 
        // 把当前的jQuery对象缓存起来, 
        // 以便以后使用end方法恢复这个jQuery对象 
        pushStack: function (elems) { 
            // 新建一个新的jQuery匹配元素集 
            // this.constructor === jQuery 
            // jQuery()返回的是this 
            // 通过将elems数组merge到this中，使this也具有类似数组的特性， 
            // 这就是使用选择器匹配到的元素被合并到this中的原因 
            var ret = jQuery.merge(this.constructor(), elems); 
 
            // 把旧对象保存在prevObject属性上 
            ret.prevObject = this; 
            ret.context = this.context; 
 
            // 返回新的元素集 
            return ret; 
        }

　　jQuery.merge:

/** 
         * 合并两个数组(或类数组) 
         * 返回合并后的第一个内容 
         */ 
        merge: function (first, second) { 
            var l = second.length, 
                i = first.length, 
                j = 0; 
 
            if (typeof l === 'number') { 
                for (; j < l; j++) { 
                    first[i++] = second[j]; 
                } 
            } else { 
                while (second[j] !== undefined) { 
                    first[i++] = second[j++]; 
                } 
            } 
 
            first.length = i; 
 
            return first; 
        }

至此我们的$方法已经获取了我们希望匹配的元素了，那么是怎么使用jQuery的其他方法的呢？

// 延迟实例化 
    /* 
     这里将init的构造函数原型指向jQuery.fn（即jQuery原型）， 
     当我们给jQuery.fn扩展方法或属性的时候，实际上就是给init.prototype, 
     而jQuery()方法返回的是init构造函数的实例化对象，所以jQuery()就是其实例对象， 
     具有了其方法和属性。 
     */ 
    jQuery.fn.init.prototype = jQuery.fn;

　　此时我们就可以使用jQuery.fn中的方法了，为了简便扩展方法，jQuery用了extend方法：

/* 
     用一个或多个其他对象来扩展一个对象，返回被扩展的对象 
     */ 
    // jQuery.extend(target, [object1], [objectN]) 
    // jQuery.extend([deep], target, object1, [objectN]) 
    // jQuery.fn.extend就是jQuery.fn.init.prototype.extend, 
    // 所以this就是init的实例化对象，即jQuery(..) 
    jQuery.extend = jQuery.fn.extend = function () { 
        var src, copyIsArray, copy, name, options, clone, 
            target = arguments[0] || {}, 
            i = 1, 
            length = arguments.length, 
            deep = false; 
 
        // 处理 深拷贝的情况 
        if (typeof target === 'boolean') { 
            deep = target; 
            target = arguments[1] || {}; 
            // 略过布尔值 
            i = 2; 
        } 
 
        // target非对象或函数则强制转换为空对象 
        if (typeof target !== 'object' && !jQuery.isFunction(target)) { 
            target = {}; 
        } 
 
        // 当只有一个参数或者深度拷贝的两个参数时说明是扩展jQuery或者jQuery.fn 
        if (length === i) { 
            target = this; 
            --i; 
        } 
 
        for (; i < length; i++) { 
            if ((options = arguments[i]) != null) { 
                for (name in options) { 
                    src = target[name]; 
                    copy = options[name]; 
 
                    // 避免循环递归, 不把自己的引用作为自己的一个成员 
                    if (target === copy) { 
                        continue; 
                    } 
 
                    // 递归深度拷贝的对象或数组 
                    if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) { 
                        if (copyIsArray) { 
                            copyIsArray = false; 
                            clone = src && jQuery.isArray(src) ? src : []; 
                        } else { 
                            clone = src && jQuery.isPlainObject(src) ? src : {}; 
                        } 
 
                        // 递归调用 
                        target[name] = jQuery.extend(deep, clone, copy); 
                    } else if (copy !== undefined) { 
                        target[name] = copy; 
                    } 
                } 
            } 
        } 
 
        // 返回被修改的对象 
        return target; 
    }

　　$.extend与$.fn.extend用法

1. $.extend({ 
        min: function(a, b) { return a < b ? a : b; }, 
        max: function(a, b) { return a > b ? a : b; } 
    }); 
$.min(2,3); // => 2  
$.max(4,5); // => 5 
 
2. $.fn.extend({ 
        check: function() { 
            return this.each(function() { this.checked = true; }); 
        }, 
        uncheck: function() { 
            return this.each(function() { this.checked = false; }); 
        } 
    }); 
$("input[type=checkbox]").check();  
$("input[type=radio]").uncheck();

　　终于到结尾了，如果有什么讲错的地方，希望大家提出来。

本文参考链接：https://www.cnblogs.com/webFrontDev/p/3183066.html