jQuery源码之init函数的分析

时间：2022-12-03 14:46:45

jQuery源码之init函数的分析

精妙处之一

init在源码中最先出现的位置是jQuery定义的地方，如下所示

var 
    ...

    jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
    },

调用jQuery之后应该返回的是一个init函数的一个实例，但是许多方法是存在于jQuery的，为了使得返回的这个对象实例可以调用jQuery的原型方法，就对init的原型进行了修改，如下

// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;

jQuery.fn就是jQuery的原型对象

jQuery.fn = jQuery.prototype = {
    jquery: version,
    constructor: jQuery,  
    selector: "",
    length: 0,
    toArray: function() {},
    get: function( num ) {},
    pushStack: function( elems ) {},
    each: function( callback, args ) {},
    map: function( callback ) {},
    slice: function() {},
    first: function() {},
    last: function() {},
    eq: function( i ) {},
    end: function() {},
    push: push,
    sort: arr.sort,
    splice: arr.splice
};

测试的例子

这里给出这样的例子，运行之后会出现Uncaught TypeError: instance.show is not a function的错误

        var myQuery = function() {
return new myQuery.fn.init();
        };

var myInit = function() {
this.fun = 'myInit';
        };

        myQuery.fn = myQuery.prototype = {
            constructor: myQuery,
            show :  function() {
                console.log('this is show function');
            },
            addAttr: function(obj) {
this.attr = obj;
            },
            init: myInit
        };

//myInit.prototype = myQuery.fn;
var instance = new myQuery();
        instance.show(); //Uncaught TypeError: instance.show is not a function

当myInit.prototype = myQuery.fn;去掉注释之后，得到的结果就是正确的，结果为this is show function

精妙处二

从源码中我们看到下面的代码

jQuery.fn = jQuery.prototype = {
    jquery: version,
    constructor: jQuery, 
    ...
}

可以看到直接给jQuery的原型对象赋值为一个对象，如果是没有对constructor进行重新声明的话，那么此时的constructor就不是jQuery而是Object了

init源码分析

// A central reference to the root jQuery(document)
var rootjQuery,

// A simple way to check for HTML strings
// Prioritize #id over <tag> to avoid XSS via location.hash (#9521)
// Strict HTML recognition (#11290: must start with <)
    rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,    
    init = jQuery.fn.init = function( selector, context ) {
var match, elem;

// HANDLE: $(""), $(null), $(undefined), $(false)

/*1.当selector是""、null、undefined、false时，返回的是this对象，可是这里的this对象是什么呢？这里要联想调用init的场景，new jQuery.fn.init( selector, context )，所以这个this指代的是一个实例对象，那么是谁的实例呢？你可是否还记得init的原型可是改为了jQuery.fn也就是jQuery.prototype，所以这个实例对象就是jQuery的实例，拥有着jQuery中的原型属性和方法*/

if ( !selector ) {
return this;
        }

// Handle HTML strings 传入的是字符串的时候
if ( typeof selector === "string" ) {
if ( selector[0] === "<" && selector[ selector.length - 1 ] === ">" && selector.length >= 3 ) {
/*2.这个if条件判断的就是类似这样的： $('<li>') $('<li>1</li><li>2</li>')
 得到的match如下：
 match = [null, '<li>', null]
 match = [null, '<li>1</li><li>2</li>', null];
 */              
// Assume that strings that start and end with <> are HTML and skip the regex check
                match = [ null, selector, null ];

            } else {
/*3.类似这样的：$('#div') $('<li>hello')，得到的match如下
 match = ['#div1', null, 'div1']
 match = ['<li>hello', 'li', null]
 $('<li>hello').appendTo('ul')相当于加了个空标签'<li></li>'
 */
                match = rquickExpr.exec( selector );
            }

// Match html or make sure no context is specified for #id
//这里符合if条件如：$('<li>') $('<li>1</li><li>2</li>') $('#div') $('<li>hello')这样的，对于id的话，match[1]为null，context不存在，所以也是符合条件的
if ( match && (match[1] || !context) ) {

// HANDLE: $(html) -> $(array)
//创建标签的情况
if ( match[1] ) {
/*4. $('<li>', document)第二个参数只能是document，如果是iframe，那么就是contentWindow.document。默认情况下就是document，下面的代码表示，如果context是document就直接返回document，如果context是$(document)那么就获取到原生的document*/
                    context = context instanceof jQuery ? context[0] : context;

// Option to run scripts is true for back-compat
// Intentionally let the error be thrown if parseHTML is not present
/*5. $('<li>1</li><li>2</li>')如何将字符串转换为this={0: 'li', 1:'li', length: 2}，因为后面的是DOM节点数组，所以需要通过parseHTML来完成，parseHTML的默认的第三个参数是false，但是parseHTML也可以创建script标签（写script标签的时候需要转义，防止它和上面的script标签配对）true可以表示添加script标签，merge方法就是将DOM数组转换为JSON格式*/
                    jQuery.merge( this, jQuery.parseHTML(
                        match[1],
                        context && context.nodeType ? context.ownerDocument || context : document,
true
                    ) );

// HANDLE: $(html, props)
/*$('<li>', {title: '1', html:1})
 var rsingleTag = (/^<(\w+)\s*\/?>(?:<\/\1>|)$/); 这个正则是匹配单标签，如<li>或者<li></li>,isPlainObject用于判断是否为对象字面量*/
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
// Properties of context are called as methods if possible
//如果match是个函数就调用jQuery中存在的函数，如html方法，this.html(1)
if ( jQuery.isFunction( this[ match ] ) ) {
this[ match ]( context[ match ] );

// ...and otherwise set as attributes 设置属性
                            } else {
this.attr( match, context[ match ] );
                            }
                        }
                    }

return this;

// HANDLE: $(#id) 处理id的情况
                } else {
                    elem = document.getElementById( match[2] );

// Support: Blackberry 4.6
// gEBID returns nodes no longer in the document (#6963)
//元素如果不存在，那么它的父元素也是不存在的
if ( elem && elem.parentNode ) {
// Inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
                    }

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

// HANDLE: $(expr, $(...))
//如果没有传入上下文或者传入的上下文是jQuery对象，那么调用上下文的find方法继续缩小朝着对象
//如$('li', $('ul'))
            } else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( selector );

// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
//如果上下文不是jQuery对象，那么直接把上下文封装为jQuery对象继续调用find方法，this.constructor就是jQuery
            } else {
return this.constructor( context ).find( selector );
            }

// HANDLE: $(DOMElement)
//如这些情况: $(this) $(document)，之境界将它封装为jQuery对象，这里的selector不是string的情况
        } else if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;

// HANDLE: $(function)
// Shortcut for document ready
//文档加载的方式：$(document).ready(function() {}) $(function() {}), rootjQuery就是document
        } else if ( jQuery.isFunction( selector ) ) {  
return typeof rootjQuery.ready !== "undefined" ?
                rootjQuery.ready( selector ) :
// Execute immediately if ready is not present
//直接将jQuery对象传入这个参数进行调用
                selector( jQuery );
        }
//如果调用的方式是：$($('#div'))那么要包装为$('#div')，jQuery对象是有selector属性的，而DOM对象是有nodeType属性的
if ( selector.selector !== undefined ) {
this.selector = selector.selector;
this.context = selector.context;
        }
//makeArray在内部调用的时候如果第二个参数传入的是JSON对象，那么最后返回的结果就是JSON
return jQuery.makeArray( selector, this );
    };

源码还是很有魅力的，确实可以收获到一些东西

标签：

相关文章