操刀 requirejs，自己動手寫一個

前沿 寫在文章的最前面

這篇文章講的是，我怎么去寫一個 requirejs 。

去 github 上fork一下，順便star~

requirejs，眾所周知，是一個非常出名的js模塊化工具，可以讓你使用模塊化的方式組織代碼，並異步加載你所需要的部分。balabala 等等好處不計其數。

之所以寫這篇文章，是做一個總結。目前打算動一動，換一份工作。感謝 一線碼農 大大幫忙推了攜程，得到了面試的機會。

面試的時候，聊着聊着感覺問題都問在了自己的“點”上，應答都挺順利，於是就慢慢膨脹了。在說到模塊化的時候，我腦子一抽，憑着感覺說了一下requirejs實現的大概步驟，充滿了表現欲望，廢話一堆。僥幸不可能當場讓我寫一遍，算是過了，事后嘗試了一下，在這里跟大家分享一下我的實現。

結構划分

上面是我划分的項目結構：

1. tool，工具模塊，存放便捷方法，很多地方需要用到。
2. async，異步處理模塊，主要實現了 promise 和 deferred 。邏輯上的異步。
3. requirejs -> loader ，amd加載器，處理模塊的依賴和異步加載。物理上的異步。

因為對於異步流程控制方面，研究過一段時間，所以這里第一時間想到的就是 promise ，如果用這個來做，所有的模塊放入字典，路徑做key，promise做value，所有依賴都結束之后，才進行下一步操作。 不用管復雜的依賴關系，把邏輯盡量簡單化：

1. 首先有一個字典，存放所有的模塊。key放地址，value放promise，promise在模塊加載完畢的時候resolve。
2. 如果依賴某個模塊，先根據路徑從字典找key，存在就用該promise，不存在就去加載該模塊並放入字典，並使用該模塊的promise。
3. 所有的模塊，我只用它的 promise ，在它的回調中寫我的后續操作。它的resolve應該單獨抽離出來，屬於異步加載方面。

大致思路有了，當然實際寫的時候肯定困難重重，不過沒關系，遇到問題再去解決。

考慮到代碼的簡易性，以及我的個人習慣。我打算用類似於 jquery 的 $.Deferred() 和它的promise，與es6的promise有一定的出入。這樣代碼書寫更簡易，並且邏輯上更清晰，es6的promise用起來確實稍顯麻煩。我需要的是一個 pub/sub 模式，一個地方觸發，多個回調執行的並行方式，es6的promise，需要在then中一次次返回，並且resolve起來也不方便，最最主要的是需要 polyfill 一下，而我想自己寫，寫我熟悉且喜歡的代碼 。

callbacks模塊

回調模塊 callbacks，熟悉jquery的朋友接下來可能會覺得使用方式很熟悉，沒錯，我受jq的影響算是比較深的。以前在學習jq源碼的時候，就覺得這個很好用，你可以從我的代碼里面看到jq的影子 :

import _ from '../tool/tool';

/**
 * 基礎回調模塊
 * 
 * @export
 * @returns callbacks
 */
