快捷導(dǎo)航

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

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

承接上兩篇繼續(xù)寫下去。我盡量把我明白的地方給大家說清楚。有些大家的提問我也有點(diǎ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)榫植孔兞浚恍枰獙⒆饔糜蜴溁赝说巾攲幼饔糜?，以便更快的訪問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í)慣，可以直接通過點(diǎn)(.)語法實(shí)現(xiàn)，或者在prototype對(duì)象結(jié)構(gòu)中增加一個(gè)屬性即可?！猨Query框架是通過extend()函數(shù)來實(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、方便管理。
注意：
　　通過prototype擴(kuò)展的對(duì)象，我們必須通過實(shí)例化函數(shù)來調(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 ); 