JavaScript框架學習筆記（一）

JavaScript框架學習筆記（一）

我爲何要學習框架

• 更深刻的理解工具，之後用起來更順手並且也能作必定的工具取捨，學習理解新工具也就更快，

• 對提高js水平也頗有幫助，框架有不少解決「坑」的經典思路，學習這些對提高開發能力頗有幫助。

• 基本的學習思路是跟着《JavaScript框架設計》這本書，甚至能夠說是這本書的讀書筆記。也參考不少網上解讀jquery的博客和學習資料。固然，最重要的資料仍是框架的源代碼。

• 基本學習的框架就是jQuery，也會看看其餘庫的實現

• 我不是大神，不少知識估計也沒有理解正確，歡迎指出，僅供參考。

1 種子模塊

1.1 解決命名空間問題

早期的一些prototype.js庫並無命名空間，它的意義是滲透到JavaScript，DOM中去，但願對原生對象的原型進行擴展。後來因爲開發者反對，新興的框架都在命名空間上構建。
通常的寫法都是使用IIFE解決,通常以下兩種寫法：

(function foo(){...})()
(function(){}(..))

兩種寫法功能上是一致的.
IIFE能夠把他們當函數調用比傳遞參數。

(function IIFE(global){
    //code
})(window)

通常都是將window傳遞進去，但如今不少js的非遊覽器應用領域沒有window，因此jquery一些處理辦法是又接受一個factory參數：

For CommonJS and CommonJS-like environments where a proper window
is present, execute the factory and get jQuery.
For environments that do not have a window with a document(such as Node.js), expose a factory as module.exports.
This accentuates the need for the creation of a real window.e.g. var jQuery = require("jquery")(window);

不少前端框架都想要$這個命名空間，jQuery一開始很弱小，但又想要跟多人使用，所以實現了一種多庫並存的機制。後成爲不少小庫的標配，實現很簡單：

var
    // Map over jQuery in case of overwrite
    _jQuery = window.jQuery,

    // Map over the $ in case of overwrite
    _$ = window.$;

jQuery.noConflict = function( deep ) {
    if ( window.$ === jQuery ) {
        window.$ = _$;
    }

    if ( deep && window.jQuery === jQuery ) {
        window.jQuery = _jQuery;
    }

    return jQuery;
};

其實就是先把可能存在同名變量保存起來，再放回去。當用戶執行

jQuery.noConflict();

就將$的控制權交出去，之後執行$()的時候就是其餘庫了，若是將deep變量傳入true，則將jQuery的控制權也交出去了。

 1.2 對象擴展

不少庫在擴展方法裏還需判斷是否覆蓋和合並問題，但基本實現對庫的擴展比較簡單，就是添加一個對象罷了。

function extend(destination,source){
    for(var destination in source){
        destination[property] = source[property];
    }
    return destination;
}

1.3 數組化

這個解決的問題是講不少像document.getElementByTagName()方法返回的HTMLCollection或者NodeList這樣的類數組轉化爲數組。
爲何作這樣轉化，由於數組有不少便利的操做。
各個庫的實現原理核心也就是調用Array.prototype.slice.call(arguments);這個方法。

1.4 類型的斷定

js的經典問題：isXXX系列。主要是js的typeof這些自帶的檢測方法不靠譜.這類方法在框架實現來講很重要，但說實話本身沒怎麼仔細看，由於要考慮各個遊覽器的兼容，感受都是帶有很技巧方面的知識，暫且翻過。