export default function () {
    let list = [],
        _args = (arguments[0] || '').split(' '),           // 參數數組
        fireState = 0,                                     // 觸發狀態  0-未觸發過 1-觸發中  2-觸發完畢
        stopOnFalse = ~_args.indexOf('stopOnFalse'),       // stopOnFalse - 如果返回false就停止
        once = ~_args.indexOf('once'),                     // once - 只執行一次，即執行完畢就清空
        memory = ~_args.indexOf('memory') ? [] : null,     // memory - 保持狀態
        fireArgs = [];                                     // fire 參數

    /**
     * 添加回調函數
     * 
     * @param {any} cb
     * @returns callbacks
     */
    function add(cb) {
        if (memory && fireState == 2) {  // 如果是memory模式，並且已經觸發過
            cb.apply(null, fireArgs);
        }

        if (disabled()) return this;      // 如果被disabled

        list.push(cb);
        return this;
    }

    /**
     * 觸發
     * 
     * @param {any} 任意參數
     * @returns callbacks
     */
    function fire() {
        if (disabled()) return this; // 如果被禁用

        fireArgs = _.makeArray(arguments); // 保存 fire 參數

        fireState = 1; // 觸發中 

        _.each(list, (index, cb) => { // 依次觸發回調
            if (cb.apply(null, fireArgs) === false && stopOnFalse) { // stopOnFalse 模式下，遇到false會停止觸發
                return false;
            }
        });

        fireState = 2; // 觸發結束

        if (once) disable(); // 一次性列表

        return this;
    }

    function disable() {    // 禁止
        list = undefined;
        return this;
    }

    function disabled() {  // 獲取是否被禁止
        return !list;
    }

    return {
        add: add,
        fire: fire,
        disable: disable,
        disabled: disabled
    };
}

 

這是一個工廠方法，每次所需的對象由該方法生成，用閉包來隱藏局部變量，私有方法。而最后暴露（發布）出來的對象，用 pub/sub 模式，提供了 訂閱 ， 觸發 ，禁用，查看禁用 4個方法。 這里要說的是 ，提供了3個參數：stopOnFalse、once、memory。觸發的時候，按照訂閱順序依次觸發，如果是 stopOnFalse 模式，當某個訂閱的函數，返回是 false 的時候，停止整個觸發過程。 如果是 once ，表示每個函數只能執行一次，在執行過后，會被移除隊列。而 memory 狀態下，在 callback 觸發后，會被保持狀態，之后添加的方法，添加后會直接執行。

這三種模式，傳參的時候直接傳入字符串，可以隨意組合，用空格分開，比如：callbacks('once memory')

該模塊用於整個項目中，處理所有的回調。使用方式類似於jquery的：$.Callbacks(...)

 

deferred 模塊

deferred ，是對promise的父級模塊，主要提供了 觸發 和 訂閱 2個方法。 promise 是對 deferred 的一個再封裝，僅僅暴露出其中的 訂閱 方法。

從概念上來說，很像 C# 中的委托和事件。

import _ from '../tool/tool';
import callbacks from './callbacks';

/**
 * deferred 模塊
 * 
 * @export
 * @returns deferred
 */
export default function () {
    let tuples = [   // 用於存放一系列回調的 tuple 結構
        // 方法名 - 接口名稱 - 回調列表 - 最終狀態
        ['resolve', 'then', callbacks('once memory'), 'resolved'],
        ['reject', 'catch', callbacks('once memory'), 'rejected']
    ];

    let _state = 'pending';    // 當前狀態

    let dfd = {                // 返回的延遲對象
        state: function () {
            return _state;
        },      // 狀態
        promise: function () { // promise - 僅提供接口用於注冊/訂閱
            let self = this;
            let pro = {
                state: self.state
            };
            _.each(tuples, (i, tuple) => { // 訂閱接口
                pro[tuple[1]] = self[tuple[1]];
            });
            return pro;
        }
    };

    _.each(tuples, (i, tuple) => {
        dfd[tuple[0]] = function () {       // 觸發
            if (_state != "pending") return this;
            tuple[2].fire.apply(tuple[2], _.makeArray(arguments));
            _state = tuple[3];
            return this;
        };
        dfd[tuple[1]] = function (cb) {     // 綁定
            tuple[2].add(cb);
            return this;
        };
    });

    return dfd;
}

deferred 使用了 callbacks 模塊來處理其中所有的回調函數。是一個工廠方法，deferred() 返回的是一個deferred對象(發布)，包含了3種狀態：pending，resolved，rejected；提供了 then 和 catch 去訂閱；通過 resolve 和 reject 去 改變(觸發) 狀態。

