詳細介紹JavaScript 模組化及SeaJs源碼分析

網頁的結構越來越複雜，簡直可以看做一個簡單APP，如果還像以前那樣把所有的程式碼都放到一個檔案裡面會有一些問題：

• #全域變數互相影響

• JavaScript檔案變大，影響載入速度

• 結構混亂、很難維護

和後端（如Java）比較就可以看出明顯的差距。 2009年Ryan Dahl創建了node.js項目，將JavaScript用於伺服器編程，這標誌「JS模組化編程」正式誕生。

基本原理

模組就是一些功能的集合，那麼可以將一個大文件分割成一些小文件，在各個文件中定義不同的功能，然後在HTML中引入：

var module1 = new Object({
    _count : 0,
    m1 : function (){
        //...
    },
    m2 : function (){
        //...
    }
});

這樣做的壞處是：把模組中所有的成員都暴露了！我們知道函數的本地變數是​​沒法從外面進行訪問的，那麼可以用立即執行函數來優化：

var module1 = (function(){
    var _count = 0;
    var m1 = function(){
        //...
    };
    var m2 = function(){
        //...
    };
    return {
        m1 : m1, m2 : m2
    };
})();

大家定義模組的方式可能五花八門，如果都能按照一定的規範來，那好處會非常大：可以互相引用！

模組規格

在node.js中定義math.js模組如下：

function add(a, b){
    return a + b;
}
exports.add = add;

在其他模組中使用的時候使用全域require函數載入即可：

var math = require('math');
math.add(2,3);

在伺服器上同步require是沒有問題的，但是瀏覽器在網路環境就不能這麼玩了，於是有了異步的AMD規格：

require(['math'], function (math) {// require([module], callback);
    math.add(2, 3);
});

模組的定義方式如下（模組可以依賴其他的模組）：

define(function (){ // define([module], callback);
    var add = function (x,y){
        return x+y;
    };
    return { add: add };
});

用RequireJS可以載入很多其他資源（看這裡），很好很強大！在工作中用的比較多的是SeaJS，所使用的規範稱為CMD，推崇（應該是指非同步模式）：

as lazy as possible！

對於依賴的模組的處理方式和AMD的差別在於：

AMD是提前執行（依賴前置），CMD是延遲執行（依賴就近）。

在CMD中定義模組的方式如下：

define(function(require, exports, module) {
    var a = require('./a');
    a.doSomething();
    var b = require('./b');
    b.doSomething();
});

使用方式直接看文檔，這裡就不贅述了！

SeaJS原始碼分析

剛接觸模組化的時候感覺這個太簡單了，不就是：

建立script標籤的時候設定一下onload和src！

事實上是這樣的，但也不完全是！下面來開始看SeaJS的程式碼（sea-debug.js）。一個模組在載入的過程中可能會經歷下面幾種狀態：

var STATUS = Module.STATUS = {
    // 1 - The `module.uri` is being fetched
    FETCHING: 1,
    // 2 - The meta data has been saved to cachedMods
    SAVED: 2,
    // 3 - The `module.dependencies` are being loaded
    LOADING: 3,
    // 4 - The module are ready to execute
    LOADED: 4,
    // 5 - The module is being executed
    EXECUTING: 5,
    // 6 - The `module.exports` is available
    EXECUTED: 6,
    // 7 - 404
    ERROR: 7
}

記憶體中用Modul物件來維護模組的資訊：

function Module(uri, deps) {
    this.uri = uri
    this.dependencies = deps || [] // 依赖模块ID列表
    this.deps = {} // 依赖模块Module对象列表
    this.status = 0 // 状态
    this._entry = [] // 在模块加载完成之后需要调用callback的模块
}

在頁面上啟動模組系統需要使用seajs.use方法：

seajs.use(‘./main’, function(main) {// 依赖及回调方法
    main.init();
});

載入過程的整體邏輯可以在Module.prototype.load中看到：

