jQuery插件开发及jQuery.extend函数详解和jQuery.fn与jQuery.prototype区别

一、jQuery插件开发分为两种： 

1.类级别：
类级别你可以理解为拓展jquery类，最明显的例子是$.ajax(...),相当于静态方法。 

开发扩展其方法时使用$.extend方法，即jQuery.extend(object); 

$.extend({ 

    add:function(a,b){return a+b;} , 

    minus:function(a,b){return a-b;} 

}); 

var i = $.add(3,2); 

var j = $.minus(3,2); 

2.对象级别：

对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。 

开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object); 

$.fn.extend({ 

    check:function(){ 

        return this.each({ 

            this.checked=true; 

        }); 

    }, 

    uncheck:function(){ 

        return this.each({ 

            this.checked=false; 

        }); 

    }

});

$('input[type=checkbox]').check(); 

$('input[type=checkbox]').uncheck(); 

3.扩展

$.xy = {

    add:function(a,b){return a+b;} ,

    minus:function(a,b){return a-b;},

    voidMethod:function(){ alert("void"); }

};

var i = $.xy.add(3,2); 

var m = $.xy.minus(3,2); 

$.xy.voidMethod(); 

二、jQuery.extend 函数详解：

1.jQuery的扩展原型是：
jQuery.extend(target, object1,object2,.. objectN)；

它的含义是将object1,object2,...objectN合并到target中，返回值为合并后的target，由此可以看出该方法合并后，

是修改了target的结构的。如果想要得到合并的结果却又不想修改target的结构，可以如下使用：

var newObj= $.extend({},obj1,obj2,obj3...);//也就是将"{}"作为target参数。

如下例：

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})；

那么合并后的结果：

result={name:"Jerry",age:21,sex:"Boy"}

也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。

2.jQuery的另一个扩展原型是，省略target参数：
$.extend(object);

上述的extend方法原型中的target参数是可以省略的，如果省略了，则该方法就只能有一个object参数，而且是将该object合并到调用extend方法的对象中去，如：

2.1 $.extend(object),该方法就将object合并到jQuery的全局对象中去，举例如下：

$.extend({

    hello:function(){alert('hello');}

});

使用方式：$.hello();

这里就将hello()方法合并到jQuery的全局对象中去，相当于jQuery的静态方法；

2.2 $.fn.extend(object),该方法将object合并到jQuery的实例对象中去，举例如下：

$.fn.extend({

hello:function(){alert('hello');}

});

使用方式：$("#test").hello();

2.3常用扩展实例：

$.extend({

    home:{}

});

这是在jQuery全局对象中扩展一个home命名空间。

$.extend($.home,{

    getAddress:function(){alert('广东省广州市海珠区');}

});

这是将hello方法扩展到之前扩展的jQuery的home命名空间中去。

3.jQuery的extend方法还有一个重载原型：
$.extend(boolean,target,obj1,obj2,obj3,...);

第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：

var result = $.extend(true,{},

    {name:"John",location:{city:"Boston",country:"USA"}},

    {sex:"male",location:{province"GuangDong",country:"China"}}

);

则合并后的结果为：

result = {name:"John",sex:"male",location:{city:"Boston",province:"GuangDong",country:"China"}};

也就是说它会将object中的嵌套子对象也会进行合并，而如果第一个参数boolean为false，则合并后的结果为：

result = {name:"John",sex:"male",location:{province"GuangDong",country:"China"}};

三、jQuery.fn和jQuery.prototype详解：

来看下jQuery的源码(jquery-1.7.js)是怎么样定义的： 
 

[javascript]
view plaincopyprint?





<span style="font-family:Microsoft YaHei;font-size:14px;">(function( window, undefined ) {  
     
    var jQuery = (function() {  
       // 构建jQuery对象  
       var jQuery = function( selector, context ) {  
           return new jQuery.fn.init( selector, context, rootjQuery );  
       }  
     
       // jQuery对象原型  
       jQuery.fn = jQuery.prototype = {  
           constructor: jQuery,  
           init: function( selector, context, rootjQuery ) {  
              // something to do  
           }  
       };  
     
       // Give the init function the jQuery prototype for later instantiation  
       jQuery.fn.init.prototype = jQuery.fn;  
     
       // 合并内容到第一个参数中，后续大部分功能都通过该函数扩展  
       // 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数  
       jQuery.extend = jQuery.fn.extend = function() {};  
        
       // 在jQuery上扩展静态方法  
       jQuery.extend({  
           // something to do  
       });  
   
        // 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象的扩展  
       return jQuery;  
     
    })();  
     
    window.jQuery = window.$ = jQuery;  
})(window);</span>  

这里我们可以看到：

[javascript]
view plaincopyprint?





var jQuery = function( selector, context ) {  
           return new jQuery.fn.init( selector, context, rootjQuery );  
       }  

[javascript]
view plaincopyprint?





  

那么jQuery.fn.init()返回的又是什么呢？

[javascript]
view plaincopyprint?





jQuery.fn = jQuery.prototype = {  
           constructor: jQuery,  
           init: function( selector, context, rootjQuery ) {  
              // something to do  
           }  
       };  

[javascript]
view plaincopyprint?





  

就是从这里来的，返回的是一个javascript对象。

这里有个问题。

[javascript]
view plaincopyprint?





jQuery.fn = jQuery.prototype  

[javascript]
view plaincopyprint?





  

那么就是 将jQuery 的原型对象赋值给了 jQuery.fn。

再看下面：

[javascript]
view plaincopyprint?





jQuery.fn.init.prototype = jQuery.fn;  

[javascript]
view plaincopyprint?





  

看到这里可知将jQuery.fn 给了 jQuery.fn.init.prototype.

那么在这之前jQuery.fn.init.prototype.原型是{}，为了可以去调用init外面的方法，就做了这个处理，将jQuery.fn 赋值给jQuery.fn.init.prototype.这样的话，jQuery.fn.init.prototype的原型也就是jQuery的原型对象就是 jQuery.fn ( 注意jQuery = function(return new jQuery.fn.init()))。

那么就有这样的一个关系：

[javascript]
view plaincopyprint?





jQuery.prototype = jQuery.fn = jQuery.fn.init.prototype  

赋值了以后，在调用的时候，当init中没有方法的时候，就会去原型函数中调用，那么应该明白它们的区别了吧

jQuery.extend();
jQuery.fn.extend();

jQuery.extend()是直接扩展jQuery.而jQuery.fn.extend()很明显是扩展原型。这就是为什么jQuery.fn.extend()中的大部分方法来自己于jQuery.extend()。

补充知识：

js函数前面的加号，叹号,如：+function(){}();

这里的加号，也可以替换成!,~等其他一元操作符，其效果相当于：

(function() { console.log("Foo!"); })();

// or

(function() { console.log("Foo!"); }());

如果没有这个加号的话，解析器会认为function是一个函数声明的开始，函数声明前置处理后，后面则剩一个（）将会导致语法错误。在function前面加上+号时，就变成了一个函数表达式，函数表达式不会进行前置处理，则其后面又添加了一个()就变成了一个立即执行的函数了。