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

Posted slightfly

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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-整体架构的主要内容,如果未能解决你的问题,请参考以下文章

学习 redux 源码整体架构,深入理解 redux 及其中间件原理

jQuery 源码学习 - 01 - 简洁的 $('...')

spring源码学习——spring整体架构和设计理念

Flume架构与源码分析-整体架构

学习jquery源码架构(-)

js 基础 源码学习 源码设计 (持续更新)