前言

前端開發(fā)中，起初只要在script標簽中嵌入幾十上百行代碼就能實現(xiàn)一些基本的交互效果，后來js得到重視，應用也廣泛起來了，

jQuery，Ajax，Node.Js，MVC，MVVM等的助力也使得前端開發(fā)得到重視，也使得前端項目越來越復雜，

然而，JavaScript卻沒有為組織代碼提供任何明顯幫助，甚至沒有類的概念，更不用說模塊（module）了，那么什么是模塊呢？

一個模塊就是實現(xiàn)特定功能的文件，有了模塊，我們就可以更方便地使用別人的代碼，想要什么功能，就加載什么模塊。

?

一、AMD 規(guī)范

AMD 是 RequireJS 在推廣過程中對模塊定義的規(guī)范化產(chǎn)出。

模塊將被異步加載，模塊加載不影響后面語句的運行。

所有依賴某些模塊的語句均放置在回調(diào)函數(shù)中。

?

用法：

• 定義模塊：define(id?, dependencies?, factory)
• 加載模塊：require([module], factory)

// a.js // 依賴有三個默認的，即"require", "exports", "module"。順序個數(shù)均可視情況 // 如果忽略則factory默認此三個傳入?yún)?shù) // id一般是不傳的，默認是文件名 define(["b", "require", "exports"], function(b, require, exports) {console.log("a.js執(zhí)行");console.log(b); // 暴露api可以使用exports、module.exports、returnexports.a = function() {return require("b");} }) // b.js define(function() {console.log('b.js執(zhí)行');console.log(require);console.log(exports);console.log(module);return 'b'; }) // index.js // 支持Modules/Wrappings寫法，注意dependencies得是空的，且factory參數(shù)不可空 define(function(require, exports, module) {console.log('index.js執(zhí)行');var a = require('a');var b = require('b'); }) // index.js require(['a', 'b'], function(a, b) {console.log('index.js執(zhí)行'); })

?

?

二、CMD 規(guī)范

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

在 CMD 規(guī)范中，一個模塊就是一個文件。

?

用法：

• 定義模塊：define(factory)

/ require, exports, module參數(shù)順序不可亂 // 暴露api方法可以使用exports、module.exports、return // 與requirejs不同的是，若是未暴露，則返回{}，requirejs返回undefined define(function(require, exports, module) {console.log('a.js執(zhí)行');console.log(require);console.log(exports);console.log(module); }) // b.js // define(function(require, module, exports) {console.log('b.js執(zhí)行');console.log(require);console.log(exports);console.log(module); }) // index.js define(function(require) {var a = require('a');var b = require('b');console.log(a);console.log(b); })

?

?

三、CommonJs?規(guī)范

CommonJs 是服務器端模塊的規(guī)范。

Node.js 采用了這個規(guī)范。Node.JS首先采用了js模塊化的概念。

根據(jù) CommonJs?規(guī)范，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在該模塊內(nèi)部定義的變量，無法被其他模塊讀取，除非定義為 global 對象的屬性。

?

用法：

• 輸出模塊：module.exports
• 加載模塊：require

// 導出使用module.exports，也可以exports。exports指向module.exports；即exports = module.exports // 就是在此對象上掛屬性 // commonjs module.exports.add = function add(params) {return ++params; } exports.sub = function sub(params) {return --params; }// 加載模塊使用require('xxx')。相對、絕對路徑均可。默認引用js，可以不寫.js后綴 // index.js var common = require('./commonjs'); console.log(common.sub(1)); console.log(common.add(1));

?

?

四、ES Module

ES6 在語言標準的層面上，實現(xiàn)了模塊功能，成為瀏覽器和服務器通用的模塊解決方案，完全可以取代 CommonJS 和 AMD 規(guī)范。

?

基本特點：

• 每一個模塊只加載一次， 每一個JS只執(zhí)行一次， 如果下次再去加載同目錄下同文件，直接從內(nèi)存中讀取；
• 每一個模塊內(nèi)聲明的變量都是局部變量， 不會污染全局作用域；
• 模塊內(nèi)部的變量或者函數(shù)可以通過export導出；
• 一個模塊可以導入別的模塊

?

用法：

• 輸出模塊：export
• 加載模塊：import?

// module export function fn1(){return "這是 fn1"; }export function fn2(){return "這是 fn2" ; }// main.js //逐一加載 import { fn1, fn2 } from './module';console.log( fn1()); console.log( fn2());//整體加載 import * as all from './module';console.log( all.fn1() ); console.log( all.fn2() );

?

?

動態(tài)加載模塊：

// 普通寫法 import('./module').then(({ a }) => {}) // async、await const { a } = await import('./module');

?

?

五、各模塊之間的區(qū)別

1、CommonJS 與 AMD/CMD 的差異

• CommonJS：是同步加載（代碼在本地，加載時間基本等于硬盤讀取時間）。
• AMD / CMD：是異步加載

?

2、AMD 與 CMD 的差異

• AMD是提前執(zhí)行，CMD是延遲執(zhí)行
• AMD推薦依賴前置，CMD推薦依賴就近

?

3、CommonJS 與 ES Module 的差異

• CommonJS 模塊是對象，是運行時加載，運行時才把模塊掛載在 exports 之上（加載整個模塊的所有），加載模塊其實就是查找對象屬性
• ES Module 不是對象，是使用 export 顯示指定輸出，再通過 import 輸入，此法為編譯時加載
• CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。
• CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

?

3、各模塊用法上的區(qū)別

　　詳見各模塊介紹...

?

?

?

?

?

隨筆整理自

　　https://www.jianshu.com/p/da2ac9ad2960

感謝博主分享！

轉載于:https://www.cnblogs.com/gaosirs/p/10772675.html

總結

以上是生活随笔為你收集整理的JS JavaScript模块化（ES Module/CommonJS/AMD/CMD）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。