• jquery 源码分析三(extend函数解析)


    这次主要分析的是JQuery中的extend函数,extend函数在JQuery中占的作用十分明显,在后期JQuery方法的添加上,基本是使用这个函数来添加到JQuery对象和prototype上的。这个函数另一个重要作用是在框架开发的时候使用,可以直接对JQuery增加新的功能。

    说明了重要性之后,就开始讲解函数了(函数的使用方法就不讲了,具体可以看官方文档:http://api.jquery.com/jQuery.extend/#jQuery-extend-target-object1-objectN)。首先是函数的位置:

    jQuery.extend = jQuery.fn.extend = function() {
            //some code
    }

    可以看到,extend函数直接加在了jQuery对象和prototype上(jQuery.fn =jQuery.prototype),这是因为函数内部存在判断,如果要拓展的target缺失的话,就会直接用this。这样就可以方便开发者们自己确定函数放的位置了。

    接下来就是具体函数内容分析了,下面这一段是先定义一系列需要的变量,其中target是要扩展的对象,deep是指是否深度复制,i=1是因为target已经默认指向了arguments[0]了,再接下来读取参数的时候,arguments[i]就可以直接从第二项开始了。:

    var src, copyIsArray, copy, name, options, clone,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length,
            deep = false;
    
        // 当第一参数是布尔值时,就让target等于第二个参数,而第一个参数确定为是否深度复制
        if ( typeof target === "boolean" ) {
            deep = target;
    
            // target 往后移动一位,i自加
            target = arguments[ i ] || {};
            i++;
        }
    
        // 处理当target为字符串或其他的时候
        if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
            target = {};
        }
    
        // 当只有一个参数或者只有是否深度复制和被复制的变量时,将target指向this(一般为jQuery)
        if ( i === length ) {
            target = this;
            i--;
        }

    通过以上这些代码的处理,就可以解决了deep和target的赋值问题,接下来就是通过循环来将值复制到target中。

    //支持添加多个被添加变量
    for ( ; i < length; i++ ) {
            // 只处理值不为undefined和null的情况
            if ( (options = arguments[ i ]) != null ) {
                for ( name in options ) {
                    src = target[ name ];
                    copy = options[ name ];
    
                    // 当copy指向target时,有可能导致无限循环,遇到这种情况直接跳过
                    if ( target === copy ) {
                        continue;
                    }
    
                    // 当确定是深度复制后,用递归进行
                    if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                                    //判断copy的类型,若target下该项没有的时候,建立相同类型的变量
                        if ( copyIsArray ) {
                            copyIsArray = false;
                            clone = src && jQuery.isArray(src) ? src : [];
    
                        } else {
                            clone = src && jQuery.isPlainObject(src) ? src : {};
                        }
    
                        // 进行深度复制,同时不改变copy
                        target[ name ] = jQuery.extend( deep, clone, copy );
    
                    // 浅复制,直接等于即可
                    } else if ( copy !== undefined ) {
                        target[ name ] = copy;
                    }
                }
            }
        }
    
        // 返回完成的target
        return target;
  • 相关阅读:
    React学习资料+css进阶资料总结
    事件委托
    iframe
    js识别安卓和ios及pc端,以及解决微信的屏蔽
    函数声明与函数表达式
    利用tween,使用原生js实现模块回弹动画效果
    点击按钮 弹出视频 并有遮罩层效果
    居中对齐的一些总结
    jasperreport报表导出excel锁定行和列
    intellij idea14注册码生成器
  • 原文地址:https://www.cnblogs.com/cyITtech/p/3581331.html
Copyright © 2020-2023  润新知