快捷導(dǎo)航

讀jQuery之二（兩種擴(kuò)展）

更新時(shí)間：2011年06月11日 00:57:21 作者：

上一篇分析了jQuery對象的組成，這篇分析下它的extend方法。

如下

 
jQuery.extend = jQuery.fn.extend = function() { 
... 
}; 

我們可以用$.extend去擴(kuò)展自定義的對象，如

復(fù)制代碼代碼如下:

 
var myself = {name:jack}; 
$.extend(myself, {setName: function(n){this.name=n;} }); 
myself.setName("tom"); 

通過$.extend為對象myself添加了setName方法。但這里主要討論$.extend如何構(gòu)建jQuery庫的。不知注意到上面代碼中jQuery.extend和jQuery.fn.extend是同一個(gè)函數(shù)。我們?yōu)g覽下jQuery庫，發(fā)現(xiàn)有些方法是通過調(diào)用jQuery.extend擴(kuò)展的，有些則是通過調(diào)用jQuery.fn.extend擴(kuò)展的。
下面分別討論：
1，通過jQuery.extend擴(kuò)展
我們知道jQuery.extend中的jQuery類型是function，即typeof jQuery值為字符串“function”。如果把jQuery當(dāng)成一個(gè)類，jQuery.extend相當(dāng)于為該類添加了靜態(tài)方法extend。靜態(tài)方法是不需要new一個(gè)實(shí)例再去調(diào)用的，通過“類名+方法名”直接調(diào)用。即jQuery.extend(...)，jQuery又被賦值給$。因此我們更習(xí)慣$.extend(...)。
源碼中直接調(diào)用jQuery.extend方法，只傳一個(gè)參數(shù)。如下

復(fù)制代碼代碼如下:

 
jQuery.extend({ 
noConflict: function( deep ) { 
window.$ = _$; 
if ( deep ) 
window.jQuery = _jQuery; 
return jQuery; 
}, 
... 
}); 

我們知道extend中如果只傳一個(gè)參數(shù)，那么將執(zhí)行該句

復(fù)制代碼代碼如下:

 
if ( length === i ) { 
target = this; 
--i; 
} 

即擴(kuò)展自己，而這里的this則是function jQuery。也就是說給function jQuery添加了許多靜態(tài)方法，這些方法都可以直接通過jQuery.xx(或$.xx)方式來調(diào)用，而不是先執(zhí)行(調(diào)用)jQuery方法再去調(diào)用xx，如$("#id").xx。也許下面這個(gè)例子更容易理解

復(fù)制代碼代碼如下:

 
function fun(){}//定義一個(gè)類（函數(shù)） 
//為該類（函數(shù)）添加一個(gè)靜態(tài)方法extend 
fun.extend=function(obj){ 
for(var a in obj) 
this[a] = obj[a];//注意：這里的tihs即fun 
} 
//調(diào)用extend為該類添加了靜態(tài)屬性name，靜態(tài)方法method1 
fun.extend({name:"fun",method1:function(){}}); 
//輸出name,prototype,extend,method1 
console.dir(fun) 

因此，jQuery中的isFunction, isArray, isWindow等都是靜態(tài)方法，只能通過$.isFunction, $.isArray, $.Window引用。而不能通過$("...").isFuction, $("...").isArray, $("...").isWindow方式引用。
2，通過jQuery.fn.extend擴(kuò)展
jQuery.fn等于jQuery.prototype，也就是說給function jQuery的原型(prototype)上掛了個(gè)extend方法。通過調(diào)用jQuery.fn.extend(object)來擴(kuò)展時(shí)(注意只傳一個(gè)參數(shù)object)，extend函數(shù)中仍然會(huì)執(zhí)行

復(fù)制代碼代碼如下:

 
if ( length === i ) { 
target = this; 
--i; 
} 

而這時(shí)的this則是jQuery.prototype（第一條提到的則是jQuery函數(shù)自身）。即給jQuery.prototype上添加了許多屬性，方法。當(dāng)jQuery函數(shù)執(zhí)行時(shí)，如$()或jQuery()，更多時(shí)候是$()。該函數(shù)會(huì)new一個(gè)jQuery（見上一篇jQuery對象的組成）。這時(shí)則把擴(kuò)展的屬性，方法都附加到new生成的對象上了。也許下面這個(gè)示例更容易理解

復(fù)制代碼代碼如下:

 
function fun(){}//定義一個(gè)類（函數(shù)） 
//給該類原型上添加一個(gè)方法extned 
fun.prototype.extend = function(obj){ 
for(var a in obj) 
this[a] = obj[a];//注意：這里的this即是fun.prototype 
} 
//調(diào)用extend方法給fun.prototype上添加屬性，方法 
fun.prototype.extend({name:"fun2",method1:function(){}}) 
//輸出name,extend,method1 
console.dir(new fun()) 

因此擴(kuò)展的屬性或方法都添加到j(luò)Query對象上了。如bind, one, unbind等可以通過$("...").bind, $("...").one, $("...").unbind方式調(diào)用。卻不能通過 $.bind, $.one, $.unbind方式調(diào)用。
jQuery與Prototype一樣都是通過extend方法擴(kuò)展出整個(gè)庫的。相對來說jQuery的擴(kuò)展方式更難理解一些。
總結(jié)如下:
1，jQuery.extend({...})是給function jQuery添加靜態(tài)屬性或方法。
2，jQuery().extend({...})是給jQuery對象添加屬性或方法。
/js/2011/zchain/zchain-0.2.js

您可能感興趣的文章: