码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-09-01 12:58:54      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:==   on()   赋值   arguments   roo   this   标识   extend   span   

<!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-整体架构

标签:==   on()   赋值   arguments   roo   this   标识   extend   span   

原文地址:https://www.cnblogs.com/slightFly/p/11441840.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!