jquery源码学习-1-整体架构

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jquery1.0.1</title>
    </head>
    <body>
        <script src="./jquery.1.0.1.js"></script>
        <script>
            // console.log($())
            /*
                init
                    __proto__: Object
                        css: ()
                        init: ()
                        __proto__: Object
            */            
            var ret = {name:'max',list:{age:'30'}}
            var res = {list:{sex:'女'}}
            var obj = $.extend({},ret, res) //给任意对象扩展，浅拷贝
            var obj1 = $.extend(true, {}, ret, res) //给任意对象扩展，深拷贝
            // $.extend({ //给jquery扩展
            //     work:function(){}
            // })
            // // jQuery.work();
            // $.fn.extend({  //给实例对象扩展
            //     sex: '男'
            // })
            // $().sex 
        </script>
    </body>
</html>

(function(root){
    var jQuery = function(){
        return new jQuery.prototype.init()
    }
    jQuery.fn = jQuery.prototype = {
        init:function(){},
        css:function(){}
    }
    //extend 内部|外部
    //浅拷贝，深拷贝(第一个参数为true)
    jQuery.fn.extend = jQuery.extend = function(){ //根据参数内容和个数来实现
        var target = arguments[0] || {}
        var length = arguments.length;
        var i = 1;
        var deep = false;
        var option,name,copy,src,copyIsArray,clone;
        if( typeof target === 'boolean'){ //判断是否有深浅拷贝的标识，如果是boolean类型
            deep = target ; //deel复制标识
            target = arguments[1];  //将要拷贝的对象赋值为第二个参数
            i = 2;  //要遍历的参数从第二个开始
        }
        if( typeof target !== 'object'){ //第一个参数不是对象，就给他赋值为空对象
            target = {}
        }
        if(length === i){ //判断参数个数 ,如果参数个数为1，则是为 jquey/jquery实例对象 扩展对象，           
            target = this; //this只想对象的引用
            i--
        }
        //浅拷贝
        for(; i<length; i++){ //如果参数个数不为1，直接从第二个参数开始，若为0，则从第一个开始，产生无用消耗
            if( (option = arguments[i]) != null){
                for(name in option){
                    copy = option[name]
                    src = target[name];
                    if(deep && (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
    }

    // jQuery.prototype.init.prototype = jQuery.prototype;//共享原型对象
    jQuery.fn.init.prototype = jQuery.fn;//共享原型对象 ,, fn是prototype的简写吧。。。 

    jQuery.extend({
        isPlainObject:function(obj){
            return toString.call(obj) === '[object Object]'
        },
        isArray:function(obj){
            return toString.call(obj) === '[object Aarray]'
        }
    })
    root.$ = root.jQuery = jQuery
})(this)

jquery源码学习-1-整体架构

猜你喜欢