当前位置：网站首页>前端模組化簡單總結

前端模組化簡單總結

2020-11-06 01:28:00 【itread01】

前言

　　JavaScript初期就是為了實現簡單的頁面互動邏輯，如今CPU、瀏覽器效能得到了極大的提升，很多頁面邏輯遷移到了客戶端，前端程式碼日益膨脹，此時在js方面就會考慮怎麼樣來管理使用模組化規範去管理。

　　無論是什麼語言一旦發展到一定地步，其工程化能力和可維護性勢必得到相應的發展。模組化這件事，無論在哪個程式設計領域都是常見的事情，模組化存在的意義就是為了增加可複用性，以儘可能少的程式碼是實現個性化的需求。同為前端三劍客之一的 CSS 早在 2.1 的版本就提出了 @import 來實現模組化，但是 JavaScript 直到 ES6 才出現官方的模組化方案： ES Module (import、export)。儘管早期 JavaScript 語言規範上不支援模組化，但這並沒有阻止 JavaScript 的發展，官方沒有模組化標準開發者們就開始自己建立規範，自己實現規範。

前端模組化

　　JavaScript 在早期的設計中就沒有模組、包甚至類的概念，雖然 ES6 中有了 class 關鍵字，那也只是個語法糖。隨意隨著專案複雜度的增加，開發者必然需要模擬類的功能，來隔離、封裝、組織複雜的 JavaScript 程式碼，而這種封裝和隔離，也被被我們稱之為模組化。

　　模組就是一個實現特定功能的檔案 or 程式碼塊。隨著前端工程體系建設的愈發成熟，或許模組化的概念已經在前端圈子裡已經耳熟能詳了。但是對於很多開發者而言，ES6 中的 export、import，nodejs 中的 require、exports.xx、module.exports到底有什麼區別？為什麼又有 CommonJS，又有 AMD，CMD，UMD？區別是什麼？甚至我們在編寫 ts 檔案的時候，還需要在配置檔案裡面說明什麼模組方式，在專案中使用的時候，我們又是否真正知道，你用的到底是基於哪一種規範的模組化？

模組化的價值

可維護性，每一個模組都是獨立的。良好的設計能夠極大的降低專案的耦合度。以便於其能獨立於別的功能被整改。至少維護一個獨立的功能模組，比維護一坨凌亂的程式碼要容易很多。
減少全域性變數汙染，前端開發的初期，我們都在為全域性變數而頭疼，因為經常會觸發一些難以排查且非技術性的 bug。當一些無關的程式碼一不小心重名了全域性變數，我們就會遇到煩人的“名稱空間汙染”的問題。在模組化規範沒有確定之前，其實我們都在極力的避免於此。（後文會介紹）
可複用性，前端模組功能的封裝，極大的提高了程式碼的可複用性。這點應該就不用詳細說明了。想想從 npm 上找 package 的時候，是在幹啥？
方便管理依賴關係，在模組化規範沒有完全確定的時候，模組之間相互依賴的關係非常的模糊，完全取決於 js 檔案引入的順序。粗俗！絲毫沒有技術含量，不僅依賴模糊且難以維護。

模組化的進化過程

1、函式封裝

回到我們剛剛說的模組的定義，模組就是一個實現特定功能的檔案 or 程式碼塊（這是我自己給定義的）。專業定義是，在程式設計中，為完成某一功能所需的一段程式或子程式；或指能由編譯程式、裝配程式等處理的獨立程式單位；或指大型軟體系統的一部分。而函式的一個功能就是實現特定邏輯的一組語句打包。並且 JavaScript 的作用域就是基於函式的，所以最原始之處，函式必然是作為模組化的第一步。

將不同的功能封裝成不同的函式

編碼: 將不同的功能封裝成不同的全域性函式
問題: 汙染全域性名稱空間, 容易引起命名衝突或資料不安全，而且模組成員之間看不出直接關係，模組之間的關係模糊

//函式1
function fn1(){
  //statement
}
//函式2
function fn2(){
  //statement
}

2、namespace模式

也可以理解為物件封裝，其實就是把相關函式、變數在外面加了一層

let module1 = {
  let tag : 1,
  let name:'module1',
  
  fun1(){
    console.log('this is fun1')
  },
  
  fun2(){
    console.log('this is fun2')
  }
}

我們在使用的時候呢，就直接

module1.fun2();

優點

