## 一、概述 模塊是獨立的文件，該文件內部的所有的變量外部都無法獲取。如果希望獲取某個變量，必須通過export輸出；可以逐個導出，也可以用大括號指定要輸出的一組變量；export模塊可以位于模塊中的任何位置，但是必須是在模塊頂層； export有兩種方式：export 或者export default； >[danger] > 1、兩者均可用于導出常量、函數、文件、模塊； > 2、在一個文件中可以多次使用export，但是export default只能用一次； > 3、通過export輸出的，在import導入時需要使用{}，export default不需要； > 4、export與export default不可同時使用； > 5、export的時候，可以用as重新命名； ## 二、export命名導出 這種方式導出多個函數，一般使用場景比如 utils、tools、common 之類的工具類函數集，或者全站統一變量等。 ``` //------ lib.js ------ export const sqrt = Math.sqrt; export function square(x) { return x * x; } export function diag(x, y) { return sqrt(square(x) + square(y)); } //------ main.js 使用方式1 ------ import { square, diag } from 'lib'; console.log(square(11)); // 121 console.log(diag(4, 3)); // 5 //------ main.js 使用方式2 ------ import * as lib from 'lib'; console.log(lib.square(11)); // 121 console.log(lib.diag(4, 3)); // 5 ``` ## 三、export as 通常情況下，export輸出的變量就是本來的名字，但是可以使用as關鍵字重命名； ``` function v1() { ... } function v2() { ... } export { v1 as streamV1, v2 as streamV2, v2 as streamLatestVersion }; ``` 上面代碼使用as關鍵字，重命名了函數v1和v2的對外接口。重命名后，v2可以用不同的名字輸出兩次。 ## 四、export default 這種方式比較簡單，一般用于一個類文件，或者功能比較單一的函數文件使用。一個模塊中只能有一個export default默認輸出。 export default與export的主要區別有2個： >[danger] > 1、不需要知道導出的具體變量名 > 2、導入(import)時不需要{} ``` //------ myFunc.js ------ export default function () { ... }; //------ main.js ------ import myFunc from 'myFunc'; myFunc(); ```