透過jQuery原始碼學習javascript(三)_jquery

疑問

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

複製程式碼 程式碼如下:

程式碼如下:


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

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

cQuery.fn = cQuery.prototype = { 🎜>
cQuery.fn = cQuery.prototype = {3. >init : function () {
return this;
}
};
cQuery.fn.init.prototype = cQuery.fn;
cQuery.extendfnh cQuery. .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()

複製程式碼


程式碼如下:


程式碼如下:

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

cQuery.param = function(obj) {

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後面加一坨的參數列表，難道看不眼暈嗎？ 總結 　　暫時寫到這裡，如果大家有所補充，那最好不過了。 ——大家多交流互相學習下。