菜鸟读jQuery 2.0.3 源码分析系列（1）

原文链接在这里，作为一个菜鸟，我就一边读一边写

jQuery 2.0.3 源码分析系列

前面看着差不多了，看到下面一条（我是真菜鸟），推荐木有入门或者刚刚JS入门摸不着边的看看，大大们手下留情，想一起学习JS的可以给我留言。

// Give the init function the jQuery prototype for later instantiation

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

　　看到这里的时候有点迷茫啊。这个fn是啥玩意，百思不得其姐。最后只能找度娘了

jQuery.fn = jQuery.prototype = {      

　　　init: function( selector, context ) {//….　   

　　　//……   

};   

然后发现，fn就是prototype 文章来源 jquery.fn.extend与jquery.extend

上面的意思其实就是

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

往下走

aQuery.prototype = {

    init: function() {

        return this;

    },

    name: function() {

        return this

    }

}

明显实现链式的基本条件就是实例this的存在，并且是同一个

换句话说，就是被jQuery的方法处理之后，返回的对象还是处理之前的对象（初学者这么理解会好理解一些）。

extend的实现，我就只把英文翻译成中文- -，这个能看懂就能看懂，我明天整理了，再后面写下分析，其实说的已经很详细了。。

jQuery.extend = jQuery.fn.extend = function() {

    var src, copyIsArray, copy, name, options, clone,

        target = arguments[0] || {},    // 常见用法 jQuery.extend( obj1, obj2 )，此时，target为arguments[0]

        i = 1,

        length = arguments.length,

        deep = false;



    // Handle a deep copy situation

   //处理深拷贝情况

    if ( typeof target === "boolean" ) {    // 如果第一个参数为true，即 jQuery.extend( true, obj1, obj2 ); 的情况

        deep = target;  // 此时target是true

        target = arguments[1] || {};    // target改为 obj1

        // skip the boolean and the target

        i = 2;

    }



    // Handle case when target is a string or something (possible in deep copy)

   //处理案例时当目标是字符串或者什么其他的东西（可能是在深拷贝中）

    if ( typeof target !== "object" && !jQuery.isFunction(target) ) {  // 处理奇怪的情况，比如 jQuery.extend( 'hello' , {nick: 'casper})~~

        target = {};

    }



    // extend jQuery itself if only one argument is passed

    //继承jQuery对象自己，如果它只有一个参数传递

    if ( length === i ) {   // 处理这种情况 jQuery.extend(obj)，或 jQuery.fn.extend( obj )

        target = this;  // jQuery.extend时，this指的是jQuery；jQuery.fn.extend时，this指的是jQuery.fn

        --i;

    }



    for ( ; i < length; i++ ) {

        // Only deal with non-null/undefined values

        //只处理值 non-null/undefined 

        if ( (options = arguments[ i ]) != null ) { // 比如 jQuery.extend( obj1, obj2, obj3, ojb4 )，options则为 obj2、obj3...

            // Extend the base object

            //继承基础对象

            for ( name in options ) {

                src = target[ name ];

                copy = options[ name ];



                // Prevent never-ending loop

                //防止无休止的循环

                if ( target === copy ) {    // 防止自引用，不赘述

                    continue;

                }



                // Recurse if we're merging plain objects or arrays

                // 如果是深拷贝，且被拷贝的属性值本身是个对象

                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {

                    if ( copyIsArray ) {    // 被拷贝的属性值是个数组

                        copyIsArray = false;

                        clone = src && jQuery.isArray(src) ? src : [];



                    } else {    被拷贝的属性值是个plainObject，比如{ nick: 'casper' }

                        clone = src && jQuery.isPlainObject(src) ? src : {};

                    }



                    // Never move original objects, clone them

                    //不移动原对象，克隆他们

                    target[ name ] = jQuery.extend( deep, clone, copy );  // 递归~



                // Don't bring in undefined values

                //不传undefined值

                } else if ( copy !== undefined ) {  // 浅拷贝，且属性值不为undefined

                    target[ name ] = copy;

                }

            }

        }

    }



    // Return the modified object

   //返回修改后的对象

    return target;

下一次有空再看一遍以防忘记。

@北川 老师勿喷

欢迎各位留言互相学习。

恩，能看懂多少看多少把，还有一些，在后面的文章里面会看到。到时候有相关的内容，回头再看这个。收益会更大