一、jQuery.extend方法

1、用途

     jQuery.extend方法是将多个对象(提供对象)的属性(包括原型中的属性)复制给另一个对象(要扩展的目标对象),使目标对象增强行为;当提供对象有而目标对象没有的属性(包括方法),则直接复制给目标对象,

当它们有相同的属性名(即key键相同),且值为对象,设置参数deep = true时,数组和简单对象会递归合并,否则直接覆盖,不会合并。

 

2、用法

jQuery.extend( target, [ object1 ], [ objectN ] )
target 一个对象,如果附加的对象被传递给这个方法那么它将接收新的属性,如果它是唯一的参数将扩展jQuery的命名空间
object1 一个对象,它包含额外的属性合并到第一个参数

objectN 包含额外的属性合并到第一个参数

jQuery.extend( [ deep ], target, object1, [ objectN ] )
deep 如果是true,合并成为递归(又叫做深拷贝)。
target 对象扩展。这将接收新的属性。
object1 一个对象,它包含额外的属性合并到第一个参数
objectN 包含额外的属性合并到第一个参数

3、源码解析
// 源码解析 update-time:2014/05/20
(function( window, undefined ) {
    var jQuery = function() {
        // ...
    };
    jQuery.extend = function() {
        // 提供合并的对象,提供合并对象的属性,目标对象的属性值,提供合并对象的属性值
        // 布尔值(判断提供的合并对象属性值类型是否为数组),递归中的目标对象(目标对象的属性),目标对象
        var options, name, src, copy, copyIsArray, clone,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length,
            deep = false;

        // 处理第一个参数为boolean类型
        if ( typeof target === "boolean" ) {
            deep = target;
            target = arguments[1] || {};
            // 略过第一个boolean类型参数和目标扩展对象,提供合并属性的对象从第三个参数开始
            i = 2;
        }

        // 目标参数类型不是对象、函数,则重置为一个新的空对象
        if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
            target = {};
        }

        // 当参数只有一个,扩展jQuery本身( this指向jQuery )
        if ( length === i ) {
            target = this;
            // 提供合并属性的对象从第一个参数开始
            --i;
        }

        // 枚举提供合并的对象
        for ( ; i < length; i++ ) {
            // 提供合并的对象不为null,注意这里比较的是值,不包括null类型
            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; // 需要重置为false,因为jQuery.isPlainObject(copy)为true时,始终都是执行第一个if语句
                            clone = src && jQuery.isArray(src) ? src : [];
                        } 
                        // 指定递归中要扩展的目标为对象
                        else {
                            clone = src && jQuery.isPlainObject(src) ? src : {};
                        }

                        // 使用jQuery.extend方法进行递归
                        target[ name ] = jQuery.extend( deep, clone, copy );
     
                    // 被复制属性值的类型不是对象、数组、undefined,则将被复制属性值赋值到目标对象中
                    } else if ( copy !== undefined ) {
                        target[ name ] = copy;
                    }
                }
            }
        }
     
        // 返回被合并的对象,即目标对象
        return target;
    };
     
    // 扩展jQuery命名空间下的方法,增强行为
    jQuery.extend({
        method: function () {
            console.log('test');
        },
        noConflict: function () {
            //...   
        },
        isReady: false,
        // ...
    });
 
    window.jQuery = window.$ = jQuery;
 
})( window );
View Code

相关文章:

  • 2022-12-23
  • 2022-02-13
  • 2021-11-18
  • 2022-12-23
  • 2021-05-27
  • 2022-01-20
猜你喜欢
  • 2021-10-12
  • 2021-06-06
  • 2022-02-12
  • 2022-03-06
  • 2022-03-06
相关资源
相似解决方案