深入理解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>