deferred 對象，提供了一個 promise() 方法去返回一個promise對象，區別就是promise對象屏蔽了觸發的方法。就像委托和事件，前者可以訂閱和觸發，而后者只能訂閱。之所以如此，是想只提供訂閱的接口，而如何觸發，何時觸發，由我自己控制，是我邏輯內部的事情，而其他部分，只需要知道也只能去訂閱。

Tuple ，是一種約定的、按照某個規則進行存儲的數據結構(類？)， c# ，typescript 中都有這個東西，之前在學習jq的時候，看到了它的內部也這么用，於是學到了。其實在我看來，使用tuple，就是節約代碼，笑。不必要去定義某個類，或者其他的東西，只需要在定義和使用的時候，遵循某個約定好的規則，那么就可以省去一大堆的代碼，讓邏輯部分也清晰不少。

all 模塊

import deferred from './deferred';
import _ from '../tool/tool';

export default function (promises) {
    promises = _.makeArray(promises);
    let len = promises.length,    // promise 個數
        resNum = 0,               // resolve 的數量
        argsArr = new Array(len), // 每個reject的參數
        dfd = deferred(),    // 用於當前task控制的deferred
        pro = dfd.promise();      // 用於當前返回的promise

    if (len === 0) {   // 如果是個空數組，直接就返回了
        dfd.resolve();
        return pro;
    }

    function addThen() {   // 檢測是否全部完成
        resNum++;
        let args = _.makeArray(arguments);
        let index = args.shift(); // 當前參數在promises中的索引

        if (args.length <= 1) {             // 保存到數組，用戶回調
            argsArr[index] = args[0];
        } else {
            argsArr[index] = args;
        }

        if (resNum >= len) {         // 如果所有promise都resolve完畢
            dfd.resolve(argsArr);
        }
    }

    function addCatch() {  // 如果某個promise發生了reject 
        var args = _.makeArray(arguments);
        dfd.reject(...args);
    }

    _.each(promises, (index, promise) => {
        promise.then(function () {
            addThen(index, ...arguments);
        }).catch(addCatch);
    });

    return pro;
}

 

all，其實就是es6中， Promise.all 或者 $.when 的一種實現。參數是一系列的promise，本身返回一個promise對象，在所有參數中的promise對象都處於 resolved狀態 時，本身也會被resolve掉，由此來執行通過then訂閱的方法。

all本身，是通過一個觸發器來實現在最后一個promise完成時回調。內部用一個int值來存儲resolved的參數的個數，給每個參數通過 then 添加一個回調來執行這個觸發器，當 完成數量 >= 參數個數 的時候，就表示所有promise已經完成，可以進行后續的操作。 用 >= 來代替 == 是個好習慣 :D

 

---

 

模塊分析 模塊定義、模塊獲取

到此為止，async 部分已經完成，准備工作已經做好。我們開始 amd 模塊部分的分析。

amd 模塊在我看來，主要分為兩個部分：模塊定義、模塊獲取。先說模塊獲取：

模塊獲取

模塊的獲取，並不復雜。先從字典中根據路徑(key)去找該模塊，如果有該模塊，就去加載。如果不存在，就去加載該js，根據onload來確定該模塊的名稱(如果是匿名模塊)；然后根據該模塊的返回值==》 一個promise，給該promise添加一個回調，去管理 getModule 的返回值狀態==》另一個promise。在使用一個模塊的時候，從本質上來講，是給該模塊的promise的then接口添加回調函數，一層層往下處理。

模塊定義

這里的重點是 加載模塊，大家都知道，amd的每個模塊，對應一個js文件，加載模塊就是去加載這個js。

再看看模塊的定義，有 3種重載：

1. define(sender)
2. define(deps,sender)
3. define(name,deps,sender)

sender 是一個函數，或者某個對象。deps 是一個數組，表示該模塊依賴的其他模塊。name 是表示當前模塊是一個命名模塊，強制使用該名稱，一般是打包工具生成這種模塊，不建議自己直接這么寫。

