Modules
modules有2種形式亦鳞，一種requireJS橡卤，另一種commonJS肝劲，現(xiàn)在ES6引入自己的modules.Modules的強(qiáng)大之處就是只輸入輸出你想要的部分葵蒂，而不是必須是全部梁沧。
一.basic exporting and importing
basic exporting
通過 export 關(guān)鍵字發(fā)布modules中的部分代碼檀何，基本輸出可以是變量，函數(shù)廷支，class
// 輸出變量 "example.js"
export var color = "red";
export const magicNumber = 7;
// 輸出函數(shù)
export function sum(a, b) {
return a + b;
}
// 輸出class
export class Rectangle(width, height) {
// ...
}
// 私有的频鉴，不輸出
function subtract(a, b) {
return a - b;
}
// 先定義后輸出
function multiply(a, b) {
return a * b;
}
export multiply;
You cann't export anonymous functions or classes using this syntax unless you are using default keyword
basic importing
基本形式為：
import { identifier1, identifier2 } from "./example.js";
// { identifier1, identifier2 } 這些綁定列表看起來像解構(gòu)，但不是的
1.import 1個binding
import { sum } from "./example.js";
sum(1, 2); // 3
2.import 多個bindings
import { sum, magicNumber } from "./example.js";
sum(2, magicNumber); // 9
3.import 整個module
使用 as 關(guān)鍵詞
import * as example from "./example.js";
example.sum(1, 2); // 3
4.export酥泞， import限制
export, import最重要的限制就是： 必須用于語句和函數(shù)的外面
if (flag) {
export flag; // 拋出錯誤
}
function tryImport() {
import flag from "./example.js"; // 拋出錯誤
}
二. Renaming exports and imports
通過 as 關(guān)鍵詞可以給輸出輸入重新命名
function sum(a, b) {
return a + b;
}
// 輸出重新命名
export sum as add; // 將'sum' 以 'add' 名字輸出砚殿，其它modules import時需要import 'add'
import { add } from "./example.js";
// 輸入重命名
import { add as sum } from "./example.js";
// 現(xiàn)在只能使用sum
三.Default Values in Modules
The default value for a module is a single varible, function or class as specified by the default keyword, and you can only set only default export per module.通過default關(guān)鍵詞為module設(shè)置默認(rèn)輸出，每個module只能有一個默認(rèn)的輸出
// 注意使用默認(rèn)輸出后可以使用匿名函數(shù)
export default function(a, b) {
return a + b;
}
// the function doesn't need a name, because the module represents the function
// 也可以先定義后輸出
function sum(a, b) {
return a + b;
}
export default sum;
// 或者
export let color = "red";
export default function sum(a, b) {
return a + b;
}
import default
import sum, { color } from "./example.js";
// 注意sum不用使用{}
// 或者寫為
import { default as sum, color} from "./example.js";
sum(1, 2); // 3
注意import中默認(rèn)的必須出現(xiàn)在最前面
四.Re-exporting a binding
從別的module中import,然后重新export
import { sum } from "./example.js";
export { sum };
// 或者可以直接寫為
export { sum } from "./example.js";
// 同樣也可重命名
export { sum as add } from "./example.js";
五. Importing without binding
有一些module可能什么也不輸出芝囤， 只是修改全局上的對象似炎， 一般用于polyfill或者shims
// 'example.js'
// module code without export and import,用作script或者module
Array.prototype.pushAll = function(items) {
if (!Array.isArray(items)) {
throw new TypeError("Arguments must be array");
}
return this.push(...items);
}
// 其他module
import "./example.js";
let colors = ["red", "blue"];
let items = [];
items.pushAll(colors);
六.路徑問題
/--->root directory./--->current directory../--->parent directory
總結(jié)
ES6 modules 在React 中使用非常廣泛，語法相對其余modules比較簡單悯姊，注意一下路徑問題就可以羡藐。
