深入理解ES6读书笔记10：模块

模块使用不同方式加载的JS文件。
模块化分为导出（export）@与导入（import）两个模块。
特点：
(1)模块自动开启严格模式;
(2)每一个模块内声明的变量都是局部变量；
(3)模块中可以导入和导出各种类型的变量；
(4)每一个模块只加载一次(是单例的)，若再去加载同目录下同文件，直接从内存中读取；
(5)对于需要让模块外部代码访问的内容，模块必须导出它们；

基本的导出
使用export关键字将已发布代码部分公开给其他模块。
新建一个example.js文件，内容如下：

// 导出数据
export var color = "red";
export let name = "Nicholas";
export const magicNumber = 7;
// 导出函数
export function sum(num1, num2) {
    return num1 + num1;
}
// 导出类
export class Rectangle {
    constructor(length, width) {
        this.length = length;
        this.width = width;
    }
}
// 此函数为模块私有
function subtract(num1, num2) {
    return num1 - num2;
}
// 定义一个函数……
function multiply(num1, num2) {
    return num1 * num2;
}
// ……稍后将其导出
export { multiply };

单个导入

import { sum } from "./example.js";
let result = sum(1,2);
console.log(result); //3

多个导入

import { sum, multiply, magicNumber } from "./example.js";
console.log(sum(1,magicNumber)); // 8
console.log(multiply(1, 2)); // 2

完全导入（命名空间导入）

import * as example from "./example.js";
console.log(example.sum(1, example.magicNumber)); // 8
console.log(example.multiply(1, 2)); // 2

重命名导出，使用as关键字指定新名称

function sum(num1, num2) {
    return num1 + num2;
}
export { sum as add };

重命名导入

import { add as sum } from "./example.js";

导出默认值，使用default关键字，函数不需要名称，因为代表此模块自身。

export default function(num1, num2) { //方式1
    return num1 + num2;
}

导出默认值也可以使用下面两种方式

function sum(num1, num2) {
    return num1 + num2;
}
export default sum; //方式2
//export { sum as default }; //方法3

导入默认值（不使用花括号）

import sum from "./example.js";
console.log(sum(1, 2)); // 3

既导出默认值，又导出非默认的绑定模块

export let color = "red";
export default function(num1, num2) {
    return num1 + num2;
}

同时导入 color 以及作为默认值的函数：

import sum, { color } from "./example.js";
//import { default as sum, color } from "example"; //使用重命名语法进行默认值的导入，等价于上行

console.log(sum(1, 2)); // 3
console.log(color); // "red"

当前模块已导入内容再导出

//方式1
import { sum } from "./example.js";
export { sum }

//方式2
//export { sum } from "./example.js";

//方式3：将一个值用不同名称导出
//export { sum as add } from "./example.js";

//方式4：将所有值完全导出
//export * from "./example.js";

无绑定的导入，如有些模块只是修改全局作用域的对象，则导入时可以简化为

import "./example.js";

Web浏览器使用模块

<!-- type="module"表示将指定文件中的代码当作模块 -->
<script type="module" src="module.js"></script>

<!-- 内联脚本导入模块 -->
<script type="module">
import { sum } from "./example.js";
let result = sum(1, 2);
</script>