前端模組化詳解(完整版)

  • 2019 年 10 月 10 日
  • 筆記

前言

在JavaScript發展初期就是為了實現簡單的頁面交互邏輯，寥寥數語即可；如今CPU、瀏覽器性能得到了極大的提升，很多頁面邏輯遷移到了客戶端（表單驗證等），隨著web2.0時代的到來，Ajax技術得到廣泛應用，jQuery等前端庫層出不窮，前端程式碼日益膨脹，此時在JS方面就會考慮使用模組化規範去管理。 本文內容主要有理解模組化，為什麼要模組化，模組化的優缺點以及模組化規範,並且介紹下開發中最流行的CommonJS, AMD, ES6、CMD規範。本文試圖站在小白的角度，用通俗易懂的筆調介紹這些枯燥無味的概念，希望諸君閱讀後，對模組化編程有個全新的認識和理解！

建議下載本文源程式碼，自己動手敲一遍，請猛戳GitHub個人部落格(全集)

一、模組化的理解

1.什麼是模組?

  • 將一個複雜的程式依據一定的規則(規範)封裝成幾個塊(文件), 並進行組合在一起
  • 塊的內部數據與實現是私有的, 只是向外部暴露一些介面(方法)與外部其它模組通訊

2.模組化的進化過程

  • 全局function模式 : 將不同的功能封裝成不同的全局函數
    • 編碼: 將不同的功能封裝成不同的全局函數
    • 問題: 污染全局命名空間, 容易引起命名衝突或數據不安全，而且模組成員之間看不出直接關係
