zoukankan      html  css  js  c++  java
  • jQuery源码学习之五 (jQUery继承方法)

    jQuery 利用extend进行扩展。


    参考jQuery API关于extend 的用法:

    $.extend([deep],target,object1,objectN)

    $.fn.extend(object)


    extend函数结构分析:

    jQuery.extend = jQuery.fn.extend = function() {
        变量的声明
        if(){}       //是否是深拷贝
        if(){}      //参数是否正确
        if(){}      //是否是插件的情况
        for() {     //多个对象情况
            if()    //防止循环引用
            if()    //深拷贝
            else if //浅拷贝
        }
    }
    
    

    extend函数逐行分析:

    if 第一个参数是boolean值,deep将保持传递进来的boolean值,target 变为第二个参数,i变为2

    jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
                target = arguments[0] || {},
    	    i = 1,
    	    length = arguments.length,
    	    deep = false;
    ... }}
    
    

    
    if 赋值完后的target不是对象也不是函数,则 target赋值为一个空{};
    jQuery.extend = jQuery.fn.extend = function() {
    
            var options, name, src, copy, copyIsArray, clone,
                target = arguments[0] || {},
    	    i = 1,
    	    length = arguments.length,
    	    deep = false;
    
           if () {}
           if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
                target = {};
           }
           ...
        }
    }
    if  实参的长度等于i ( 意义等同于 当第一个参数不是boolean时,i=1,即实参的长度为1,只传入一个参数;否则i=2 ,即实参的长度为2,传入2个参数)也就是说,没有传入目标对象时,target赋值为this;i的长度-1;
    jQuery.extend = jQuery.fn.extend = function() {
    
            var options, name, src, copy, copyIsArray, clone,
                target = arguments[0] || {},
    	    i = 1,
    	    length = arguments.length,
    	    deep = false;
    
           ...
           if ( length === i ) {
             target = this;
             --i;
           }
           ...
    }

    开始for循环

    如果除boolean值外,传入了target参数(实参个数大于等于3),则从target参数之后的参数开始循环;

    如果除boolean值外,没有传入了target参数(实参个数小于等于2),则从boolean值之后开始循环(没有boolean参数,则从第一个参数开始循环)。

    for  in 内的第一个if防止了循环引用,循环引用实例:

    var a={n:1};
    var b={0:a};
    a[n]=b[0];        //发生循环引用,会无限制循环
    

    接下来的if ...else...区分 深拷贝和浅拷贝

    jQuery.extend = jQuery.fn.extend = function() {
    	var options, name, src, copy, copyIsArray, clone,
    		target = arguments[0] || {},
    		i = 1,
    		length = arguments.length,
    		deep = false;
    
            ...
         for ( ; i < length; i++ ) {
            if ( (options = arguments[ i ]) != null ) {
                for ( name in options ) {
                    src = target[ name ];
                    copy = options[ name ];
    
                    if ( target === copy ) {
                        continue;
                    }
                            if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                                if ( copyIsArray ) {
                                    copyIsArray = false;
                                    clone = src && jQuery.isArray(src) ? src : []; 
                                } else {
                               //src 是对象则赋值给clone,否则 clone赋值为空{}
                               clone = src && jQuery.isPlainObject(src) ? src : {};
                                 } 
                               target[ name ] = jQuery.extend( deep, clone, copy ); //递归实现深拷贝
                            } else if ( copy !== undefined ) {
                                target[ name ] = copy; 
                           }
                }
            }
        }
        return target;
    }
    
    
    
    

  • 相关阅读:
    手写Promise(转)
    阻止element组件中的<el-input/>的粘贴功能(转)
    js 对象深拷贝函数
    20182301 2019-2020-1《程序设计与数据结构》课程总结
    20182301 2019-2020-1 《数据结构与面向对象程序设计》实验9报告
    团队博客第二周——DIG
    20182301 2019-2020-1 《数据结构与面向对象程序设计》第十周学习总结
    《团队作业第一周》团队作业——DIG
    20182301 2019-2020-1 《数据结构与面向对象程序设计》哈夫曼实验报告
    20182301 2019-2020-1 《数据结构与面向对象程序设计》第9周学习总结
  • 原文地址:https://www.cnblogs.com/hdchangchang/p/3965321.html
Copyright © 2011-2022 走看看