问题来了
在日常开发中,HMS 经常会遇到以下这些语句
import {xxx, xxxx} from 'xxx'
import xxx from 'xxx'
import('../xxx')
let xxx = 'x'; export {xxx}
export class xxx {}
export default {}
exports.post()
module.exports.init = init;
那么问题来了,这些 import
和export
语句表示什么意思?有什么区别呢?
背景知识
1. ES6 模块
import
和 export
是 ES6 模块中的两个命令。
ES6 模块功能主要有两个命令构成:export
和 import
。export
命令用于规定模块的对外接口,import
命令用于输入其他模块提供的功能。
在 ES6 前,模块加载最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。
ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。
2. export
export
命令用于规定模块的对外接口。即输出模块内部变量(方法、类)。
- 基本用法
// 1. 直接输出变量(方法、类)export var m = 1;
export function multiply(x, y) {return x * y;};
// 2. 使用大括号指定所要输出的一组变量(方法、类)var m = 1;
export {m};
// 3. as 关键字重命名
// 重命名后,v2 可以用不同的名字输出两次
function v1() { ...}
function v2() { ...}
export {
v1 as streamV1,
v2 as streamV2,
v2 as streamLatestVersion
};
- 注意项
-
export
语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。 -
export
命令可以出现在模块的任何位置,只要处于模块顶层就可以。
3. import
使用 export
命令定义了模块的对外接口以后,其他 JS 文件就可以通过 import
命令加载这个模块。import
命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块对外接口的名称相同。
- 基本用法
// 1. 引入变量(方法、类)-(逐一加载)import {firstName, lastName, year} from './profile.js';
// 2. as 关键字重命名
import {lastName as surname} from './profile.js';
// 3. 整体加载
import * as circle from './circle';
- 注意项
- 引入变量只读,引入对象属性可改写
- from 后面是文件路径(相对路径、绝对路径均可,可省略.js 猴嘴;模块名,已配置模块位置)
-
import
命令提升至顶部先执行(编译阶段执行) -
import
命令静态执行,不能使用表达式和变量 - 重复执行同一句
import
命令,只会执行一次
4. export default
export default
就是输出一个叫做 default
的变量或方法,系统允许自定义命名
- 基本用法
// 默认输出一个函数
export default function () {console.log('foo');
}
// 引用并指定名字
import customName from './export-default';
export default
命令的本质是将后面的值,赋给 default
变量,所以可以直接将一个值写在 export default
之后
5. import()
为了实现在运行中加载模块,引入了 import()
函数,实现了动态加载。
- 基本用法
import('./myModule.js')
.then(({export1, export2}) => {// ...});
- 其他
import()
和 import
主要区别为前者是动态加载。import()
返回一个 Promise
对象,import()
加载模块成功以后,这个模块会作为一个对象,当作 then 方法的参数。import()
类似于 Node 的 require
方法,区别主要是前者是异步加载,后者是同步加载 import()
通常用于按需加载、条件加载、动态的模块路径
问题解答
// 1.
// 引入模块的某些变量(方法、类),配合 4、5 使用
import {xxx, xxxx} from 'xxx'
// 2.
// 引入模块的默认变量(方法、类),配合 6 使用
import xxx from 'xxx'
// 3.
// 实现动态加载,适用于按需加载等
import('../xxx')
// 4.
// 输出模块的变量(方法、类),对应引入方法为 1
let xxx = 'x'; export {xxx}
// 5.
// 输出模块的变量(方法、类),对应引入方法为 1
export class xxx {}
// 6.
// 输出模块默认的变量(方法、类),对应引入方法为 2
export default {}
// 7.
// 待更新
exports.post()
// 8.
// 待更新
module.exports.init = init;
参考文章
《ECMAScript 6 入门——阮一峰》