jQuery构造函数

前言

本篇文章较长，其中包含了对jQuery源码的分析，如果不感兴趣的同学可以直接查看参数类型部分，感兴趣的同学可以继续阅读下面源码解析，如果内容有误，还望指出。

背景

最近的工作需要处理IE8的兼容性问题，但是对于大量的工作任务，使用原生js实现功能，并且兼容IE8是很费时费力的事情，因此为了提高工作效率，JQuery框架便成为了不二选择，于是我便开始学习能提高开发效率的jQuery框架，该专题主要记录学习过程中的问题和总结所需要掌握的知识点，以及对于jQuery源码的分析与理解。文章参考了《jQuery技术内幕》以及网络上其他大牛的博客，旨在分享与记录，如有错误还望指出。

初识jQuery(构造函数)

在使用jQuery的过程中，我们首先就要构造jQuery对象，否则无法调用jQuery的方法，但在构造jQuery对象的过程中，我们发现同一个$()方法却可以传入多种不同的参数，于是以下便对参数进行总结以及分析：

参数类型：

1.$(element)
传入参数是一个DOM对象的情况下，则将DOM对象封装成一个jQuery对象并返回。
2.$(selector[,context])
selector为jQuery的css选择器，context是个可选参数，其表示查询的上下文及查询范围，如果不指定则表示全局查询。
3.$(html[,props])
html为html代码，jQuery会解析html并且使用其创建DOM节点，其中html可分为单独标签以及复杂代码片段，如<p/>或者<p></p>就是单独标签，<p>123</p>则是复杂片段，两种格式的DOM节点创建方式不同。前者是使用document.createElement()方式创建，后者使用innerHTML的方式创建。props则是设置创建的DOM节点的属性。
4.$(object)
object为普通javascript对象，则返回一个封装到jQuery中的对象，返回对象可以使用jQuery的方法。
5.$(callback)
callback为函数，当传入参数为函数时，会将传入函数绑定到ready时间上，其提前于onload事件，在DOM文本解析完成时便触发，貌似绑定与DOMContentLoaded事件上(猜测，暂时不知道，待后续研究)。
6.$(jQuery object)
如果传入一个jQuery对象，则创建该jQuery对象的一个副本并返回，副本与传入的jQuery对象引用完全相同的DOM元素。
7.$()
传入空对象，则返回一个空的jQuery对象。

源码分析:

通过上述参数分类，我们知道了jQuery的构造函数的强大，接下来我们就通过源码来分析上述不同参数类型在jQuery内部的处理方式，以便与我们进一步加深对于jQuery的理解。
首先我们从jQuery源码知道jQuery的所有代码都封装在一个自执行函数中，函数代码如下：

(function(window,undefined){
  ...
})(window);

上述代码只传入window对象，而内部存在一个undefined参数是为了确保undefined未被重赋值，保证jQuery内部代码的undefined的正确性。(undefined的重赋值问题见此文)

然后jQuery内部使用一种特别的方式避免了外部使用new方法构造jQuery对象，代码如下：

jQuery = function( selector, context ) {
    //jQuery.fn实则是jQuery.prototype，init则是jQuery原型上的方法，用于构造jQuery对象
    return new jQuery.fn.init( selector, context, rootjQuery );
}

那么以上方法就存在一个问题使用init方法构造jQuery对象会导致jQuery的原型方法实例无法使用，因为实例的原型是init方法的原型而init方法上并没有任何方法。于是jQuery采取了一种极其机智的方法处理上述问题，代码如下：

jQuery.fn.init.prototype = jQuery.fn;

以上代码将jQuery的prototype赋值给init的prototype(注意此时jQuery.fn=jQuery.prototype)，于是init方法的实例自然可以使用jQuery对象上的原型方法了。

--等等，说了这么多压根没提jQuery.fn.init方法的内部机制呀💢，别急，理解了上面的知识更有利于理解init内部机制，接下来就让我们看看jQuery.fn.init的源码吧。

代码：(解释均在代码注释上)

