Java程序員的JavaScript學習筆記(10—— jQuery-在“類”層面擴展)

計劃按如下順序完成這篇筆記:
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();

目的達成!

發佈留言