模塊化開發，可以讓代碼易於擴展、便於日後維護。

ES6中的模塊化

我們先了解一下 export(導出) 和 import(導入) 這兩個關鍵字。

新建一個文件a.js 並且導出變量test

export var test = "測試";

導入變量test 來源是a.js 然後輸出test

import {test} from ‘./a.js‘;
console.log(test);

如果想導出多個變量:

var test = "測試1";
var test2 = "測試2";
export {
    test,
    test2
}
 

import {test,test2} from ‘./a.js‘;

如果你不想暴露模塊當中的變量名字，可以通過as來進行操作:

var test = "測試1";
var test2 = "測試2";
export {
    test as asTest,
    test2 as asTest2
}

import {asTest,asTest2} from ‘./a.js‘;

默認導出 (export default)

一個模塊文件只能有一個默認導出，並且它的導入名稱可以喝導出名稱不一樣。

export default test = "哈哈";
 

import test from ‘./a.js‘;
import noTest from ‘./a.js‘;//名字不一樣也行

混合導入導出

/*導出文件  a.js*/
export var test = "Hello";
export default yuki = "Yuki";

/*導入*/
import yuki,{test} from ‘./a.js‘;

CommonJS

commonJs是Node獨有的規範，一般是用於服務端。module.exports(導出) 、require(導入)。具體看示例

module.exports = {
    test:
 
‘哈哈‘,
    yuki:‘Yuki‘
}
//下面這種方式也可以導出  exports不能直接賦值一個對象 也就說exports=對象aaa  這種寫法是無效的
exports.test = "哈哈";
exports.yuki = "Yuki";

var obj = require(‘./a.js‘);
console.log(obj.test);
console.log(obj.yuki);

CommonJS與ES6中模塊化的區別

1.commonJs支持動態導入，也就說require(${path}/xx.js) ，但ES6不支持。

2.commonJs是同步的，並且一般用於服務端，後者是異步的，一般用於客戶端(瀏覽器)。

AMD

// AMD
define([‘./a‘, ‘./b‘], function(a, b) {
    a.do()
    b.do()
})
define(function(require, exports, module) {
    var a = require(‘./a‘)
    a.doSomething()
    var b = require(‘./b‘)
    b.doSomething()
})

《JavaScript總結》js模塊化