模組化在專案中十分的重要，一個複雜的專案肯定有很多相似的功能模組，如果每次都需要重新編寫模組肯定既費時又耗力。但是引用別人編寫模組的前提是要有統一的“打開姿勢”，如果每個人有各自的寫法，那麼肯定會亂套，下面介紹幾種JS的模組化的規範。
模組化在專案中十分的重要，一個複雜的專案肯定有很多相似的功能模組，如果每次都需要重新編寫模組肯定既費時又耗力。但是引用別人編寫模組的前提是要有統一的“打開姿勢”，如果每個人有各自的寫法，那麼肯定會亂套，下面介紹幾種JS的模組化的規範。
一:模組化流程一：script標籤
這是最原始的JavaScript 檔案載入方式，如果把每一個檔案看做是一個模組，那麼他們的介面通常是暴露在全域作用域下，也就是定義在window 物件中，不同模組的介面呼叫都是一個作用域中，一些複雜的框架，會使用命名空間的概念來組織這些模組的介面。
缺點:
1、污染全域作用域
2、開發人員必須主觀解決模組和程式碼庫的依賴關係
3、檔案只能依照script標籤的書寫順序進行載入
4、在大型專案中各種資源難以管理，長期累積的問題導致程式碼庫混亂不堪
二:模組化進程二：CommonJS規範
此規範的核心思想是允許模組透過require方法來同步載入所要依賴的其他模組，然後透過exports 或module.exports 來匯出需要暴露的介面。
require("module");
require("../file.js");
exports.doStuff = function(){};
module.exports = someValue;登入後複製
優點：
1、簡單且容易使用
2、伺服器端模組方便重複使用
缺點:
1、同步的模組載入方式不適合在瀏覽器環境中，同步意味著阻塞加載，瀏覽器資源是非同步載入的
2、不能非阻塞的並行載入多個模組
module.exports與exports的區別
1、 exports 是指向的module.exports 的參考
2、module.exports 初始值為一個空物件{}，所以exports 初始值也是{}
3、require() 回傳的是module.exports 而不是exports
exports範例：
// app.js
var circle = require('./circle');
console.log(circle.area(4));
// circle.js
exports.area = function(r){
return r * r * Math.PI;
}登入後複製
module.exports範例：
// app.js
var area = require('./area');
console.log(area(4));
// area.js
module.exports = function(r){
return r * r * Math.PI;
}登入後複製
錯誤的情況：
// app.js
var area = require('./area');
console.log(area(4));
// area.js
exports = function(r){
return r * r * Math.PI;
}登入後複製
其實是對exports 進行了覆蓋，也就是說exports 指向了一塊新的內存（內容為一個計算圓面積的函數），也就是說exports 和module.exports 不再指向同一塊內存，也就是說此時exports 和module.exports 毫無聯繫，也就是說module.exports 指向的那塊內存並沒有做任何改變，仍然為一個空對象{}，也就是說area.js導出了一個空對象，所以我們在app .js 中呼叫area(4) 會報TypeError: object is not a function 的錯誤。
總結：當我們想要讓模組匯出的是物件時， exports 和module.exports 皆可使用（但exports 也無法重新覆寫為新的物件），而當我們想要匯出非物件介面時，就必須也只能覆寫module.exports 。
三:模組化進程三：AMD規格
由於瀏覽器端的模組不能採用同步的方式加載，會影響後續模組的載入執行，因此AMD( Asynchronous Module Definition非同步模組定義)規範誕生了。
AMD標準中定義了以下兩個API
1、require([module], callback);
2、define(id, [depends], callback);
require介面用來載入一系列模組，define介面用來定義並揭露一個模組。
範例：
define("module", ["dep1", "dep2"], function(d1, d2){
return someExportedValue;
});
require(["module", "../file"], function(module, file){ /* ... */ });登入後複製
優點：
#1、適合在瀏覽器環境中非同步載入模組
2、可以並行載入多個模組
缺點：
1、提高了開發成本，程式碼的閱讀和書寫比較困難，模組定義方式的語意不順暢
2、不符合通用的模組化思考方式，是一種妥協的實現
四:模組化過程四：CMD規格
CMD(Common Module Definition)规范和AMD很相似，尽量保持简单，并与CommonJS和Node.js的 Modules 规范保持了很大的兼容性。在CMD规范中，一个模块就是一个文件。
示例：
define(function(require, exports, module){
var $ = require('jquery');
var Spinning = require('./spinning');
exports.doSomething = ...
module.exports = ...
})登入後複製
优点：
1、依赖就近，延迟执行
2、可以很容易在 Node.js 中运行
缺点：
1、依赖 SPM 打包，模块的加载逻辑偏重
AMD和CMD的区别
AMD和CMD起来很相似，但是还是有一些细微的差别，让我们来看一下他们的区别在哪里：
1、对于依赖的模块，AMD是提前执行，CMD是延迟执行。
2、AMD推崇依赖前置；CMD推崇依赖就近，只有在用到某个模块的时候再去require。看代码：
// AMD
define(['./a', './b'], function(a, b){ // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
});
// CMD
define(function(require, exports, module){
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b')
// 依赖可以就近书写
b.doSomething()
// ...
});登入後複製
3、AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。
五:模块化进程五：ES6模块化
EcmaScript6标准增加了JavaScript语言层面的模块体系定义。ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时确定这些东西。
在 ES6 中，我们使用export关键字来导出模块，使用import关键字引用模块。需要说明的是，ES6的这套标准和目前的标准没有直接关系，目前也很少有JS引擎能直接支持。因此Babel的做法实际上是将不被支持的import翻译成目前已被支持的require。
尽管目前使用import和require的区别不大(本质上是一回事)，但依然强烈推荐使用import关键字，因为一旦JS引擎能够解析ES6的import关键字，整个实现方式就会和目前发生比较大的变化。如果目前就开始使用import关键字，将来代码的改动会非常小。
示例：
import "jquery";
export functiondoStuff(){}
module "localModule" {}登入後複製
优点：
1、容易进行静态分析
2、面向未来的 EcmaScript 标准
缺点：
1、原生浏览器端还没有实现该标准
2、全新的命令字，新版的 Node.js才支持
以上是深入理解javascript的模組化詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
