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

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

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

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

<span style="font-size:18px;">$.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); </span>

2.对象级别：
对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。 
开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object); 

<span style="font-size:18px;">$.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(); </span>

3.扩展

<span style="font-size:18px;">$.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(); </span>

二、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的全局对象中去，举例如下：

<span style="font-size:18px;">$.extend({
    hello:function(){alert('hello');}
});</span>

使用方式：$.hello();
这里就将hello()方法合并到jQuery的全局对象中去，相当于jQuery的静态方法；
2.2 $.fn.extend(object),该方法将object合并到jQuery的实例对象中去，举例如下：

<span style="font-size:18px;">$.fn.extend({
hello:function(){alert('hello');}
});</span>

使用方式：$("#test").hello();
2.3常用扩展实例：

<span style="font-size:18px;">$.extend({
    home:{}
});</span>

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

<span style="font-size:18px;">$.extend($.home,{
    getAddress:function(){alert('广东省广州市海珠区');}
});</span>

这是将hello方法扩展到之前扩展的jQuery的home命名空间中去。
3.jQuery的extend方法还有一个重载原型：
$.extend(boolean,target,obj1,obj2,obj3,...);
第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：

<span style="font-size:18px;">var result = $.extend(true,{},
    {name:"John",location:{city:"Boston",country:"USA"}},
    {sex:"male",location:{province"GuangDong",country:"China"}}
);</span>

则合并后的结果为：
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 plain copy print ?

1. <span style="font-family:Microsoft YaHei;font-size:14px;">(function( window, undefined ) {  
2.      
3.     var jQuery = (function() {  
4.        // 构建jQuery对象  
5.        var jQuery = function( selector, context ) {  
6.            return new jQuery.fn.init( selector, context, rootjQuery );  
7.        }  
8.      
9.        // jQuery对象原型  
10.        jQuery.fn = jQuery.prototype = {  
11.            constructor: jQuery,  
12.            init: function( selector, context, rootjQuery ) {  
13.               // something to do  
14.            }  
15.        };  
16.      
17.        // Give the init function the jQuery prototype for later instantiation  
18.        jQuery.fn.init.prototype = jQuery.fn;  
19.      
20.        // 合并内容到第一个参数中，后续大部分功能都通过该函数扩展  
21.        // 通过jQuery.fn.extend扩展的函数，大部分都会调用通过jQuery.extend扩展的同名函数  
22.        jQuery.extend = jQuery.fn.extend = function() {};  
23.         
24.        // 在jQuery上扩展静态方法  
25.        jQuery.extend({  
26.            // something to do  
27.        });  
28.    
29.         // 到这里，jQuery对象构造完成，后边的代码都是对jQuery或jQuery对象的扩展  
30.        return jQuery;  
31.      
32.     })();  
33.      
34.     window.jQuery = window.$ = jQuery;  
35. })(window);</span>  

这里我们可以看到：

[javascript]  view plain copy print ?

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

[javascript]  view plain copy print ?

1.   

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

[javascript]  view plain copy print ?

1. jQuery.fn = jQuery.prototype = {  
2.            constructor: jQuery,  
3.            init: function( selector, context, rootjQuery ) {  
4.               // something to do  
5.            }  
6.        };  

[javascript]  view plain copy print ?

1.   

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

这里有个问题。

[javascript]  view plain copy print ?

1. jQuery.fn = jQuery.prototype  

[javascript]  view plain copy print ?

1.   

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

再看下面：

[javascript]  view plain copy print ?

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

[javascript]  view plain copy print ?

1.   

看到这里可知将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 plain copy print ?

1. 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前面加上+号时，就变成了一个函数表达式，函数表达式不会进行前置处理，则其后面又添加了一个()就变成了一个立即执行的函数了。

转载自：点击打开链接