通過jQuery源碼學習javascript(三)

疑問

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

複製代碼 代碼如下:var str = "test";
for(var a in str){
console.log(a + ":" + str[ a ]);
}

輸出結果
這是一個字串對象，在使用for的時候，會出現上面的情況。

自調用匿名函數(function(){})(window) 複製代碼 代碼如下:(function(window, undefined){
// jquery code
})(window);

代碼解析：

　　第一個括弧：建立一個匿名函數。
　　第二個括弧：立即執行。

傳入window變數原因：
　　使window變數由全域變數變為局部變數，不需要將範圍鏈回退到頂層範圍，以便更快的訪問window。
在參數列表中增加undefined原因：
　　在自調用匿名函數的範圍內，確保undefined是真的未定義。
這樣設計的好處：
　　建立私人命名空間。函數體內的變數和方法，不會影響全域空間。不會與其他程式的變數發生衝突。

功能擴充extend()

　　根據一般的設計習慣，可以直接通過點(.)文法實現，或者在prototype對象結構中增加一個屬性即可。——jQuery架構是通過extend()函數來實現功能擴充的。
　　我們也做個類似的方法。——把指定參數對象包含的所有屬性複製給cQuery或cQuery.prototype對象。 複製代碼 代碼如下:(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('測試!');
}
});
window.C = window.cQuery = cQuery;
})();
// 調用方式
C().test();

好處：
　　1、方便使用者快速擴充jQuery架構的功能，不會破壞jQuery架構的原型結構。
　　2、方便管理。
注意：
　　通過prototype擴充的對象，我們必須通過執行個體化函數來調用（如cQuery().test()，而不能使用cQuery.test()）

對象url參數化param()
複製代碼 代碼如下:(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 );

輸出結果

對象url參數化：有利於結構化，易於維護。如果在url後面加一坨的參數列表，難道看著不眼暈嗎？

總結

　　暫時寫到這裡，如果大家有所補充，那最好不過了。——大家多交流互相學習下。