$.extend()和jQuery插件

部分摘自：
https://www.cnblogs.com/yuqingfamily/p/5813650.html
https://www.cnblogs.com/yuqingfamily/p/5775950.html

定义和用法

jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象。

注意：

1. 如果只为$.extend()指定了一个参数，则意味着参数target被省略。此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
2. 如果多个对象具有相同的属性，则后者会覆盖前者的属性值。

语法

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

指示是否深度合并

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

默认情况是false（浅拷贝），并且false是不能够显示的写出来的。如果想写，只能写true（深拷贝）~~

浅拷贝（false 默认）：如果第二个参数对象有的属性第一个参数对象也有，那么不会进行相同参数内部的比较，直接将第一个对象的相同参数覆盖。

深拷贝（true）：如果第二个参数对象有的属性第一个参数对象也有，还要继续在这个相同的参数向下一层找，比较相同参数的对象中是否还有不一样的属性，如果有，将其继承到第一个对象，如果没有，则覆盖。

var object1 = {
    apple: 0,
    banana: {
        weight: 52,
        price: 100
    },
    cherry: 97
};
var object2 = {
    banana: {
        price: 200
    },
    durian: 100
};

//默认情况浅拷贝
//object1--->{"apple":0,"banana":{"price":200},"cherry":97,"durian":100}
//object2的banner覆盖了object1的banner，但是weight属性未被继承
//$.extend(object1, object2);

//深拷贝
//object1--->{"apple":0,"banana":{"weight":52,"price":200},"cherry":97,"durian":100}
//object2的banner覆盖了object1的banner，但是weight属性也被继承了呦
$.extend(true,object1, object2);

console.log('object1--->'+JSON.stringify(object1));

jQuery插件

• jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
• jQuery.fn.extend(object);给jQuery对象添加方法。

jQuery.fn

jQuery.fn = jQuery.prototype = {
    init: function(selector, context) {
        //内容
    }
}

关键是jQuery.fn = jQuery.prototype

• jQuery.extend(object)

为jQuery类添加类方法，可以理解为添加静态方法。

jQuery.extend({
    min: function(a, b) {
        return a < b ? a : b;
    },
    max: function(a, b) {
        return a > b ? a : b;
    }
});
jQuery.min(2, 3); //  2 
jQuery.max(4, 5); //  5

• jQuery.fn.extend(object);

为jQuery类添加“成员函数”。jQuery类的实例才可以调用这个“成员函数”。（js没有类概念，但是可以把jquery看做是一个封装好的类）

比如我们要开发一个插件，做一个特殊的编辑框，当它被点击时，便alert 当前编辑框里的内容。可以这么做：

$.fn.extend({
    alertWhileClick: function() {
        $(this).click(function() {
            alert($(this).val());
        });
    }
});
//$("#input1")是jQuery的实例，调用这个扩展方法
$("#input1").alertWhileClick();

jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()

jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法。

可以拓展一个对象到jQuery的 prototype里去，这样的话就是插件机制了。

(function ($) {
    var namespace = 'colorful';

    var methods = {
        init: function (options) {
            options = $.extend({}, $.fn[namespace].defaults, options);

            if (options.color) {
                this.css('color', options.color)
            }

            return this //保存链式
        }
    }
    //可复用代码
    $.fn[namespace] = function (method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1))
        } else if (($.type(method) === 'object') || (method == null)) {
            return methods.init.apply(this, arguments)
        } else {
            return $.error("Methods " + method + "not exist!")
        }
    }

    $.fn[namespace].defaults = {
        color: 'red'
    }
})(jQuery);