從上面我們可以看到，模塊是通過執行一個函數，用傳參的方式把所要用到的模塊加載到某個地方保存起來。那么看到這個你們有沒有想到什么呢？我首先想到的就是 jsonp ，動態執行一個函數，把數據放進去，對得上，完美。從這個思路，我實驗了一下，在這里直接說結論： script標簽在動態加載到頁面后，首先去服務器拿對應地址的數據，然后在文件下載完全后，執行該js文件中的內容，執行完畢后，會觸發該script標簽的load事件。

也就是說，通過給load事件注冊方法，我們可以知道最后一個加載的模塊(js文件)，來自哪里，什么時候執行完全。這樣就確定了，並行加載多個js文件時，匿名模塊所屬來源。這里不討論兼容的問題，低版本ie對應的是其他事件:onreadystatechange，我沒用過。

 

在模塊加載后，我們用一個函數來將模塊填充到字典中，類似於一個 觸發器，每次加載一個模塊，模塊中包含這個函數並執行，處理依賴關系，並將最后的結果保存。

在模塊的加載中，因為可能會同時加載多個模塊（js文件），並不能確定到底是哪一個先加載完全。但是我們知道，js是單線程，在js文件下載完全后，會先把js文件中的內容執行完畢，然后再觸發load事件，這個順序是可以保證的，所以就可以使用一個變量來保存最近加載的模塊，來知道匿名模塊的所屬路徑。

不論是匿名模塊，還是命名模塊，都可能依賴其他的模塊，所以並不能確定在模塊加載完之后，就可以立即使用，要等待所有的依賴項都加載完畢，所以一個模塊的最終返回值我使用的一個promise來保存。這樣就可以方便的在狀態變更后才添加下一步的處理操作，從邏輯上簡化整個流程控制。

模塊入口 require

/**
 * 程序入口， require
 * 
 * @export
 * @param {any} deps 依賴項
 * @param {any} callback 程序入口
 */
export function requireModule(deps, callback) {
    setTimeout(function () {  // 避免阻塞同文件中，使用名稱定義的模塊
        deps = deps.map(url => getModule(_.resolvePath(core.rootUrl, url)));
        all(deps).then(function (args) {
            callback(...args);
        });
    }, 0);
}

 這里的代碼比較簡單，唯一要注意的就是這個 setTimeout(action,0)  。因為js是單線程，從上往下依次執行。模塊可能會被打包工具合並成一個文件，那么在一個文件中就含有了模塊入口、命名模塊。如果模塊入口在最上方，，，在依賴某個命名模塊的時候，就會試圖去加載這個名稱的js文件，而這注定是會失敗的。所以使用一個setTimeout，把模塊入口的邏輯，放入事件隊列中，讓js邏輯線程優先去執行文件后面的代碼，就避免了這個問題。

loader 模塊代碼

import core from './core';
import deferred from './async/deferred';
import all from './async/all';
import _ from './tool/tool';

let lastNameDfd = null; // 最后一個加載的module的name的 deferred


/**
 * 程序入口， require
 * 
 * @export
 * @param {any} deps 依賴項
 * @param {any} callback 程序入口
 */
export function requireModule(deps, callback) {
    setTimeout(function () {  // 避免阻塞同文件中，使用名稱定義的模塊
        deps = deps.map(url => getModule(_.resolvePath(core.rootUrl, url)));
        all(deps).then(function (args) {
            callback(...args);
        });
    }, 0);
}

/**
 * 模塊定義，url,deps,sender
 * 
 * @export
 */
