DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 讀jQuery之二(兩種擴展)
讀jQuery之二(兩種擴展)
編輯: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
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved