【模組化程式設計】理解requireJS-實現一個簡單的模組載入器

在前文中我們不止一次強調過模組化程式設計的重要性，以及其可以解決的問題：

① 解決單檔案變數命名衝突問題

② 解決前端多人協作問題

③ 解決檔案依賴問題

④ 按需載入（這個說法其實很假了）

⑤ ......

為了深入瞭解載入器，中間閱讀過一點requireJS的原始碼，但對於很多同學來說，對載入器的實現依舊不太清楚

事實上不通過程式碼實現，單單憑閱讀想理解一個庫或者框架只能達到一知半解的地步，所以今天便來實現一個簡單的載入器

載入器原理分析

分與合

事實上，一個程式執行需要完整的模組，以下程式碼為例：

  //求得績效係數
  var performanceCoefficient = function () {
    return 0.2;
  };

  //住房公積金計算方式
  var companyReserve = function (salary) {
    return salary * 0.2;
  };

  //個人所得稅
  var incomeTax = function (salary) {
    return salary * 0.2;
  };

  //基本工資
  var salary = 1000;

  //最終工資
  var mySalary = salary + salary * performanceCoefficient();
  mySalary = mySalary - companyReserve(mySalary) - incomeTax(mySalary - companyReserve(mySalary));
  console.log(mySalary);

我一份完整的工資來說，公司會有績效獎勵，但是其演算法可能非常複雜，其中可能涉及到出勤率，完成度什麼的，這裡暫時不管

而有增便有減，所以我們會交住房公積金，也會扣除個人所得稅，最終才是我的工資

對於完整的程式來說上面的流程缺一不可，但是各個函式中卻有可能異常的複雜，跟錢有關係的東西都複雜，所以單單是公司績效便有可能超過1000行程式碼

於是我們這邊便會開始分：

<script src="companyReserve.js" type="text/javascript"></script>
<script src="incomeTax.js" type="text/javascript"></script>
<script src="performanceCoefficient.js" type="text/javascript"></script>
<script type="text/javascript">

  //基本工資
  var salary = 1000;

  //最終工資
  var mySalary = salary + salary * performanceCoefficient();
  mySalary = mySalary - companyReserve(mySalary) - incomeTax(mySalary - companyReserve(mySalary));
  console.log(mySalary);

</script>

上面的程式碼表明上是“分”開了，事實上也造成了“合”的問題，我要如何才能很好的把它們重新合到一起呢，畢竟其中的檔案可能還涉及到依賴，這裡便進入我們的require與define

require與define

事實上，上面的方案仍然是以檔案劃分，而不是以模組劃分的，若是檔名發生變化，頁面會涉及到改變，其實這裡應該有一個路徑的對映處理這個問題

var pathCfg = {
  'companyReserve': 'companyReserve',
  'incomeTax': 'incomeTax',
  'performanceCoefficient': 'performanceCoefficient'
};

於是我們一個模組便對應了一個路徑js檔案，剩下的便是將之對應模組的載入了，因為前端模組涉及到請求。所以這種寫法：

companyReserve = requile('companyReserve');

對於前端來說是不適用的，就算你在哪裡看到這樣做了，也一定是其中做了一些“手腳”，這裡我們便需要依據AMD規範了：

require.config({
  'companyReserve': 'companyReserve',
  'incomeTax': 'incomeTax',
  'performanceCoefficient': 'performanceCoefficient'
});

require(['companyReserve', 'incomeTax', 'performanceCoefficient'], function (companyReserve, incomeTax, performanceCoefficient) {
  //基本工資
  var salary = 1000;

  //最終工資
  var mySalary = salary + salary * performanceCoefficient();
  mySalary = mySalary - companyReserve(mySalary) - incomeTax(mySalary - companyReserve(mySalary));
  console.log(mySalary);
});

這裡便是一個標準的requireJS的寫法了，首先定義模組以及其路徑對映，其中定義依賴項

require(depArr, callback)

一個簡單完整的模組載入器基本就是這個樣子了，首先是一個依賴的陣列，其次是一個回撥，回撥要求依賴項全部載入才能執行，並且回撥的引數便是依賴項執行的結果，所以一般要求define模組具有一個返回值

方案有了，那麼如何實現呢？

實現方案

說到模組載入，人們第一反應都是ajax，因為無論何時，能拿到模組檔案的內容，都是模組化的基本，但是採用ajax的方式是不行的，因為ajax有跨域的問題

而模組化方案又不可避免的要處理跨域的問題，所以使用動態建立script標籤載入js檔案便成為了首選，但是，不使用ajax的方案，對於實現難度來說還是有要求

PS：我們實際工作中還會有載入html模板檔案的場景，這個稍候再說

通常我們是這樣做的，require作為程式入口，排程javascript資源，而載入到各個define模組後，各個模組便悄無聲息的建立script標籤載入

載入結束後便往require模組佇列報告自己載入結束了，當require中多有依賴模組皆載入結束時，便執行其回撥

原理大致如此，剩下的只是具體實現，而後在論證這個理論是否靠譜即可

載入器閹割實現

核心模組

根據以上理論，我們由整體來說，首先以入口三個基本函式來說

var require = function () {
};
require.config = function () {
};
require.define = function () {
};

這三個模組比不可少：

① config用以配置模組與路徑的對映，或者還有其他用處

② require為程式入口

③ define設計各個模組，響應require的排程

然後我們這裡會有一個建立script標籤的方法，並且會監聽其onLoad事件

④ loadScript

其次我們載入script標籤後，應該有一個全域性的模組物件，用於儲存已經載入好的模組，於是這裡提出了兩個需求：