export function defineModule() {
    let args = _.makeArray(arguments);
    let name = "",     // 模塊名稱
        proArr,   // 模塊依賴
        sender; // 模塊的主體

    let argsLen = args.length; // 參數的個數，用來重載

    if (argsLen == 1) {  // 重載一下   sender
        proArr = [];
        sender = args[0];
    }
    else if (argsLen == 2) {  // deps,sender
        proArr = args[0];
        sender = args[1];
    }
    else if (argsLen == 3) {  // name,deps,sender
        name = args[0];
        proArr = args[1];
        sender = args[2];
    }
    else {
        throw Error('參數個數異常');
    }

    let dfdThen = (_name, lastModule) => {
        _name = _.normalizePath(_name); // 名稱，路徑

        proArr = proArr.map(url => {  // 各個依賴項 
            url = _.resolvePath(_name, url); // 以當前路徑為基准，合並路徑
            return getModule(url);
        });

        all(proArr).then(function (_args) {  // 在依賴項加載完畢后，進行模塊處理
            _args = _args || [];
            let result; // 最終結果
            let _type = _.type(sender); // 回調模塊類型

            if (_type == "function") {
                result = sender(..._args);
            }
            else if (_type == "object") {
                result = sender;
            }
            else {
                throw Error("參數類型錯誤");
            }

            lastModule.resolve(result);

        });
    };

    if (argsLen < 3) {  // 如果是匿名模塊，使用 onload 來判斷js的名稱／路徑
        lastNameDfd = deferred();  // 先獲取當前模塊名稱

        lastNameDfd.then(dfdThen);
    }
    else {  // 如果是自定義模塊名，直接觸發,命名模塊直接添加
        let lastModule = deferred();
        let dictName = _.resolvePath(core.rootUrl, name);
        core.dict[dictName] = lastModule;

        let namedDfd = deferred().then(dfdThen);

        setTimeout(function () {   // 避免同文件中，多個命名模塊注冊阻塞，先把名字注冊了，具體內容等待一下 event loop 
            namedDfd.resolve(dictName, lastModule);
        }, 0);
    }

}

/**
 * 根據 路徑/名稱 ，加載/獲取模塊的promise
 * 
 * @param {any} name
 * @returns promise
 */
function getModule(name) {
    let dict = core.dict;
    if (dict[name]) {
        return dict[name];
    }

    let script = addScript(name);

    let dfd = deferred();
    dict[name] = dfd;

    script.onload = function () {  // 模塊加載完畢，立馬會觸發 load 事件，由此來確定模塊所屬
        let lastModule = deferred();
        lastNameDfd.resolve(name, lastModule); // 綁定當前模塊的名稱

        lastModule.then(result => {  // 在模塊加載完畢之后，觸發該模塊的 resolve
            dfd.resolve(result);
        });
    };

    return dfd.promise();
}

/**
 * 添加 script 標簽
 * 
 * @export
 * @param {any} name
 * @returns
 */
export function addScript(name) {
    let script = document.createElement('script');
    script.type = "text/javascript";
    script.async = true;
    script.charset = "utf-8";
    script.src = name + ".js";
    document.head.appendChild(script);
    return script;
}

 

core 模塊

/**
 * 默認核心載體
 */
export default {
    /**
     *  版本
     */
    ver: "0.0.1",
    /**
     * 模塊定義名稱
     */
    defineName: "define",
    /**
     * 程序入口函數
     */
    requireName: "require",
    /**
     * 暴露的全局名稱，可用於配置
     */
    coreName: "requirejs",
    /**
     * 根目錄，入口文件目錄
     */
    rootUrl: "",
    /**
     * 依賴模塊存儲字典
     */
    dict: {  // 模塊字典 {key:string,value:promise}

    }
};

core，主要存的是一些配置信息，和模塊的字典，比較簡單。

 

 

總結、Github

寫到這里，就已經結束了。本文講了對於requirejs，我的實現思路，列舉了可能遇到的問題，及我的解決方式。希望能給大家的學習提供點幫助。

去 github 上fork一下，順便star~

上面是github的地址，求star啊，作為一個虛榮的人，我對這個很看重的，哈哈，也就這點追求了。再次感激 一線碼農 大哥的推薦，還有 linkFly 的經驗指導。