前言

　　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="https://www.cnblogs.com/CandyManPing/archive/2020/11/04/jquery-1.10.1.js"></script>
  <script type="text/javascript" src="https://www.cnblogs.com/CandyManPing/archive/2020/11/04/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()
  })

6、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 模塊輸出的是值的參考，
• CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出介面，

加載 & 編譯

因為 CommonJS 加載的是一個物件（module.exports），物件只有在有腳本運行的時候才能生成，而 ES6 模塊不是一個物件，只是一個靜態的定義，在代碼決議階段就會生成，

ES6 模塊是編譯時輸出介面，因此有如下2個特點：

• import 命令會被 JS 引擎靜態分析，優先于模塊內的其他內容執行
• export 命令會有變數宣告提升的效果,所以import 和 export 命令在模塊中的位置并不影響程式的輸出，

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

標籤：其他

上一篇：頁面結構標簽在HTML與CSS中使用規范

下一篇：HTML文本語意標簽標準使用