一定程度上優化了命名衝突，降低了全域性變數汙染的風險
有一定的模組封裝和隔離，並且還可以進一步語義化一些

缺點

並沒有實質上改變命名衝突的問題
外部可以隨意修改內部成員變數，還是容易產生意外風險

3、IIFE模式：立即執行匿名函式(閉包)

let global = 'Hello, I am a global variable :)';

(function () {
  // 在函式的作用域中下面的變數是私有的

  const myGrades = [93, 95, 88, 0, 55, 91];

  let average = function() {
    let total = myGrades.reduce(function(accumulator, item) {
      return accumulator + item}, 0);

    return 'Your average grade is ' + total / myGrades.length + '.';
  }

  let failing = function(){
    let failingGrades = myGrades.filter(function(item) {
      return item < 70;});

    return 'You failed ' + failingGrades.length + ' times.';
  }

  console.log(failing());
  console.log(global);

// 需要暴露的api
return {
  // something
}
}());

// 控制檯顯示：'You failed 2 times.'
// 控制檯顯示：'Hello, I am a global variable :)'

這種方法的好處在於，你可以在函式內部使用區域性變數，而不會意外覆蓋同名全域性變數，但仍然能夠訪問到全域性變數

類似如上的 IIFE ，還有非常多的演進寫法

比如引入依賴：

把內部需要的變數傳進去。

// module.js檔案
(function(window, $) {
  let data = 'www.baidu.com'
  //操作資料的函式
  function foo() {
    //用於暴露有函式
    console.log(`foo() ${data}`)
    $('body').css('background', 'red')
  }
  function bar() {
    //用於暴露有函式
    console.log(`bar() ${data}`)
    otherFun() //內部呼叫
  }
  function otherFun() {
    //內部私有的函式
    console.log('otherFun()')
  }
  //暴露行為
  window.myModule = { foo, bar }
})(window, jQuery)

使用

 // index.html檔案
  <!-- 引入的js必須有一定順序 -->
  <script type="text/javascript" src="jquery-1.10.1.js"></script>
  <script type="text/javascript" src="module.js"></script>
  <script type="text/javascript">
    myModule.foo()
  </script>

優點

實現了基本的封裝
只暴露對外的方法操作，利用閉包實現了類似 public 和 private 的概念

缺點

模組依賴關係模糊
模組與模組之間不好管理

　　上述的所有解決方案，雖然每種方法都可行，但是始終沒有哪一種可以很好的解決變數汙染、各個模組之間依賴關係清晰、方便管理、與第三方程式碼方便整合。隨著大前端時代的到來，在2009年提出了 CommonJS 規範，並且nodeJs 直接用該規範來管理模組化，隨著時間的遷移，現在 JavaScript 模組規範也就有了：CommonJS、AMD、CMD、UMD、ES6 模組化。

4、CommonJS

　　CommonJS 是 JavaScript 的一個模組化規範（http://www.commonjs.org/），主要用於服務端Nodejs 中。根據規範，每一個檔案既是一個模組，其內部定義的變數是屬於這個模組的，不會汙染全域性變數。每個模組內部，module變數代表當前模組，這個變數是一個物件，它的exports屬性（即module.exports）是對外的介面。載入某個模組，其實是載入該模組的module.exports屬性。

CommonJS 的核心思想是通過 require 方法來同步載入所依賴的模組，然後通過 exports 或者 module.exprots 來匯出對外暴露的介面。

基本用法

暴露模組：module.exports = value 或 exports.xxx = value
引入模組：require(xxx)，如果是第三方模組，xxx為模組名；如果是自定義模組，xxx為模組檔案路徑

// example.js
let x = 5;
let addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

let example = require('./example.js');
console.log(example.x); // 5
console.log(example.addX(1)); // 6

require命令用於載入模組檔案。require命令的基本功能是，讀入並執行一個JavaScript檔案，然後返回該模組的exports物件，如果沒有發現指定模組，會報錯，如果存在多個 exports 只有第一個exports 有效。

require 是載入這個檔案然後執行，在返回、輸出 exports 這個物件

console.log('開始載入了') // 會輸出 開始載入了

function run (val) {
  console.log(val)
}

特點

以檔案為一個單元模組，程式碼執行在模組作用域內，不會汙染全域性變數
同步載入模組，在服務端直接讀取本地磁碟沒問題，不太適用於瀏覽器
模組可以載入多次，但是隻會在第一次載入時執行，然後在載入，就是讀取的快取檔案。需清理快取後才可再次讀取檔案內容
模組載入的順序，按照其在程式碼中出現的順序
匯出的是值的拷貝，這一點和 ES6 有著很大的不同（後面會介紹到）

