讀jQuery之二（兩種擴充）

如下
複製代碼 代碼如下:
jQuery.extend = jQuery.fn.extend = function() {
...
};

我們可以用$.extend去擴充自訂的對象，如
複製代碼 代碼如下:
var myself = {name:jack};
$.extend(myself, {setName: function(n){this.name=n;} });
myself.setName("tom");

通過$.extend為對象myself添加了setName方法。但這裡主要討論$.extend如何構建jQuery庫的。不知注意到上面代碼中jQuery.extend和jQuery.fn.extend是同一個函數。我們瀏覽下jQuery庫，發現有些方法是通過調用jQuery.extend擴充的，有些則是通過調用jQuery.fn.extend擴充的。
下面分別討論：
1，通過jQuery.extend擴充
我們知道jQuery.extend中的jQuery類型是function，即typeof jQuery值為字串“function”。如果把jQuery當成一個類，jQuery.extend相當於為該類添加了靜態方法extend。靜態方法是不需要new一個執行個體再去調用的，通過“類名+方法名”直接調用。即jQuery.extend(...)，jQuery又被賦值給$。因此我們更習慣$.extend(...)。
源碼中直接調用jQuery.extend方法，只傳一個參數。如下
複製代碼 代碼如下:
jQuery.extend({
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},
...
});

我們知道extend中如果只傳一個參數，那麼將執行該句
複製代碼 代碼如下:
if ( length === i ) {
target = this;
--i;
}

即擴充自己，而這裡的this則是function jQuery。也就是說給function jQuery添加了許多靜態方法，這些方法都可以直接通過jQuery.xx(或$.xx)方式來調用，而不是先執行(調用)jQuery方法再去調用xx，如$("#id").xx。也許下面這個例子更容易理解
複製代碼 代碼如下:
function fun(){}//定義一個類（函數）
//為該類（函數）添加一個靜態方法extend
fun.extend=function(obj){
for(var a in obj)
this[a] = obj[a];//注意：這裡的tihs即fun
}
//調用extend為該類添加了靜態屬性name，靜態方法method1
fun.extend({name:"fun",method1:function(){}});
//輸出name,prototype,extend,method1
console.dir(fun)

因此，jQuery中的isFunction, isArray, isWindow等都是靜態方法，只能通過$.isFunction, $.isArray, $.Window引用。而不能通過$("...").isFuction, $("...").isArray, $("...").isWindow方式引用。
2，通過jQuery.fn.extend擴充
jQuery.fn等於jQuery.prototype，也就是說給function jQuery的原型(prototype)上掛了個extend方法。通過調用jQuery.fn.extend(object)來擴充時(注意只傳一個參數object)，extend函數中仍然會執行
複製代碼 代碼如下:
if ( length === i ) {
target = this;
--i;
}

而這時的this則是jQuery.prototype（第一條提到的則是jQuery函數自身）。即給jQuery.prototype上添加了許多屬性，方法。當jQuery函數執行時，如$()或jQuery()，更多時候是$()。該函數會new一個jQuery（見上一篇jQuery對象的組成）。這時則把擴充的屬性，方法都附加到new產生的對象上了。也許下面這個樣本更容易理解
複製代碼 代碼如下:
function fun(){}//定義一個類（函數）
//給該類原型上添加一個方法extned
fun.prototype.extend = function(obj){
for(var a in obj)
this[a] = obj[a];//注意：這裡的this即是fun.prototype
}
//調用extend方法給fun.prototype上添加屬性，方法
fun.prototype.extend({name:"fun2",method1:function(){}})
//輸出name,extend,method1
console.dir(new fun())

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