前言：模塊化開發需求
在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'
后記
以上就是胡哥今天給大家分享的內容，喜歡的小伙伴記得收藏、轉發、點擊右下角按鈕在看，推薦給更多小伙伴呦，歡迎多多留言交流...
胡哥有話說，一個有技術，有情懷的胡哥！現任京東前端攻城獅一枚，
胡哥有話說，專注于大前端技術領域，分享前端系統架構，框架實作原理，最新最高效的技術實踐！
長按掃碼關注，更帥更漂亮呦！關注胡哥有話說公眾號，可與胡哥繼續深入交流呦！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/137185.html
標籤：JavaScript
上一篇：Vue 非父子組件之間的通信