補充知識點

Node 中，一個檔案是一個模組->module

原始碼定義如下：

function Module(id = '', parent) {
  this.id = id;
  this.path = path.dirname(id);
  this.exports = {};
  this.parent = parent;
  updateChildren(parent, this, false);
  this.filename = null;
  this.loaded = false;
  this.children = [];
}

//例項化一個模組
var module = new Module(filename, parent);

CommonJS 的一個模組，就是一個指令碼檔案。require命令第一次載入該指令碼，就會執行整個指令碼，然後在記憶體生成一個物件。

{
  id: '...',
  exports: { ... },
  loaded: true,
  ...
}

　　上面程式碼就是 Node 內部載入模組後生成的一個物件。該物件的id屬性是模組名，exports屬性是模組輸出的各個介面，loaded屬性是一個布林值，表示該模組的指令碼是否執行完畢。其他還有很多屬性。以後需要用到這個模組的時候，就會到exports屬性上面取值。即使再次執行require命令，也不會再次執行該模組，而是到快取之中取值。也就是說，CommonJS 模組無論載入多少次，都只會在第一次載入時執行一次，以後再載入，就返回第一次執行的結果，除非手動清除系統快取。

關於AMD、CMD

　　CommonJS 在 Node.js 環境下取得了很不錯的成功，很多人想把commonJs 規範推向瀏覽器端，但是瀏覽器不能像伺服器那樣直接讀取磁碟上的內容所以又有了後面的AMD、CMD規範。ES6 在語言標準的層面上，實現了模組功能，而且實現得相當簡單，完全可以取代現有的 CommonJS 和 AMD 規範，成為瀏覽器和伺服器通用的模組解決方案，因為我自己也是在近幾年才做前端， AMD、CMD 並沒有太多使用，所以AMD、CMD 這裡只是做簡單的介紹。

5、AMD

AMD 全稱為 Asynchromous Module Definition（非同步模組定義）

AMD 是 RequireJS 在推廣過程中對模組定義的規範化產出，它是一個在瀏覽器端模組化開發的規範。 AMD 模式可以用於瀏覽器環境並且允許非同步載入模組，同時又能保證正確的順序，也可以按需動態載入模組。

特點

非同步載入模組，不會造成因網路問題而出現的假死
顯式地列出其依賴關係，並以函式(定義此模組的那個函式)引數的形式將這些依賴進行注入
在模組開始時，載入所有所需依賴

定義模組

define(id?: String, dependencies?: String[], callback: Function|Object);

id,一個可選引數，類似給模組取個名字，但是卻是模組的唯一標識。如果沒有提供則取指令碼的檔名
dependence，依賴的模組陣列
callback，工廠方法，模組初始化的一些操作。如果是函式，只被執行一次。如果是物件，則為模組的輸出值

使用模組

require([moduleName],callback);

使用

//article.js檔案
// 定義有依賴的模組
define(['user'], function(user) {
  let name = 'THE LAST TIME'
  function consoleMsg() {
    console.log(`${name} by ${user.getAuthor()}`);
  }
  // 暴露模組
  return { consoleMsg }
})

// 呼叫 article 模組種的 consoleMsg
require(['article'], function(alerter) {
    article.consoleMsg()
  })

關於 require.js 的使用，仔細看文件，其實還是有很多知識點的。但是鑑於我們著實現在使用不多（我也不熟），所以這裡也就參考網上優秀文章和自己實踐，拋磚引玉。

6、CMD

　　CMD 即Common Module Definition通用模組定義，CMD 是 SeaJS 在推廣過程中對模組定義的規範化產出，是阿里的玉伯提出來，它和 AMD 其實非常的相似，檔案即為模組。CMD最主要的區別是實現了按需載入，推崇依賴就近的原則，模組延遲執行，而 AMD 所依賴模組式提前執行（requireJS 2.0 後也改為了延遲執行）

所以AMD和CMD最大的區別是對依賴模組的執行時機處理不同，注意不是載入的時機或者方式不同。CMD 規範儘量保持簡單，並與 CommonJS 規範保持了很大的相容性。通過 CMD 規範書寫的模組，可以很容易在 Node.js 中執行。

