JavaScript模塊化-CommonJS、AMD、CMD、UMD、ES6

頭號碼甲 2021-11-07

展開全文

前言：模塊化開發(fā)需求

在JS早期，使用script標(biāo)簽引入JS，會造成以下問題：

加載的時候阻塞網(wǎng)頁渲染，引入JS越多，阻塞時間越長。
容易污染全局變量。
js文件存在依賴關(guān)系，加載必須有順序。項目較大時，依賴會錯綜復(fù)雜。
引入的JS文件過多，不美觀，且不易于管理。

一、CommonJS規(guī)范

CommonJS Modules/1.0規(guī)范，服務(wù)器端規(guī)范。

Node.js推廣使用。該規(guī)范的核心是：允許模塊使用require方法來同步加載所依賴的其他模塊，然后通過exports或module.exports導(dǎo)出需要暴露的接口。

特點：

一個模塊是一個文件

使用module.exports或exports導(dǎo)出模塊

// module.js
exports.add = (a, b) => a+b

module.exports = {
  add: (a, b) => a + b
}

使用require加載模塊

a. require命令第一次加載模塊時，執(zhí)行整個腳本，在內(nèi)存中生成對象
b. 多次執(zhí)行require命令再次加載該模塊時，不會再執(zhí)行該腳本，直接從緩存中取值
c. CommonJS加載模塊是同步加載模塊

Tips：

為什么CommonJS規(guī)范不適合作為瀏覽器的規(guī)范

由于CommonJS是同步加模塊，在服務(wù)端加載模塊時都是從本地硬盤中加載，讀取速度很快。但是在瀏覽器端加載模塊時，需要請求服務(wù)器端，涉及網(wǎng)速、代理的問題，一旦等待時間過長，瀏覽器會處于“假死”狀態(tài)。

二、ADM規(guī)范

AMD（Asynchronous Module Definition）異步模塊定義，客戶端規(guī)范。
采用異步方式加載模塊，模塊加載不影響它后面語句的代執(zhí)行。

AMD是require.js在推廣使用過程中對模塊定義規(guī)范化的產(chǎn)物。

在使用時，需引入require.js

特點

使用define()定義模塊

/**
 * @param id 模塊名稱，如果為空，模塊的名字默認為模塊加載器請求的指定腳本名
 * @param dependencies 模塊依賴
 * @param factory 工場函數(shù)，模塊初始化執(zhí)行的函數(shù)或?qū)ο? */
define(id? dependencies? factory)

使用require加載模塊
```
require([module], callback)
```
AMD是依賴前置模塊

三、CMD規(guī)范

CMD（Common Module Definition）通用模塊定義，異步加載模塊。

CMD是sea.js在推廣過程中對模塊定義的規(guī)范化產(chǎn)物。

在使用時，需引入sea.js

特點：

使用define()定義模塊，使用require()加載模塊
```
define(function (require, exports, module) {
let a = require('a')
let b = require('b')
exports.eat = a.eat
exports.run = b.run
})
```
CMD模塊加載是推崇就近依賴的，需要到某個模塊時再進行require加載
使用seajs.use加載使用模塊
```
seajs.use(id, callback?)
```

四、UMD規(guī)范

UMD（Universal Module Definition）通用模塊定義，為了兼容AMD、CMD和無模塊化開發(fā)規(guī)范

/**
 * UMD-Universal Module Definition 通用模塊定義
 * */
 (function (root, factory) {
 // 判斷是否是AMD/CMD
 if (typeof define === 'function') {
 define([], factory)
 } else if (typeof exports === 'object') {
 // Node CommonJS規(guī)范
 module.exports = factory()
 } else {
 // 瀏覽器環(huán)境
 root.someAttr = factory
 }
 })(this, function () {
 let add = function (a, b) {
 return a + b
 }
 return {
 add,
 module: 'UMD'
 }
 })

五、ES6模塊

ES6通過imort和export實現(xiàn)模塊的輸入與輸出，import命令用于輸入其他模塊提供的功能，export命令用于規(guī)定模塊對外的接口。

特點：

使用export導(dǎo)出模塊

// test.js
export let module = 'ES6 Module'
export let hello = function () {}
let demo = function () {}
// 默認導(dǎo)出
export default demo

使用import導(dǎo)入模塊

// 導(dǎo)入默認模塊
import demo from './test.js'

// 導(dǎo)入指定模塊
import { hello, module } from './test'

// 導(dǎo)入指定模塊，并重命名
import { hello as hi, module } from './test.js'

// 導(dǎo)入全部模塊，并重命名
import * as test from './test.js'