通過(guò)jQuery源碼學(xué)習(xí)javascript(三)

更新時(shí)間：2012年12月27日 16:13:22 作者：

承接上兩篇繼續(xù)寫下去。我盡量把我明白的地方給大家說(shuō)清楚。有些大家的提問(wèn)我也有點(diǎn)搞不明白，如果有人能解答，再好不過(guò)了

疑問(wèn)

　　第一篇中有位博友提出了以下的問(wèn)題，我也不太明白，如果有明白的，能否告知一、二。

 
var str = "test"; 
for(var a in str){ 
console.log(a + ":" + str[ a ]); 
} 

輸出結(jié)果
這是一個(gè)字符串對(duì)象，在使用for的時(shí)候，會(huì)出現(xiàn)上面的情況。

自調(diào)用匿名函數(shù)(function(){})(window)

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

 
(function(window, undefined){ 
// jquery code 
})(window); 

代碼解析：

　　第一個(gè)括號(hào)：創(chuàng)建一個(gè)匿名函數(shù)。
　　第二個(gè)括號(hào)：立即執(zhí)行。

傳入window變量原因：
　　使window變量由全局變量變?yōu)榫植孔兞?，不需要將作用域鏈回退到頂層作用域，以便更快的訪問(wèn)window。
在參數(shù)列表中增加undefined原因：
　　在自調(diào)用匿名函數(shù)的作用域內(nèi)，確保undefined是真的未定義。
這樣設(shè)計(jì)的好處：
　　創(chuàng)建私有命名空間。函數(shù)體內(nèi)的變量和方法，不會(huì)影響全局空間。不會(huì)與其他程序的變量發(fā)生沖突。

功能擴(kuò)展extend()

　　根據(jù)一般的設(shè)計(jì)習(xí)慣，可以直接通過(guò)點(diǎn)(.)語(yǔ)法實(shí)現(xiàn)，或者在prototype對(duì)象結(jié)構(gòu)中增加一個(gè)屬性即可?！猨Query框架是通過(guò)extend()函數(shù)來(lái)實(shí)現(xiàn)功能擴(kuò)展的。
　　我們也做個(gè)類似的方法?！阎付▍?shù)對(duì)象包含的所有屬性復(fù)制給cQuery或cQuery.prototype對(duì)象。

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

 
(function(){ 
var 
_cQuery = window.cQuery, 
cQuery = function(){ 
return new cQuery.fn.init(); 
}; 

cQuery.fn = cQuery.prototype = { 
init : function () { 
return this; 
} 
}; 
cQuery.fn.init.prototype = cQuery.fn; 

cQuery.extend = cQuery.fn.extend = function( obj ) { 
for (var prop in obj) { 
this[ prop ] = obj[ prop ]; 
} 
return this; 
} 

cQuery.fn.extend({ 
test : function() { 
console.log('測(cè)試!'); 
} 
}); 
window.C = window.cQuery = cQuery; 
})(); 
// 調(diào)用方式 
C().test(); 

好處：
　　1、方便用戶快速擴(kuò)展jQuery框架的功能，不會(huì)破壞jQuery框架的原型結(jié)構(gòu)。
　　2、方便管理。
注意：
　　通過(guò)prototype擴(kuò)展的對(duì)象，我們必須通過(guò)實(shí)例化函數(shù)來(lái)調(diào)用（如cQuery().test()，而不能使用cQuery.test()）

對(duì)象url參數(shù)化param()

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

 
(function(){ 
var 
_cQuery = window.cQuery, 
cQuery = function(){ 
return new cQuery.fn.init(); 
}; 

cQuery.fn = cQuery.prototype = { 
init : function () { 
return this; 
} 
}; 

cQuery.param = function(obj) { 
var prefix, s = []; 
for ( prefix in obj ) { 
s[ s.length ] = encodeURIComponent( prefix ) + "=" + encodeURIComponent( obj[ prefix ]); 
} 
return s.join( "&" ); 
} 


cQuery.fn.init.prototype = cQuery.fn; 
window.C = window.cQuery = cQuery; 
})(); 

var param = cQuery.param({"name":"chuanshanjia", "age":30}); 
console.log( param ); 

輸出結(jié)果

對(duì)象url參數(shù)化：有利于結(jié)構(gòu)化，易于維護(hù)。如果在url后面加一坨的參數(shù)列表，難道看著不眼暈嗎？

總結(jié)

　　暫時(shí)寫到這里，如果大家有所補(bǔ)充，那最好不過(guò)了?！蠹叶嘟涣骰ハ鄬W(xué)習(xí)下。

您可能感興趣的文章: