Modules
modules有2种形式，一种requireJS，另一种commonJS，现在ES6引入自己的modules.Modules的强大之处就是只输入输出你想要的部分，而不是必须是全部。
一.basic exporting and importing
basic exporting
通过 export 关键字发布modules中的部分代码，基本输出可以是变量，函数，class
// 输出变量 "example.js"
export var color = "red";
export const magicNumber = 7;
// 输出函数
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 } 这些绑定列表看起来像解构，但不是的
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 关键词
import * as example from "./example.js";
example.sum(1, 2); // 3
4.export， import限制
export, import最重要的限制就是： 必须用于语句和函数的外面
if (flag) {
export flag; // 抛出错误
}
function tryImport() {
import flag from "./example.js"; // 抛出错误
}
二. Renaming exports and imports
通过 as 关键词可以给输出输入重新命名
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";
// 现在只能使用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关键词为module设置默认输出，每个module只能有一个默认的输出
// 注意使用默认输出后可以使用匿名函数
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中默认的必须出现在最前面
四.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
总结
ES6 modules 在React 中使用非常广泛，语法相对其余modules比较简单，注意一下路径问题就可以。