⑤ require.moduleObj 模組儲存物件

⑥ Module，模組的建構函式

有了以上核心模組，我們形成了如下程式碼：

(function () {

  var Module = function () {
    this.status = 'loading'; //只具有loading與loaded兩個狀態
    this.depCount = 0; //模組依賴項
    this.value = null; //define函式回撥執行的返回
  };


  var loadScript = function (url, callback) {

  };

  var config = function () {

  };

  var require = function (deps, callback) {

  };

  require.config = function (cfg) {

  };

  var define = function (deps, callback) {

  };

})();

於是接下來便是具體實現，然後在實現過程中補足不具備的介面與細節，往往在最後的實現與最初的設計沒有半毛錢關係......

程式碼實現

這塊最初實現時，本來想直接參考requireJS的實現，但是我們老大笑眯眯的拿出了一個他寫的載入器，我一看不得不承認有點妖

於是這裡便借鑑了其實現，做了簡單改造：

(function () {

  //儲存已經載入好的模組
  var moduleCache = {};

  var require = function (deps, callback) {
    var params = [];
    var depCount = 0;
    var i, len, isEmpty = false, modName;

    //獲取當前正在執行的js程式碼段，這個在onLoad事件之前執行
    modName = document.currentScript && document.currentScript.id || 'REQUIRE_MAIN';

    //簡單實現，這裡未做引數檢查，只考慮陣列的情況
    if (deps.length) {
      for (i = 0, len = deps.length; i < len; i++) {
        (function (i) {
          //依賴加一
          depCount++;
          //這塊回撥很關鍵
          loadMod(deps[i], function (param) {
            params[i] = param;
            depCount--;
            if (depCount == 0) {
              saveModule(modName, params, callback);
            }
          });
        })(i);
      }
    } else {
      isEmpty = true;
    }

    if (isEmpty) {
      setTimeout(function () {
        saveModule(modName, null, callback);
      }, 0);
    }

  };

  //考慮最簡單邏輯即可
  var _getPathUrl = function (modName) {
    var url = modName;
    //不嚴謹
    if (url.indexOf('.js') == -1) url = url + '.js';
    return url;
  };

  //模組載入
  var loadMod = function (modName, callback) {
    var url = _getPathUrl(modName), fs, mod;

    //如果該模組已經被載入
    if (moduleCache[modName]) {
      mod = moduleCache[modName];
      if (mod.status == 'loaded') {
        setTimeout(callback(this.params), 0);
      } else {
        //如果未到載入狀態直接往onLoad插入值，在依賴項載入好後會解除依賴
        mod.onload.push(callback);
      }
    } else {

      /*
      這裡重點說一下Module物件
      status代表模組狀態
      onLoad事實上對應requireJS的事件回撥，該模組被引用多少次變化執行多少次回撥，通知被依賴項解除依賴
      */
      mod = moduleCache[modName] = {
        modName: modName,
        status: 'loading',
        export: null,
        onload: [callback]
      };

      _script = document.createElement('script');
      _script.id = modName;
      _script.type = 'text/javascript';
      _script.charset = 'utf-8';
      _script.async = true;
      _script.src = url;

      //這段程式碼在這個場景中意義不大，註釋了
      //      _script.onload = function (e) {};

      fs = document.getElementsByTagName('script')[0];
      fs.parentNode.insertBefore(_script, fs);

    }
  };

  var saveModule = function (modName, params, callback) {
    var mod, fn;

    if (moduleCache.hasOwnProperty(modName)) {
      mod = moduleCache[modName];
      mod.status = 'loaded';
      //輸出項
      mod.export = callback ? callback(params) : null;

      //解除父類依賴，這裡事實上使用事件監聽較好
      while (fn = mod.onload.shift()) {
        fn(mod.export);
      }
    } else {
      callback && callback.apply(window, params);
    }
  };

  window.require = require;
  window.define = require;

})();

首先這段程式碼有一些問題：

沒有處理引數問題，字串之類皆未處理

未處理迴圈依賴問題

未處理CMD寫法

未處理html模板載入相關

未處理引數配置，baseUrl什麼都沒有搞

基於此想實現打包檔案也不可能

......

但就是這100行程式碼，便是載入器的核心，程式碼很短，對各位理解載入器很有幫助，裡面有兩點需要注意：

① requireJS是使用事件監聽處理本身依賴，這裡直接將之放到了onLoad陣列中了

② 這裡有一個很有意思的東西

document.currentScript

這個可以獲取當前執行的程式碼段

requireJS是在onLoad中處理各個模組的，這裡就用了一個不一樣的實現，每個js檔案載入後，都會執行require（define）方法

執行後便取到當前正在執行的檔案，並且取到檔名載入之，正因為如此，連script的onLoad事件都省了......

demo實現

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
</head>
<body>
</body>
<script src="require.js" type="text/javascript"></script>
<script type="text/javascript">
  require(['util', 'math', 'num'], function (util, math, num) {

    num = math.getRadom() + '_' + num;
    num = util.formatNum(num);
    console.log(num);
  });
</script>
</html>

//util
define([], function () {
  return {
    formatNum: function (n) {
      if (n < 10) return '0' + n;
      return n;
    }
  };
});

//math
define(['num'], function (num) {
  return {
    getRadom: function () {
      return parseInt(Math.random() * num);
    }
  };
});

//num
define([], function () {
  return 10;
});

小結

今天我們實現了一個簡單的模組載入器，通過他希望可以幫助各位瞭解requireJS或者seaJS，最後順利進入模組化程式設計的行列