🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 一、概述 模块是独立的文件,该文件内部的所有的变量外部都无法获取。如果希望获取某个变量,必须通过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(); ```