问题来了

在日常开发中，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};
  • 注意项
  1. export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
  2. 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';
  • 注意项
  1. 引入变量只读，引入对象属性可改写
  2. from后面是文件路径（相对路径、绝对路径均可，可省略.js猴嘴；模块名，已配置模块位置）
  3. import命令提升至顶部先执行（编译阶段执行）
  4. import命令静态执行，不能使用表达式和变量
  5. 重复执行同一句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.// 输出模块的变量（方法、类），对应引入方法为1let xxx = 'x'; export {xxx}// 5.// 输出模块的变量（方法、类），对应引入方法为1export class xxx {}// 6.// 输出模块默认的变量（方法、类），对应引入方法为2export default {}// 7.// 待更新exports.post()// 8.// 待更新module.exports.init = init;

参考文章

《ECMAScript 6 入门——阮一峰》