function( selector, context, rootjQuery ) {
    //selector可以是DOM对象，undefined，字符串，函数，JQuery对象，普通javaScript对象-有效，其他参数无效
    //context可传入，可不传入，DOM对象，JQuery对象，普通javaScript对象
    //rootJQuery是包含了document对象的JQuery对象，用于document.getElementById()查找失败，selector选择器未指定context或者selector是函数的情况
    
    var match, elem, ret, doc;
    
    //处理$(''),$(null),$(undefined),$(false)
    if ( !selector ) {
        return this;
    }

    //处理传入参数是DOMElement的情况。
    if ( selector.nodeType ) {//$(this)等DOM对象在此转换成JQuery对象
        this.context = this[0] = selector;
        this.length = 1;
        return this;
    }

    // 处理传入是HTML代码的情况
    if ( typeof selector === "string" ) {
        if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
            //由于IE6～IE8与标准浏览器对charAt方法的支持是一样的。
            //而使用String[]的方法取值在IE6～IE8下会返回undefined(注意必须是String对象而非字面量)
            //处理HTML代码开始是<，结束是>的情况
            match = [ null, selector, null ];
        } else {
            //rquickExpr=/^(?:[^#<]*(<[\w\W]+>)[^>]*$|#([\w\-]*)$)/
            match = rquickExpr.exec( selector );
        }

        // Match html or make sure no context is specified for #id
        if ( match && (match[1] || !context) ) {
            //如果match存在，且match[1],或者match[2]且context上下文范围为undefined的情况下执行下列代码
            // 处理: $(html) -> $(array)
            if ( match[1] ) {
                //如果match[1]表示是创建dom节点的话，先修正context对象
                context = context instanceof jQuery ? context[0] : context;
                doc = ( context && context.nodeType ? context.ownerDocument || context : document );

                // scripts is true for back-compat
                //parseHTML对单一标签内容通过createElement方法创建对象，并返回一个包含该对象的数组。
                //jQuery将对HTML代码的复杂对象与非复杂对象处理都放在了parseHTML函数中，感兴趣的同学可下去继续研究，我也会在以后对该函数进行分析。
                selector = jQuery.parseHTML( match[1], doc, true );
                
                if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
                //在context是props属性时，将属性赋值到新生成的DOM元素上
                    this.attr.call( selector, context, true );
                }

                return jQuery.merge( this, selector );

            // 处理: $(#id)
            } else {
                //查找id对应元素                  
                elem = document.getElementById( match[2] );

                //检测parentNode属性，因为黑莓4.6会返回已经在文档中不存在的节点
                if ( elem && elem.parentNode ) {
                    
                    //在IE7和IE6中有可能按照name查找了id的元素
                    if ( elem.id !== match[2] ) {
                        return rootjQuery.find( selector );
                    }

                    // Otherwise, we inject the element directly into the jQuery object
                    this.length = 1;
                    this[0] = elem;
                }

                this.context = document;
                this.selector = selector;
                return this;
            }

        // 处理: $(selector, $(...))
        } else if ( !context || context.jquery ) {
            return ( context || rootjQuery ).find( selector );

        // 处理: $(selector, context)
        // 相当于$(context).find(expr)
        } else {
            return this.constructor( context ).find( selector );
        }

    // 处理: $(function)
    } else if ( jQuery.isFunction( selector ) ) {
        return rootjQuery.ready( selector );//如果是一个函数则执行ready
    }

    if ( selector.selector !== undefined ) {
        //如果传入对象是JQuery对象
        this.selector = selector.selector;
        this.context = selector.context;
    }
    //在传入参数是非上述类型数据，而是如同Array,Number,JS原生对象的情况下，将直接置入当前jQuery实例中返回，以使上述数据可使用jQuery方法
    return jQuery.makeArray( selector, this );
}  

上述代码段便是jQuery的init方法内部机制，其中我都加上了解释与自己的理解，希望读者能够阅读并且在浏览器环境下通过开发者工具执行jQuery代码并加入断点，观测代码执行情况以进一步测试代码运行。

总结：

jQuery是一个非常棒的函数库，它帮助开发者减轻开发负担，解决兼容问题，提高开发效率，但是作为一个想要在JS方面有所成就的开发者，仅会使用是不够的，我们还要花费时间去学习该框架的内部机制，理解其代码风格，当质疑自己代码写得不好的时候，那就是因为你看的代码不够多，因此学习jQuery源码，可以让我们真正了解到自己与大师之间的差距。以后我也会进一步对jQuery代码进行研究，其中很多个大的模块如AJAX，选择器，DOM操作，事件代理等均是jQuery的经典之处，希望有兴趣的同学也可以自己研究深入。
行文仓促，如有错误，还望指出。🙏