前言：模塊化開發需求 在JS早期，使用script標簽引入JS，會造成以下問題： 1. 載入的時候阻塞網頁渲染，引入JS越多，阻塞時間越長。 2. 容易污染全局變數。 3. js文件存在依賴關係，載入必須有順序。項目較大時，依賴會錯綜複雜。 4. 引入的JS文件過多，不美觀，且不易於管理。 一、Co ...
前言：模塊化開發需求
在JS早期，使用script標簽引入JS，會造成以下問題：
- 載入的時候阻塞網頁渲染，引入JS越多，阻塞時間越長。
- 容易污染全局變數。
- js文件存在依賴關係，載入必須有順序。項目較大時，依賴會錯綜複雜。
- 引入的JS文件過多，不美觀，且不易於管理。
一、CommonJS規範
CommonJS Modules/1.0規範，伺服器端規範。
Node.js推廣使用。該規範的核心是：允許模塊使用require方法來同步載入所依賴的其他模塊，然後通過exports或module.exports導出需要暴露的介面。
特點：
-
一個模塊是一個文件
-
使用module.exports或exports導出模塊
// module.js exports.add = (a, b) => a+b module.exports = { add: (a, b) => a + b } -
使用require載入模塊
a. require命令第一次載入模塊時，執行整個腳本，在記憶體中生成對象 b. 多次執行require命令再次載入該模塊時，不會再執行該腳本，直接從緩存中取值 c. CommonJS載入模塊是同步載入模塊
Tips：
-
為什麼CommonJS規範不適合作為瀏覽器的規範
由於CommonJS是同步加模塊，在服務端載入模塊時都是從本地硬碟中載入，讀取速度很快。但是在瀏覽器端載入模塊時，需要請求伺服器端，涉及網速、代理的問題，一旦等待時間過長，瀏覽器會處於“假死”狀態。
二、ADM規範
AMD（Asynchronous Module Definition）非同步模塊定義，客戶端規範。
採用非同步方式載入模塊，模塊載入不影響它後面語句的代執行。
AMD是require.js在推廣使用過程中對模塊定義規範化的產物。
在使用時，需引入require.js
特點
-
使用define()定義模塊
/** * @param id 模塊名稱，如果為空，模塊的名字預設為模塊載入器請求的指定腳本名 * @param dependencies 模塊依賴 * @param factory 工場函數，模塊初始化執行的函數或對象 */ define(id? dependencies? factory) -
使用require載入模塊
require([module], callback)AMD是依賴前置模塊
三、CMD規範
CMD（Common Module Definition）通用模塊定義，非同步載入模塊。
CMD是sea.js在推廣過程中對模塊定義的規範化產物。
在使用時，需引入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規範
UMD（Universal Module Definition）通用模塊定義，為了相容AMD、CMD和無模塊化開發規範
/**
* UMD-Universal Module Definition 通用模塊定義
* */
(function (root, factory) {
// 判斷是否是AMD/CMD
if (typeof define === 'function') {
define([], factory)
} else if (typeof exports === 'object') {
// Node CommonJS規範
module.exports = factory()
} else {
// 瀏覽器環境
root.someAttr = factory
}
})(this, function () {
let add = function (a, b) {
return a + b
}
return {
add,
module: 'UMD'
}
})
五、ES6模塊
ES6通過imort和export實現模塊的輸入與輸出，import命令用於輸入其他模塊提供的功能，export命令用於規定模塊對外的介面。
特點：
-
使用export導出模塊
// test.js export let module = 'ES6 Module' export let hello = function () {} let demo = function () {} // 預設導出 export default demo -
使用import導入模塊
// 導入預設模塊 import demo from './test.js' // 導入指定模塊 import { hello, module } from './test' // 導入指定模塊，並重命名 import { hello as hi, module } from './test.js' // 導入全部模塊，並重命名 import * as test from './test.js'
後記
以上就是胡哥今天給大家分享的內容，喜歡的小伙伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小伙伴呦，歡迎多多留言交流...
胡哥有話說，一個有技術，有情懷的胡哥！現任京東前端攻城獅一枚。
胡哥有話說，專註於大前端技術領域，分享前端系統架構，框架實現原理，最新最高效的技術實踐！
長按掃碼關註，更帥更漂亮呦！關註胡哥有話說公眾號，可與胡哥繼續深入交流呦！
