$.extend()方法和(function($){...})(jQuery)详解

jQuery为开发插件提拱了两个方法，分别是：

1. jQuery.fn.extend();

2. jQuery.extend();

一、jQuery.extend()

1.1 extend(result,item1,item2…..) 合并多个对象

这里这个方法主要用来合并，将所有的参数项都合并result中，并返回result，但是这样就会破坏result的结构。

var settings = { validate: false, limit: 5, name: "foo" }; 
var options = { validate: true, name: "bar","sex":"男","age":34 }; 
jQuery.extend(settings, options); 
结果：settings == { validate: true, limit: 5, name: "bar","sex":"男","age":34 }

1.2 extend({},item1,item2,……)

用这个方法，可以将所得的结果全部合并在{}中，并返回，而且还不会破坏原有的项的结构。

示例：

var item={name:”olive”,age:23};

var item1={name:”Momo”,sex:”gril”};

var result=$.extend({},item,item1);

结果：

result={name:”Momo”,age:23,sex:”gril”};

说明：

以上的结果表明extend方法将所有的项都合并到了{}中，但是，细心一点就会发现，其中item1中的name：“Momo” 将item中的name：“olive”给覆盖了，这是怎么回事？请接着往下看。

1.3  extend(bool,{},item1,item2….)

Extend方法还有带bool型参数的重载。

bool型参数为true表示深拷贝，为false时表示浅拷贝。具体可以通过一下示例来说明：

示例：

var item={name："olive"",age:23,address：'{provice:”河南”,city:”郑州”}'};
var item1={sex:”girl”,address:'{city:”北京”}'};
var result=  $.extend(true,item,item1);
var result1 =$.extend(false,item,item1);

结果：

result={ {name: "olive", age: "23", sex: "girl",address:{provice:”河南”,city:”北京”}};

result1= {name: "olive", age: "23", address: {city:"北京"}, sex: "girl"}

说明：

以上结果说明，当参数为ture时，即为深拷贝，当子项item1中的子项有与item中的子项相同属性的值不一样时，item1中子项的值会将item子项中的值给覆盖，当子项item1的属性跟item中的属性不同时，会与item进行合并。

当参数为false时，子项item1中的子项中与item中的子项属性相同时，item1中子项的属性值会将item中的值给完全覆盖。

1.4 $.extend(item) 添加静态方法

该方法是将item合并到Jquery的全局对象中去，相当于为Jquery全局对象添加了一个静态方法（对应这里的静态方法，当然还有实例方法，在后边有介绍）。

     示例：

 

$.extend({SayHello:function(value){alert("hello,"+value);}});

           这样写过之后，就可以直接调用SayHello方法：

           $.SayHello(“Olive”);

     说明：该方法相当于为Jquery类添加了新的方法。

还有一个例子：

$.extend({ add:function(a,b){return a+b;}, minus:function(a,b){return a-b}, multiply:function(a,b){return a*b;}, divide:function(a,b){return Math.floor(a/b);} }); var sum = $.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.divide(5,7); console.log(sum); 

二、jQuery.fn.extend();

$.fn是什么?

$.fn是指jQuery的命名空间，fn上的成员(方法function及属性property)，会对jQuery实例每一个有效。 

查看jQuery代码，就不难发现。

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

原来 jQuery.fn = jQuery.prototype.

所以，它是对jQuery.prototype进得扩展，就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

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

$.fn.extend({               doAlertWhileClick:function() {                       $(this).click(function(){                                   alert($(this).val());                       });                 }       });       $("#input1").doAlertWhileClick();

$("#input1")　为一个jQuery实例，当它调用成员方法 doAlertWhileClick后，便实现了扩展，每次被点击时它会先弹出目前编辑里的内容。

jQuery.extend() 的调用并不会把方法扩展到对象的实例上，引用它的方法也需要通过jQuery类来实现，如jQuery.init()，而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上，所以实例化一个jQuery对象的时候，它就具有了这些方法，这 是很重要的，在jQuery.JS中到处体现这一点

jQuery.fn.extend = jQuery.prototype.extend

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

(function( $ ){$.fn.tooltip = function( options ) {};//等价于var tooltip = {function(options){}};$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip})( jQuery );