## 簡單模塊化 1. 通過script標簽實現模塊化，但是依然會造成變量污染，而且還需要人為控制順序 2. 通過立即執行函數進行函數作用域的隔離 ## nodejs的規范CommonJs 一個文件就是一個模塊，文件名就是模塊的名字，使用模塊的方法也和commonjs中一致，只需require就好了 ``` module.export = add var add = require('math'); ``` 缺點： - 同步加載 - 不能非阻塞的并行加載多個模塊 ## AMD：Asynchronous Module Definition異步模塊定義 示例 ``` define("module", ["dep1", "dep2"], function(d1, d2) { return someExportedValue; }); require(["module", "../file"], function(module, file) { /* ... */ }); ``` 優點： - 適合在瀏覽器環境中異步加載模塊 - 可以并行加載多個模塊 缺點： - 提高了開發成本，代碼的閱讀和書寫比較困難，模塊定義方式的語義不順暢 - 不符合通用的模塊化思維方式，是一種妥協的實現 ## CMD規范 與CommonJS和Node.js的 Modules 規范保持了很大的兼容性。在CMD規范中，一個模塊就是一個文件。 ``` define(function(require, exports, module) { var $ = require('jquery'); var Spinning = require('./spinning'); exports.doSomething = ... module.exports = ... }) ``` ### AMD和CMD的區別 1、對于依賴的模塊，AMD是提前執行，CMD是延遲執行。 2、AMD推崇依賴前置；CMD推崇依賴就近，只有在用到某個模塊的時候再去require。 ## ES6模塊化 ES6 模塊的設計思想，是盡量的靜態化，使得**編譯時就能確定模塊的依賴關系**，以及輸入和輸出的變量，能夠提供更好的**變量類型檢查**。CommonJS和AMD模塊，都只能在運行時確定這些東西。 [參考鏈接](http://xieyufei.com/2017/02/19/JS-Standard.html)