通過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后面加一坨的參數列表，難道看着不眼暈嗎？ 

總結

 

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

 

 

推薦

 

 

休閑區

 

　　如果大家喜歡這個模塊的化，請留言。我統計一下，如果喜歡的人多的話，那我以后會在每篇博文的后面，都會放置這樣的模塊。——權當休息一下。

 

【當你學不進去的時候】----普瑞馬法則