Module.prototype.load = function() {
    var mod = this
    if (mod.status >= STATUS.LOADING) {
        return
    }
    mod.status = STATUS.LOADING
    var uris = mod.resolve() // 解析依赖模块的URL地址
    emit("load", uris)
    for (var i = 0, len = uris.length; i < len; i++) {
        mod.deps[mod.dependencies[i]] = Module.get(uris[i])// 从缓存取或创建
    }
    mod.pass(); // 将entry传递给依赖的但还没加载的模块
    if (mod._entry.length) {// 本模块加载完成
        mod.onload()
        return
    }
    var requestCache = {};
    var m;
    // 加载依赖的模块
    for (i = 0; i < len; i++) {
        m = cachedMods[uris[i]]
        if (m.status < STATUS.FETCHING) {
            m.fetch(requestCache)
        } else if (m.status === STATUS.SAVED) {
            m.load()
        }
    }
    for (var requestUri in requestCache) {
        if (requestCache.hasOwnProperty(requestUri)) {
            requestCache[requestUri]()
        }
    }
}

整體上邏輯很順就不講了，唯一比較繞的就是_entry數組了。網路上沒有找到比較簡單易懂的文章，於是看著程式碼連蒙帶猜地大概看懂了，其實只要記住它的目標即可：

當依賴的所有模組載入完成後執行回調函數！

換種說法：

在陣列_entry中保存了目前模組載入完成之後、哪些模組的依賴可能載入完成的清單（依賴的反向關係） ！

舉個例子，模組A依賴模組B、C、D，那麼經過pass之後的狀態如下：

##此時A中的

remain為3，也就是說它還有三個依賴的模組沒有載入完成！而如果模組B依賴模組E、F，那麼在它load的時候會將A也傳遞出去：

有幾個細節：

1. #已經載入完成的模組不會被傳播；

##已經傳播過一次的模組不會再傳播；
如果依賴的模組正在載入那麼會遞歸傳播；
維護好依賴關係之後就可以透過

Module.prototype.fetch

來載入模組，有兩種sendRequest的實作方式：

importScripts
script

2. ##然後根據結果執行
load

或

error方法。所有依賴的模組都載入完成後就會執行onload方法：

Module.prototype.onload = function() {
    var mod = this
    mod.status = STATUS.LOADED
    for (var i = 0, len = (mod._entry || []).length; i < len; i++) {
        var entry = mod._entry[i]
        if (--entry.remain === 0) {
            entry.callback()
        }
    }
    delete mod._entry
}

其中--entry.remain

就相當於告訴entry對應的模組：你的依賴清單裡面已經有完成了！而

entry.remain === 0則表示它所依賴的所有的模組都已經載入完成了！那麼此時將執行回呼函數：

for (var i = 0, len = uris.length; i < len; i++) {
    exports[i] = cachedMods[uris[i]].exec();
}
if (callback) {
    callback.apply(global, exports)// 执行回调函数
}

腳本下載完成之後會馬上執行define

方法來維護模組的資訊：

沒有明確地指定dependencies時會用parseDependencies來用正規匹配方法中的require()片段（指定依賴列表是個好習慣）。

接著執行

factory

方法來產生模組的資料：

var exports = isFunction(factory) ?
    factory.call(mod.exports = {}, require, mod.exports, mod) :
    factory

然后执行你在seajs.use中定义的callback方法：

if (callback) {
    callback.apply(global, exports)
}

当你写的模块代码中require时，每次都会执行factory方法：

function require(id) {
    var m = mod.deps[id] || Module.get(require.resolve(id))
    if (m.status == STATUS.ERROR) {
        throw new Error('module was broken: ' + m.uri)
    }
    return m.exec()
}

到这里核心的逻辑基本上讲完了，补一张状态的转换图：

以后在用的时候就可以解释一些诡异的问题了！

总结

模块化非常好用，因此在ECMAScript 6中也开始支持，但是浏览器支持还是比较堪忧的~~

以上是詳細介紹JavaScript 模組化及SeaJs源碼分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！