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

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

首先需要声明的是原生javascript中是没有extend这个属性和方法的,只有prototype原形链,extend是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)是怎么样定义的：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<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>

这里我们可以看到：

?

1 2 3

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

?

1

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

?

1 2 3 4 5 6

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

?

1

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

这里有个问题。

 

?

1	jQuery.fn = jQuery.prototype

 

?

1

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

再看下面：

 

?

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

 

?

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()))。

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

 

?

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