基本用法
基本用法
模块导入导出各种类型的变量,如字符串
、数值
、函数
、类
。
- 导出的函数声明与类声明必须要有名称(
export default
命令另外考虑)。 - 不仅能导出声明还能导出引用(例如函数)。
-export
命令可以出现在模块的任何位置,但必需处于模块顶层。 import
命令会提升到整个模块的头部,首先执行。
- 在创建
JavaScript
模块时,export
用于从模块中导出实时绑定的函数、对象或原始值,以便其他程序可以通过import
使用它们。 - 被导出的绑定值依然可以在本地进行修改。
在使用import
进行导入时,这些绑定值只能被导入模块所读取,但在export
导出模块中对这些绑定值进行修改,所修改的值也会实时地更新。
exports
ES6模块只支持静态导出,只可以在模块的最外层作用域
使用export
,不可在条件语句与函数作用域中使用。
Named exports (命名导出)
这种方式主要用于导出多个函数或变量,明确知道导出的变量名称。
使用:只需要在变量或函数面前加export关键字即可。
使用场景:比如utils、tools、common 之类的工具类函数集,或者全站统一变量等。
1.export 后面不可以是表达式,因为表达式只有值,没有名字。
2.每个模块包含任意数量的导出。
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));
}
// index.js 使用方式1
import { square, diag } from 'lib';
console.log(square(11)); // 121
// index.js 使用方式2
import * as lib from 'lib';
console.log(lib.square(11)); // 121
简写格式,统一列出需要输出的变量,例如上面的lib.js可以改写成:
// lib.js
const sqrt = Math.sqrt;
function square(x) {
return x * x;
}
function add (x, y) {
return x + y;
}
export { sqrt, square, add };
Default exports (默认导出)
这种方式主要用于导出类文件或一个功能比较单一的函数文件;
使用:只需要在变量或函数前面加 export default 关键字即可。
- 使用default导出,导入式不需要加{},一般不建议使用默认导出,默认导出会使程序员随意命名变量。如果要使用默认导入,最好与文件的模块名字相关联。
- 每个模块最多只能有一个默认导出;
- 默认导出可以视为名字是default的模块输出变量;
- 默认导出后面可以是表达式,因为它只需要值。
导出一个值:
export default 123;
导出一个函数:
// myFunc.js
export default function () { … };
// index.js
import myFunc from ‘myFunc’;
myFunc();
导出一个类:
// MyClass.js
class MyClass{
constructor() {}
}
export default MyClass;
// 或者
export { MyClass as default, … };
// index.js
import MyClass from ‘MyClass’;
export default 与 export 的区别:
- 不需要知道导出的具体变量名;
- 导入【import】时不需要 { } 包裹;
Combinations exports (混合导出)
混合导出是 Named exports 和 Default exports 组合导出。
混合导出后,默认导入一定放在命名导入前面;
- 导入默认接口不需要使用{},导入普通接口需要使用{}
// lib.js
export const myValue = ‘’;
export const MY_CONST = ‘’;
export function myFunc() {
…
}
export function* myGeneratorFunc() {
…
}
export default class MyClass {
…
}
// index.js
import MyClass, { myValue, myFunc } from ‘lib’
Re-exporting (别名导出)
一般情况下,export 导出的变量名是原文件中的变量名,但也可以用 as 关键字来指定别名。这样做是为了简化或者语义化 export 的函数名。
同一个变量允许使用不同名字输出多次
// lib.js
function getName() {
…
};
function setName() {
…
};
export {
getName as get,
getName as getUserName,
setName as set
}
Module Redirects (中转模块导出)
为了方便使用模块导入,在一个父模块中“导入-导出”不同模块。简单来说:创建单个模块,集中多个模块的多个导出。
使用:使用 export from 语法实现;
export * from ‘lib’; // 没有设置 export default
export * as myFunc2 from ‘myFunc’; // 【ES2021】没有设置 export default
export { default as function1, function2 } from ‘bar.js’;
上述例子联合使用导入和导出:
import { default as function1, function2 } from ‘bar.js’;
export { function1, function2 };
尽管此时 export 与 import 等效,但以下语法在语法上无效:
import DefaultExport from ‘bar.js’; // 有效的
export DefaultExport from ‘bar.js’; // 无效的
正确的做法是重命名这个导出:
export { default as DefaultExport } from ‘bar.js’;
Import
- import 有提升效果,会提升整个模块到头部首先执行,所以不可放在判断语句表达式中
- import 会加载执行的模块,多个相同的import只会执行一次
// Named imports
import { foo, bar as b } from ‘./some-module.mjs’;
// Namespace import
import * as someModule from ‘./some-module.mjs’;
// Default import
import someModule from ‘./some-module.mjs’;
// Combinations:
import someModule, * as someModule from ‘./some-module.mjs’;
import someModule, { foo, bar as b } from ‘./some-module.mjs’;
// Empty import (for modules with side effects)
import ‘./some-module.mjs’;
export 与 import 的复合写法
- 在一个模块之中,先输入后输出同一个模块,import语句可以与export语句写在一起
export { foo, bar } from ‘my_module’; // 先输入foo, bar模块再输出
- 想要输出默认模块,使用as关键字即可
export { es6 as default } from ‘./someModule’;
注意
- export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
- export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。【和export是有点相反的
- 命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错