模仿RequireJs的用法實(shí)現(xiàn)一個(gè)低配版的模塊加載器

WalkerXu 發(fā)布于2019-08-22 13:48 / 1035人閱讀

摘要：我想自己可以嘗試一下寫一個(gè)低配版的模塊加載器來應(yīng)付一下我這個(gè)單頁網(wǎng)站，當(dāng)然只是大致模仿了主要功能。是這樣處理的模塊依賴，同時(shí)依賴，這種情況下的模塊函數(shù)被調(diào)用時(shí)，被傳入的是，所以需要自己在里面手動(dòng)一下。

Contents

前言

回顧RequireJs的基本用法

實(shí)現(xiàn)原理

使用方法

總結(jié)

前言

前段時(shí)間一直想用單頁開發(fā)技術(shù)寫一個(gè)自己的個(gè)人網(wǎng)站(使用es2015)，寫了一部分之后，發(fā)現(xiàn)單頁應(yīng)用因?yàn)橹挥幸粋€(gè)頁面，所以第一次加載index.html時(shí)就要下載所有js文件，并且為了好管理各個(gè)部分的狀態(tài)，需要?jiǎng)澐猪撁娴母鱾€(gè)功能區(qū)為各個(gè)模塊，es2015本身是不支持一些模塊規(guī)范的(比如AMD、CMD、CommonJs等)，所以只能這樣模擬實(shí)現(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(){...})();

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

之前用過RequireJs(一個(gè)流行的JavaScript模塊加載器)，它是用同構(gòu)js的架構(gòu)來寫的，所以node.js環(huán)境下也能使用。我想自己可以嘗試一下寫一個(gè)低配版的js模塊加載器 requireJs-nojsja 來應(yīng)付一下我這個(gè)單頁網(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. 定義一個(gè)模塊

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

3. 引用一個(gè)模塊

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

實(shí)現(xiàn)原理 1. config方法確定各個(gè)模塊的依賴關(guān)系

  /* 記錄模塊訪問地址和模塊的依賴等信息 */
  Require.config({
    baseUrl: "/javascripts/",
    paths: {
      "moduleA": "./moduleA.js",  // 相對(duì)于當(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ù)請(qǐng)求請(qǐng)求過程分析

(1) config配置模塊信息時(shí)并不會(huì)觸發(fā)網(wǎng)絡(luò)請(qǐng)求
(2) 在index.js主入口文件里使用require方法引用多個(gè)模塊時(shí)，根據(jù)config配置文件構(gòu)造一下所有模塊的依賴分析樹。按深度優(yōu)先或是廣度優(yōu)先來遍歷這個(gè)依賴樹，將所有依賴按照依賴順序放進(jìn)一個(gè)數(shù)組，最后進(jìn)行數(shù)組去重處理，因?yàn)闀?huì)出現(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對(duì)象異步下載數(shù)組里面的所有js文件，按照依賴順序挨個(gè)解析js代碼，解析完成后觸發(fā)回調(diào)函數(shù)，回調(diào)函數(shù)里傳入各個(gè)模塊的引用

  // ajax下載代碼文件
  Utils.request(url, "get", null, function(responseText){
    // 暫時(shí)保存
    _temp[module_name] = responseText;
  });
    
  // 文件下載完成后eval解析代碼
  array.map(function(jsText){
    ...
    eval(jsText);
    ...
  });
    
  // 調(diào)用回調(diào)函數(shù)
  callback.apply(null, [dep1, dep2, dep3]);

使用方法

詳細(xì)說明: github README.md

總結(jié)

下載js代碼時(shí)我用了ajax來實(shí)現(xiàn)，所以對(duì)于跨域文件和CDN會(huì)有點(diǎn)問題，這個(gè)可以改成創(chuàng)建script標(biāo)簽，指定標(biāo)簽src，最后將document.head.appendChild(script)，這樣來解決，其它的諸如使用XMLHttpRequest 2.0，iframe等也可以的，可以實(shí)驗(yàn)一下。

解析代碼時(shí)我用了eval的方法，這個(gè)eval在JavaScript里面是眾說紛紜，可以看看這個(gè)，如果是用了上面創(chuàng)建script標(biāo)簽的方法的話，就不用自己eval了。

發(fā)現(xiàn)一個(gè)bug，存在循環(huán)依賴時(shí)，代碼會(huì)報(bào)錯(cuò)，還沒去解決。RequireJs是這樣處理的：模塊a依賴b，同時(shí)b依賴a，這種情況下b的模塊函數(shù)被調(diào)用時(shí)，被傳入的a是undefined，所以需要自己在b里面手動(dòng)require一下a。