在 CMD 規範中，一個模組就是一個檔案。格式如下：

define(factory);

define 是一個全域性函式，用來定義模組，引數factory可以是物件、字串、函式

factory 為物件、字串時，表示模組的介面就是該物件、字串。比如可以如下定義一個 JSON 資料模組：

define({ "foo": "bar" });

也可以通過字串定義模板模組：

define('I am a template. My name is {{name}}.');

factory 為函式時，表示是模組的構造方法。

執行該構造方法，可以得到模組向外提供的介面。factory 方法在執行時，預設會傳入三個引數：require、exports 和 module：

define(function(require, exports, module) {
  // 模組程式碼
});

使用sea.js

/** sea.js **/
// 定義模組 math.js
define(function(require, exports, module) {
    var $ = require('jquery.js');
    var add = function(a,b){
        return a+b;
    }
    exports.add = add;
});
// 載入模組
seajs.use(['math.js'], function(math){
    var sum = math.add(1+2);
});

關於 sea.js 的使用，仔細看文件，其實還是有很多知識點的。但是鑑於我們著實現在使用不多（我也不熟），所以這裡也就參考網上優秀文章和自己實踐，拋磚引玉。

7、UMD

UMD 是 AMD 和 CommonJS 的綜合產物。如上所說，AMD 的用武之地是瀏覽器，非阻塞式載入。CommonJS 主要用於服務端 Nodejs 中使用。所以人們就想到了一個通用的模式 UMD（universal module definition）。來解決跨平臺的問題。
沒錯！就是 ifElse 的寫法。
核心思想就是：先判斷是否支援Node.js的模組（exports）是否存在，存在則使用Node.js模組模式。
在判斷是否支援AMD（define是否存在），存在則使用AMD方式載入模組。

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        //AMD
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        //Node, CommonJS之類的
        module.exports = factory(require('jquery'));
    } else {
        //瀏覽器全域性變數(root 即 window)
        root.returnExports = factory(root.jQuery);
    }
}(this, function ($) {
    //方法
    function myFunc(){};
    //暴露公共方法
    return myFunc;
}));

8、ES Module

　　在 ES Module 之前，社群制定了一些模組載入方案，最主要的有 CommonJS 和 AMD 兩種。前者用於伺服器，後者用於瀏覽器。ES Module 在語言標準的層面上，實現了模組功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規範，成為瀏覽器和伺服器通用的模組解決方案。

ES Module 的設計思想是儘量的靜態化，使得編譯時就能確定模組的依賴關係，以及輸入和輸出的變數。CommonJS 和 AMD 模組，都只能在執行時確定這些東西。

　　CommonJS 和 AMD 模組，其本質是在執行時生成一個物件進行匯出，稱為“執行時載入”，沒法進行“編譯優化”，而 ES Module 不是物件，而是通過 export 命令顯式指定輸出的程式碼，再通過 import 命令輸入。這稱為“編譯時載入”或者靜態載入，即 ES Module 可以在編譯時就完成模組載入，效率要比 CommonJS 模組的載入方式高。當然，這也導致了沒法引用 ES Module 模組本身，因為它不是物件。

由於 ES Module 是編譯時載入，使得靜態分析成為可能。有了它，就能進一步拓寬 JavaScript 的語法，比如引入巨集（macro）和型別檢驗（type system）這些只能靠靜態分析實現的功能。

特點

靜態編譯
輸出的值引用，而非值拷貝
import 只能寫在頂層，因為是靜態語法

9、CommonJs、ESM 區別

CommonJs	ES6 Module
執行時載入；CommonJs模組就是物件（module.exports屬性）），即在輸入時是先載入整個模組、執行模組，生成一個物件，然後再從這個物件上面讀取方法。	編譯時載入；ES6 模組不是物件，而是通過 export 命令顯式指定輸出的程式碼，import時採用靜態命令的形式。即在import時可以指定載入某個輸出值，而不是載入整個模組。
輸出的是值的拷貝（一旦輸出一個值，模組內部的變化就影響不到這個值。）	輸出的是值的引用（JS 引擎對指令碼靜態分析的時候，遇到模組載入命令import，就會生成一個只讀引用。等到指令碼真正執行時，再根據這個只讀引用，到被載入的那個模組裡面去取值。即原始值變了，import載入的值也會跟著變。因此，ES6 模組是動態引用，並且不會快取值，模組裡面的變數繫結其所在的模組。）