第13章 Modules

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比较简单，注意一下路径问题就可以。