浅谈jQuery extend方法

jQuery 中一个重要的函数便是 extend，既可以对本身 jQuery 的属性和方法进行扩张，又可以对原型的属性和方法进行扩展。

extend的用法

1. 扩展方法
2. 浅层克隆
3. 深层克隆

使用示例

// 加到工具方法里面
// 随机数
$.extend({
    definedMandom : function (start, final) {
        // [0, 1) * len + start
        var len = final - start;
        return Math.random() * len + start;
    },
    abc : function () { xxx }
});

// 加到实例方法里面
// 元素拖拽
$.fn.extend({
    drag : function () {
        var disX,
            disY,
            self = this;

        $(this).on('mousedown', function (e){
            disX = e.pageX - $(this).offset().left;
            disY = e.pageY - $(this).offset().top;

            $(document).on('mousemove', function (e) {
                $(self).css({left : e.pageX - disX, top : e.pageY - disY});
            });

            $(document).on('mouseup', function (e) {
                $(document).off('mousemove').off('mouseup');
            })
        });
        return this;
    },
    abc : function () { xxx }
});

var obj1 = {
    name : "彭于晏",
    age : 18,
    friend : {
        name : 'xiaofan',
        age : 20
    }
}

var obj2 = {
    name : "吴彦祖",
    age : 28,
    smoke : true,
    friend : {
        name : 'xiaozhang',
        sex : "male"
    }
}

var obj3 = {
    name : "陈冠希",
    money : 100000000
}


// 浅层克隆
$.extend(obj1, obj2, obj3); 

{
    name : "陈冠希",
    age : 28,
    smoke : true,
    friend : {
        name : 'xiaozhang',
        sex : "male"
    },
    money : 100000000
}

// 深度克隆
$.extend(true, obj1, obj2, obj3);
{
    name : "陈冠希",
    age : 28,
    smoke : true,
    friend : {
        name : 'xiaozhang',
        age : 20,
        sex : "male"
    },
    money : 100000000
}

一些前置知识

1.扩展插件  $.extend = $.fn.extend({a : function () {}});     只能有1个参数       target = this
2.浅层克隆  $.extend(obj1, obj2, obj3...);                    至少2个参数 target = arguments[0]
3.深度克隆  $.extend(true, obj1, obj2, obj3...);              至少3个参数 target = arguments[1]
4.window.jQuery = window.$ = jQuery
5.jQuery.fn = jQuery.prototype

extend详解

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

    // Handle a deep copy situation
    if ( typeof target === "boolean" ) { // 判断是否是深度克隆
        deep = target;

        // Skip the boolean and the target
        target = arguments[ i ] || {};
        i++; // i = 2
    }

    // Handle case when target is a string or something (possible in deep copy)
    if ( typeof target !== "object" && !jQuery.isFunction(target) ) { // 保证目标参数的合法性
        target = {};
    }

    // Extend jQuery itself if only one argument is passed
    if ( i === length ) { // 如果是插件扩展
        target = this;
        i--; //  i = 0
    }

    for ( ; i < length; i++ ) {
        // Only deal with non-null/undefined values
        if ( (options = arguments[ i ]) != null ) {
            // Extend the base object
            for ( name in options ) {
                src = target[ name ];
                copy = options[ name ];

                // Prevent never-ending loop
                if ( target === copy ) {
                    continue;
                }

                // Recurse if we're merging plain objects or arrays
                if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                    if ( copyIsArray ) {
                        copyIsArray = false;
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }

                    // Never move original objects, clone them
                    target[ name ] = jQuery.extend( deep, clone, copy );

                // Don't bring in undefined values
                } else if ( copy !== undefined ) {
                    target[ name ] = copy;
                }
            }
        }
    }

    // Return the modified object
    return target;
};

以上就是今天所分享的$.extend的全部内容。
【注意】jquery源码使用的版本号是2.1.4