CommonJS 規(guī)范

• 實(shí)現(xiàn)js模塊化
  • 模塊加載 require
  • 模塊標(biāo)識 module
  • 模塊定義 exports
• Node.js 按照 CommonJS 規(guī)范編寫
• require() 是同步加載模塊的，僅適合服務(wù)端。

// foo.js
module.exports = function () {
    return 'foo'; 
};

// main.js
var foo = require("./foo.js")

AMD 規(guī)范

AMD是"Asynchronous Module Definition"的縮寫，意思就是"異步模塊定義"。

• 讓瀏覽器端的模塊采用"異步加載"（asynchronous），適合瀏覽器端。
• 同樣采用require()語句加載模塊，但是不同于CommonJS，它要求兩個(gè)參數(shù)，分別是 module (數(shù)組) 和 callback (回調(diào)函數(shù))：

// main.js
require(['math'], function (math) {
    math.add(2, 3);
});

require.js

require.js 實(shí)現(xiàn)了AMD規(guī)范，主要為了解決兩個(gè)問題：

• 實(shí)現(xiàn)js文件的異步加載，避免網(wǎng)頁失去響應(yīng)；
• 管理模塊之間的依賴性，便于代碼的編寫和維護(hù)。

使用方式

只需在 script 標(biāo)簽中引入庫文件和主模塊 main.js 文件：

<script src="js/require.js" data-main="js/main"></script>

AMD模塊的寫法

通過define函數(shù)定義模塊

// math.js
define(function (){
    var add = function (x,y){
        return x+y;
    };

    return {
        add: add
    };
});

// main.js
require(['math'], function (math){
    alert(math.add(1,1));
});

如果這個(gè)模塊還依賴其他模塊，那么 define() 函數(shù)的第一個(gè)參數(shù)，必須是一個(gè)數(shù)組，指明該模塊的依賴性。

代碼實(shí)例：

https://www.cnblogs.com/chenguangliang/p/5856701.html

CMD 規(guī)范

• 與 AMD 類似，sea.js 實(shí)現(xiàn)。

參考：

• CMD 模塊定義規(guī)范
• Sea.js 與 RequireJS 的異同

ES6

• 語法： import export （注意有無 default）
• 環(huán)境： babel 編譯 ES6 語法，模塊化可用 webpack 和 rollup

// util1.js
export default {
    a: 100
}

//util2.js
export function fn1() {
    alert('fn1')
}

export function fn2() {
    alert('fn2')
}

// index.js
import util1 from './util1.js'
import { fn1, fn2 } from './util2.js'

console.log(util1)
fn1()
fn2()