模仿RequireJs的用法寫一個低配版的模塊加載器

Contents

1. 前言
2. 回顧RequireJs的基本用法
3. 實現(xiàn)原理
4. 使用方法
5. 總結(jié)

前言

前段時間一直想用單頁開發(fā)技術(shù)寫一個自己的個人網(wǎng)站(使用es2015)，寫了一部分之后，發(fā)現(xiàn)單頁應(yīng)用因為只有一個頁面，所以第一次加載index.html時就要下載所有js文件，并且為了好管理各個部分的狀態(tài)，需要劃分頁面的各個功能區(qū)為各個模塊，es2015本身是不支持一些模塊規(guī)范的(比如AMD、CMD、CommonJs等)，所以只能這樣模擬實現(xiàn)：

  // global
  var spa = (function(){...})();

  // module blog
  spa.blog = (function(){
    ...
    return {
      do1: do1,
      do2: do2,
    };
  })();

  // module model
  spa.model = (function(){...})();

  // module shell
  spa.model = (function(){...})();

并且各個模塊之間又存在一些依賴關(guān)系，在index.html里面寫script標(biāo)簽來載入模塊時需要寫很多個，同時也要根據(jù)依賴關(guān)系來確定書寫順序，頁面邏輯混亂，如下：

  <script type="text/javascript" src="/javascripts/spa.utils.js"></script>
  <script type="text/javascript" src="/javascripts/spa.model.js"></script>
  <script type="text/javascript" src="/javascripts/spa.mock.js"></script>
  <script type="text/javascript" src="/javascripts/spa.chat.js"></script>
  <script type="text/javascript" src="/javascripts/spa.blog.js"></script>
  <script type="text/javascript" src="/javascripts/spa.action.js"></script>
  <script type="text/javascript" src="/javascripts/spa.shell.js"></script>

之前用過RequireJs(一個流行的JavaScript模塊加載器)，它是用同構(gòu)js的架構(gòu)來寫的，所以node.js環(huán)境下也能使用。我想自己可以嘗試一下寫一個低配版的js模塊加載器 requireJs-nojsja 來應(yīng)付一下我這個單頁網(wǎng)站，當(dāng)然只是大致模仿了主要功能。

回顧RequireJs的基本用法

1. 配置模塊信息

  requirejs.config({
      baseUrl: '/javascripts',  // 配置根目錄
      paths: {
        moduleA: 'a.js',
        moduleB: 'b.js',
        moduleC: 'c.js',
      },
      shim: {  // 配置不遵循amd規(guī)范的模塊
        moduleC: {
          exports: 'log',
          deps: ['moduleA']
        }
      },
  });

2. 定義一個模塊

  define(name, ['moduleA', 'moduleB'], function(a, b){
    ...
    return {
      do: function() {
        a.doSomething();
        b.doAnother();
      }
    };
  });

3. 引用一個模塊

  // 引用模塊
  require(['moduleA', 'moduleB'], function(a, b) {
    a.doSomething();
    b.doAnother();
  });

實現(xiàn)原理

1. config方法確定各個模塊的依賴關(guān)系

  /* 記錄模塊訪問地址和模塊的依賴等信息 */
  Require.config({
    baseUrl: '/javascripts/',
    paths: {
      'moduleA': './moduleA.js',  // 相對于當(dāng)前目錄
      'moduleB': '/javascripts/moduleB.js',  // 不使用baseUrl
      'moduleC': 'moduleC.js',

      'moduleD': {
        url: 'moduleD.js',
        deps: ['moduleE', 'moduleF'],
      },
      ...
    },
    shim: {
      'moduleH': {
        url: 'moduleH.js',
        exports: 'log',
      },
    }
  });

2. 數(shù)據(jù)請求過程分析

(1) config配置模塊信息時并不會觸發(fā)網(wǎng)絡(luò)請求
(2) 在index.js主入口文件里使用require方法引用多個模塊時，根據(jù)config配置文件構(gòu)造一下所有模塊的依賴分析樹。按深度優(yōu)先或是廣度優(yōu)先來遍歷這個依賴樹，將所有依賴按照依賴順序放進一個數(shù)組，最后進行數(shù)組去重處理，因為會出現(xiàn)依賴重復(fù)的情況

  var dependsTree = new Tree('dependsTree');
  var dependsArray = [];
  var dependsFlag = {};  // 解決循環(huán)依賴

  // 創(chuàng)建樹
  setDepends(depends, dependsTree);
  // 得到依賴數(shù)組
  sortDepends(dependsArray, dependsTree);
  // 數(shù)據(jù)去重
  arrayFilter(dependsArray);

  return dependsArray;

(3) 創(chuàng)建XHR對象異步下載數(shù)組里面的所有js文件，按照依賴順序挨個解析js代碼，解析完成后觸發(fā)回調(diào)函數(shù)，回調(diào)函數(shù)里傳入各個模塊的引用

  // ajax下載代碼文件
  Utils.request(url, 'get', null, function(responseText){
    // 暫時保存
    _temp[module_name] = responseText;
  });

  // 文件下載完成后eval解析代碼
  array.map(function(jsText){
    ...
    eval(jsText);
    ...
  });

  // 調(diào)用回調(diào)函數(shù)
  callback.apply(null, [dep1, dep2, dep3]);

使用方法

詳細說明: github README.md

總結(jié)

1. 下載js代碼時我用了ajax來實現(xiàn)，所以對于跨域文件和CDN會有點問題，這個可以改成創(chuàng)建script標(biāo)簽，指定標(biāo)簽src，最后將document.head.appendChild(script)，這樣來解決，其它的諸如使用XMLHttpRequest 2.0，iframe等也可以的，可以實驗一下。
2. 解析代碼時我用了eval的方法，這個eval在JavaScript里面是眾說紛紜，可以看看這個，如果是用了上面創(chuàng)建script標(biāo)簽的方法的話，就不用自己eval了。
3. 發(fā)現(xiàn)一個bug，存在循環(huán)依賴時，代碼會報錯，還沒去解決。RequireJs是這樣處理的：模塊a依賴b，同時b依賴a，這種情況下b的模塊函數(shù)被調(diào)用時，被傳入的a是undefined，所以需要自己在b里面手動require一下a。