function m1(){    //...  }  function m2(){    //...  }
  • namespace模式 : 簡單對象封裝
    • 作用: 減少了全局變數，解決命名衝突
    • 問題: 數據不安全(外部可以直接修改模組內部的數據)
let myModule = {    data: 'www.baidu.com',    foo() {      console.log(`foo() ${this.data}`)    },    bar() {      console.log(`bar() ${this.data}`)    }  }  myModule.data = 'other data' //能直接修改模組內部的數據  myModule.foo() // foo() other data

這樣的寫法會暴露所有模組成員，內部狀態可以被外部改寫。

  • IIFE模式：匿名函數自調用(閉包)
    • 作用: 數據是私有的, 外部只能通過暴露的方法操作
    • 編碼: 將數據和行為封裝到一個函數內部, 通過給window添加屬性來向外暴露介面
    • 問題: 如果當前這個模組依賴另一個模組怎麼辦?
// index.html文件  <script type="text/javascript" src="module.js"></script>  <script type="text/javascript">      myModule.foo()      myModule.bar()      console.log(myModule.data) //undefined 不能訪問模組內部數據      myModule.data = 'xxxx' //不是修改的模組內部的data      myModule.foo() //沒有改變  </script>
// module.js文件  (function(window) {    let data = 'www.baidu.com'    //操作數據的函數    function foo() {      //用於暴露有函數      console.log(`foo() ${data}`)    }    function bar() {      //用於暴露有函數      console.log(`bar() ${data}`)      otherFun() //內部調用    }    function otherFun() {      //內部私有的函數      console.log('otherFun()')    }    //暴露行為    window.myModule = { foo, bar } //ES6寫法  })(window)

最後得到的結果：

  • 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>

上例子通過jquery方法將頁面的背景顏色改成紅色，所以必須先引入jQuery庫，就把這個庫當作參數傳入。這樣做除了保證模組的獨立性，還使得模組之間的依賴關係變得明顯。

3. 模組化的好處

  • 避免命名衝突(減少命名空間污染)
  • 更好的分離, 按需載入
  • 更高復用性
  • 高可維護性

4. 引入多個 <script>後出現出現問題

  • 請求過多

首先我們要依賴多個模組，那樣就會發送多個請求，導致請求過多

  • 依賴模糊

我們不知道他們的具體依賴關係是什麼，也就是說很容易因為不了解他們之間的依賴關係導致載入先後順序出錯。

  • 難以維護

以上兩種原因就導致了很難維護，很可能出現牽一髮而動全身的情況導致項目出現嚴重的問題。 模組化固然有多個好處，然而一個頁面需要引入多個js文件，就會出現以上這些問題。而這些問題可以通過模組化規範來解決，下面介紹開發中最流行的commonjs, AMD, ES6, CMD規範。

二、模組化規範

1.CommonJS

(1)概述

Node 應用由模組組成，採用 CommonJS 模組規範。每個文件就是一個模組，有自己的作用域。在一個文件裡面定義的變數、函數、類，都是私有的，對其他文件不可見。在伺服器端，模組的載入是運行時同步載入的；在瀏覽器端，模組需要提前編譯打包處理。

(2)特點

  • 所有程式碼都運行在模組作用域，不會污染全局作用域。
  • 模組可以多次載入，但是只會在第一次載入時運行一次，然後運行結果就被快取了，以後再載入，就直接讀取快取結果。要想讓模組再次運行，必須清除快取。
  • 模組載入的順序，按照其在程式碼中出現的順序。

(3)基本語法

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

此處我們有個疑問：CommonJS暴露的模組到底是什麼? CommonJS規範規定，每個模組內部，module變數代表當前模組。這個變數是一個對象，它的exports屬性（即module.exports）是對外的介面。載入某個模組，其實是載入該模組的module.exports屬性。

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

上面程式碼通過module.exports輸出變數x和函數addX。

var example = require('./example.js');//如果參數字元串以「./」開頭，則表示載入的是一個位於相對路徑  console.log(example.x); // 5  console.log(example.addX(1)); // 6

require命令用於載入模組文件。require命令的基本功能是，讀入並執行一個JavaScript文件，然後返回該模組的exports對象。如果沒有發現指定模組，會報錯。

(4)模組的載入機制

CommonJS模組的載入機制是，輸入的是被輸出的值的拷貝。也就是說，一旦輸出一個值，模組內部的變化就影響不到這個值。這點與ES6模組化有重大差異（下文會介紹），請看下面這個例子：

// lib.js  var counter = 3;  function incCounter() {    counter++;  }  module.exports = {    counter: counter,    incCounter: incCounter,  };

上面程式碼輸出內部變數counter和改寫這個變數的內部方法incCounter。

// main.js  var counter = require('./lib').counter;  var incCounter = require('./lib').incCounter;    console.log(counter);  // 3  incCounter();  console.log(counter); // 3

上面程式碼說明，counter輸出以後，lib.js模組內部的變化就影響不到counter了。這是因為counter是一個原始類型的值，會被快取。除非寫成一個函數，才能得到內部變動後的值。

(5)伺服器端實現

①下載安裝node.js

②創建項目結構

注意：用npm init 自動生成package.json時，package name(包名)不能有中文和大寫|-modules|-module1.js|-module2.js|-module3.js|-app.js|-package.json{"name":"commonJS-node","version":"1.0.0"}

③下載第三方模組

npm install uniq--save// 用於數組去重

④定義模組程式碼

//module1.js  module.exports = {    msg: 'module1',    foo() {      console.log(this.msg)    }  }
//module2.js  module.exports = function() {    console.log('module2')  }
//module3.js  exports.foo = function() {    console.log('foo() module3')  }  exports.arr = [1, 2, 3, 3, 2]
// app.js文件  // 引入第三方庫，應該放置在最前面  let uniq = require('uniq')  let module1 = require('./modules/module1')  let module2 = require('./modules/module2')  let module3 = require('./modules/module3')    module1.foo() //module1  module2() //module2  module3.foo() //foo() module3  console.log(uniq(module3.arr)) //[ 1, 2, 3 ]

⑤通過node運行app.js

命令行輸入 node app.js，運行JS文件

(6)瀏覽器端實現(藉助Browserify)

①創建項目結構

|-js|-dist//打包生成文件的目錄|-src//源碼所在的目錄|-module1.js|-module2.js|-module3.js|-app.js//應用主源文件|-index.html//運行於瀏覽器上|-package.json{"name":"browserify-test","version":"1.0.0"}

②下載browserify

  • 全局: npm install browserify -g
  • 局部: npm install browserify –save-dev

③定義模組程式碼(同伺服器端)

注意： index.html文件要運行在瀏覽器上，需要藉助browserify將 app.js文件打包編譯，如果直接在 index.html引入 app.js就會報錯！

④打包處理js

根目錄下運行 browserify js/src/app.js-o js/dist/bundle.js

⑤頁面使用引入

在index.html文件中引入 <scripttype="text/javascript"src="js/dist/bundle.js"></script>

2.AMD

CommonJS規範載入模組是同步的，也就是說，只有載入完成，才能執行後面的操作。AMD規範則是非同步載入模組，允許指定回調函數。由於Node.js主要用於伺服器編程，模組文件一般都已經存在於本地硬碟，所以載入起來比較快，不用考慮非同步載入的方式，所以CommonJS規範比較適用。但是，如果是瀏覽器環境，要從伺服器端載入模組，這時就必須採用非同步模式，因此瀏覽器端一般採用AMD規範。此外AMD規範比CommonJS規範在瀏覽器端實現要來著早。

(1)AMD規範基本語法

定義暴露模組:

//定義沒有依賴的模組  define(function(){     return 模組  })
//定義有依賴的模組  define(['module1', 'module2'], function(m1, m2){     return 模組  })

引入使用模組:

require(['module1', 'module2'], function(m1, m2){     使用m1/m2  })

(2)未使用AMD規範與使用require.js

通過比較兩者的實現方法，來說明使用AMD規範的好處。

  • 未使用AMD規範
// dataService.js文件  (function (window) {    let msg = 'www.baidu.com'    function getMsg() {      return msg.toUpperCase()    }    window.dataService = {getMsg}  })(window)
// alerter.js文件  (function (window, dataService) {    let name = 'Tom'    function showMsg() {      alert(dataService.getMsg() + ', ' + name)    }    window.alerter = {showMsg}  })(window, dataService)
// main.js文件  (function (alerter) {    alerter.showMsg()  })(alerter)
// index.html文件  <div><h1>Modular Demo 1: 未使用AMD(require.js)</h1></div>  <script type="text/javascript" src="js/modules/dataService.js"></script>  <script type="text/javascript" src="js/modules/alerter.js"></script>  <script type="text/javascript" src="js/main.js"></script>

最後得到如下結果：

這種方式缺點很明顯：首先會發送多個請求，其次引入的js文件順序不能搞錯，否則會報錯！

  • 使用require.js

RequireJS是一個工具庫，主要用於客戶端的模組管理。它的模組管理遵守AMD規範，RequireJS的基本思想是，通過define方法，將程式碼定義為模組；通過require方法，實現程式碼的模組載入。 接下來介紹AMD規範在瀏覽器實現的步驟：

①下載require.js, 並引入

  • 官網: http://www.requirejs.cn/
  • github : https://github.com/requirejs/requirejs

然後將require.js導入項目: js/libs/require.js

②創建項目結構

|-js|-libs|-require.js|-modules|-alerter.js|-dataService.js|-main.js|-index.html

③定義require.js的模組程式碼

// dataService.js文件  // 定義沒有依賴的模組  define(function() {    let msg = 'www.baidu.com'    function getMsg() {      return msg.toUpperCase()    }    return { getMsg } // 暴露模組  })
//alerter.js文件  // 定義有依賴的模組  define(['dataService'], function(dataService) {    let name = 'Tom'    function showMsg() {      alert(dataService.getMsg() + ', ' + name)    }    // 暴露模組    return { showMsg }  })
// main.js文件  (function() {    require.config({      baseUrl: 'js/', //基本路徑 出發點在根目錄下      paths: {        //映射: 模組標識名: 路徑        alerter: './modules/alerter', //此處不能寫成alerter.js,會報錯        dataService: './modules/dataService'      }    })    require(['alerter'], function(alerter) {      alerter.showMsg()    })  })()
// index.html文件  <!DOCTYPE html>  <html>    <head>      <title>Modular Demo</title>    </head>    <body>      <!-- 引入require.js並指定js主文件的入口 -->      <script data-main="js/main" src="js/libs/require.js"></script>    </body>  </html>

④頁面引入require.js模組:

在index.html引入 <scriptdata-main="js/main"src="js/libs/require.js"></script>

此外在項目中如何引入第三方庫？只需在上面程式碼的基礎稍作修改：

// alerter.js文件  define(['dataService', 'jquery'], function(dataService, $) {    let name = 'Tom'    function showMsg() {      alert(dataService.getMsg() + ', ' + name)    }    $('body').css('background', 'green')    // 暴露模組    return { showMsg }  })
// main.js文件  (function() {    require.config({      baseUrl: 'js/', //基本路徑 出發點在根目錄下      paths: {        //自定義模組        alerter: './modules/alerter', //此處不能寫成alerter.js,會報錯        dataService: './modules/dataService',        // 第三方庫模組        jquery: './libs/jquery-1.10.1' //注意：寫成jQuery會報錯      }    })    require(['alerter'], function(alerter) {      alerter.showMsg()    })  })()

上例是在alerter.js文件中引入jQuery第三方庫，main.js文件也要有相應的路徑配置。小結：通過兩者的比較，可以得出AMD模組定義的方法非常清晰，不會污染全局環境，能夠清楚地顯示依賴關係。AMD模式可以用於瀏覽器環境，並且允許非同步載入模組，也可以根據需要動態載入模組。

3.CMD

CMD規範專門用於瀏覽器端，模組的載入是非同步的，模組使用時才會載入執行。CMD規範整合了CommonJS和AMD規範的特點。在 Sea.js 中，所有 JavaScript 模組都遵循 CMD模組定義規範。

(1)CMD規範基本語法

定義暴露模組：

//定義沒有依賴的模組  define(function(require, exports, module){    exports.xxx = value    module.exports = value  })
//定義有依賴的模組  define(function(require, exports, module){    //引入依賴模組(同步)    var module2 = require('./module2')    //引入依賴模組(非同步)      require.async('./module3', function (m3) {      })    //暴露模組    exports.xxx = value  })

引入使用模組：

define(function (require) {    var m1 = require('./module1')    var m4 = require('./module4')    m1.show()    m4.show()  })

(2)sea.js簡單使用教程

①下載sea.js, 並引入

  • 官網: http://seajs.org/
  • github : https://github.com/seajs/seajs

然後將sea.js導入項目: js/libs/sea.js

②創建項目結構

|-js|-libs|-sea.js|-modules|-module1.js|-module2.js|-module3.js|-module4.js|-main.js|-index.html

③定義sea.js的模組程式碼

// module1.js文件  define(function (require, exports, module) {    //內部變數數據    var data = 'atguigu.com'    //內部函數    function show() {      console.log('module1 show() ' + data)    }    //向外暴露    exports.show = show  })
// module2.js文件  define(function (require, exports, module) {    module.exports = {      msg: 'I Will Back'    }  })
// module3.js文件  define(function(require, exports, module) {    const API_KEY = 'abc123'    exports.API_KEY = API_KEY  })
// module4.js文件  define(function (require, exports, module) {    //引入依賴模組(同步)    var module2 = require('./module2')    function show() {      console.log('module4 show() ' + module2.msg)    }    exports.show = show    //引入依賴模組(非同步)    require.async('./module3', function (m3) {      console.log('非同步引入依賴模組3  ' + m3.API_KEY)    })  })
// main.js文件  define(function (require) {    var m1 = require('./module1')    var m4 = require('./module4')    m1.show()    m4.show()  })

④在index.html中引入

<script type="text/javascript" src="js/libs/sea.js"></script>  <script type="text/javascript">    seajs.use('./js/modules/main')  </script>

最後得到結果如下：

4.ES6模組化

ES6 模組的設計思想是盡量的靜態化，使得編譯時就能確定模組的依賴關係，以及輸入和輸出的變數。CommonJS 和 AMD 模組，都只能在運行時確定這些東西。比如，CommonJS 模組就是對象，輸入時必須查找對象屬性。

(1)ES6模組化語法

export命令用於規定模組的對外介面，import命令用於輸入其他模組提供的功能。

/** 定義模組 math.js **/  var basicNum = 0;  var add = function (a, b) {      return a + b;  };  export { basicNum, add };  /** 引用模組 **/  import { basicNum, add } from './math';  function test(ele) {      ele.textContent = add(99 + basicNum);  }

如上例所示，使用import命令的時候，用戶需要知道所要載入的變數名或函數名，否則無法載入。為了給用戶提供方便，讓他們不用閱讀文檔就能載入模組，就要用到export default命令，為模組指定默認輸出。

// export-default.js  export default function () {    console.log('foo');  }
// import-default.js  import customName from './export-default';  customName(); // 'foo'

模組默認輸出, 其他模組載入該模組時，import命令可以為該匿名函數指定任意名字。

(2)ES6 模組與 CommonJS 模組的差異

它們有兩個重大差異：

① CommonJS 模組輸出的是一個值的拷貝，ES6 模組輸出的是值的引用。

② CommonJS 模組是運行時載入，ES6 模組是編譯時輸出介面。

第二個差異是因為 CommonJS 載入的是一個對象（即module.exports屬性），該對象只有在腳本運行完才會生成。而 ES6 模組不是對象，它的對外介面只是一種靜態定義，在程式碼靜態解析階段就會生成。

下面重點解釋第一個差異，我們還是舉上面那個CommonJS模組的載入機制例子:

// lib.js  export let counter = 3;  export function incCounter() {    counter++;  }  // main.js  import { counter, incCounter } from './lib';  console.log(counter); // 3  incCounter();  console.log(counter); // 4

ES6 模組的運行機制與 CommonJS 不一樣。ES6 模組是動態引用，並且不會快取值，模組裡面的變數綁定其所在的模組。

(3) ES6-Babel-Browserify使用教程

簡單來說就一句話：使用Babel將ES6編譯為ES5程式碼，使用Browserify編譯打包js。

①定義package.json文件

{"name":"es6-babel-browserify","version":"1.0.0"}

②安裝babel-cli, babel-preset-es2015和browserify

  • npm install babel-cli browserify -g
  • npm install babel-preset-es2015 –save-dev
  • preset 預設(將es6轉換成es5的所有插件打包)

③定義.babelrc文件

{      "presets": ["es2015"]    }

④定義模組程式碼

//module1.js文件  // 分別暴露  export function foo() {    console.log('foo() module1')  }  export function bar() {    console.log('bar() module1')  }
//module2.js文件  // 統一暴露  function fun1() {    console.log('fun1() module2')  }  function fun2() {    console.log('fun2() module2')  }  export { fun1, fun2 }
//module3.js文件  // 默認暴露 可以暴露任意數據類項，暴露什麼數據，接收到就是什麼數據  export default () => {    console.log('默認暴露')  }
// app.js文件  import { foo, bar } from './module1'  import { fun1, fun2 } from './module2'  import module3 from './module3'  foo()  bar()  fun1()  fun2()  module3()

⑤ 編譯並在index.html中引入

  • 使用Babel將ES6編譯為ES5程式碼(但包含CommonJS語法) : babel js/src-d js/lib
  • 使用Browserify編譯js : browserify js/lib/app.js-o js/lib/bundle.js

然後在index.html文件中引入

<script type="text/javascript" src="js/lib/bundle.js"></script>

最後得到如下結果：

此外第三方庫(以jQuery為例)如何引入呢？ 首先安裝依賴 npm install jquery@1然後在app.js文件中引入

//app.js文件  import { foo, bar } from './module1'  import { fun1, fun2 } from './module2'  import module3 from './module3'  import $ from 'jquery'  foo()  bar()  fun1()  fun2()  module3()  $('body').css('background', 'green')

三、總結

  • CommonJS規範主要用於服務端編程，載入模組是同步的，這並不適合在瀏覽器環境，因為同步意味著阻塞載入，瀏覽器資源是非同步載入的，因此有了AMD CMD解決方案。
  • AMD規範在瀏覽器環境中非同步載入模組，而且可以並行載入多個模組。不過，AMD規範開發成本高，程式碼的閱讀和書寫比較困難，模組定義方式的語義不順暢。
  • CMD規範與AMD規範很相似，都用於瀏覽器編程，依賴就近，延遲執行，可以很容易在Node.js中運行。不過，依賴SPM 打包，模組的載入邏輯偏重
  • ES6 在語言標準的層面上，實現了模組功能，而且實現得相當簡單，完全可以取代 CommonJS 和 AMD 規範，成為瀏覽器和伺服器通用的模組解決方案。

後記

花了很長時間(>10h)終於把"JS模組化"講清楚，自己對模組化的認識又加深了一步，事實上，理解一件事並不難，難的是如何將一件事通俗分享給別人，並讓別人也有所收穫，一直以來我也是這樣要求自己！文章如有錯誤和不正之處，歡迎指正和批評，同時也希望大家多多支援，我會有更大的創作動力!

參考文章

  • 前端模組化開發那點歷史
  • CommonJS，AMD，CMD區別
  • AMD 和 CMD 的區別有哪些？
  • Javascript模組化編程
  • Javascript標準參考教程
  • CMD 模組定義規範
  • 理解CommonJS、AMD、CMD三種規範

完

VirMach 便宜 VPS

QNews

QNews