計劃按如下順序完成這篇筆記:
1. 理念。
2. 屬性復制和繼承。
3. this/call/apply。
4. 閉包/getter/setter。
5. prototype。
6. 面向對象模擬。
7. jQuery基本機制。
8. jQuery選擇器。
9. jQuery工具方法。
10. jQuery-在“類”層面擴展。
11. jQuery-在“對象”層面擴展。
12. jQuery-擴展選擇器。
13. jQuery UI。
14. 擴展jQuery UI。
這是筆記的第10篇,我們考慮如何從實用角度,從“類”的角度對傢Query進行擴展。
jQuery是一個緊湊的框架,專註解決最核心的問題,沒有追求大而全,所有擴展機制對jQuery來說,至關重要。
JavaScript以函數為基礎,今天我們試圖基於jQuery構建一個針對自己項目的函數庫,每個函數實現特定的功能,同時對這些函數進行有效的組織。
1、目標
通過$調用我們的函數庫。函數庫按照功用分級組織。效果如下:
$.util.parseDate
$.util.parseDecimal
$.page.event.init
2、方法
上一篇我們瞭解到,通過jQuery.extend()可以方便地對jQuery進行擴展,甚至能覆蓋extend本身。
jQuery.extend()支持以下幾種函數簽名:
jQuery.extend(obj);
jQuery.extend(isDeep,obj);
jQuery.extend(target,src1,src2,…);
jQuery.extend(isDeep,target,src1,src2,…);
我們可以extend源代碼的基礎上修改,並覆蓋原來的extend,這樣修改一個可能被廣泛使用的函數,修改瞭其他人對輸入參數的預期,是不合適的,可能會誤導其他人,輸入瞭錯誤的參數,帶來錯誤隱患。
我們重新定義一個方法,如下:
jQuery.extend({ ns_extend : function(){ var ns, nss, target, i, src, length ; length = arguments.length; if(length>1){ ns = arguments[0]; i = 1; } else { i = 0; } if(!( src = arguments[i] ) || !jQuery.isPlainObject( src ) ){ return ; } target = this; if(ns){ nss = ns.split('.'); // TODO 這裡需要做好多字符過濾處理 for( var idx = 0; idx < nss.length ; ++idx ){ ns = nss[idx];// ns 的語義改變瞭,原來的語義使命結束,這裡用作臨時變量 ns = jQuery.trim(ns); if(ns){ target[ns] = target[ns] || {}; target = target[ns]; } } } for( ; i < length ; ++i ){ src = arguments[i]; jQuery.extend( target, src ); } } }); jQuery.ns_extend('pet',{ miao : function(){ alert('i am a cat'); } }); jQuery.ns_extend('my.fav.pet',{ wangwang : function(){ alert('i am a dog'); } }); $.pet.miao(); $.my.fav.pet.wangwang();
目的達成!