通過jQuery原始碼學習javascript(三)

通過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後面加一坨的引數列表,難道看著不眼暈嗎?

總結

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

您可能感興趣的文章:

jQuery原始碼解讀之addClass()方法分析jQuery原始碼解讀之hasClass()方法分析jQuery原始碼解讀之removeAttr()方法分析jQuery原始碼分析之jQuery.fn.each與jQuery.each用法從JQuery原始碼分析JavaScript函式的apply方法與call方法jQuery原始碼分析之jQuery中的迴圈技巧詳解通過jQuery原始碼學習javascript(二)jQuery中removeClass()方法用法例項使用JS實現jQuery的addClass, removeClass, hasClass函式功能jQuery原始碼解讀之removeClass()方法分析