2.5.2 export、import命令

在使用 ES6 的模块化设计时最常遇到的问题就是如何导入、导出属性和方法，在创建或者使用对应的 js 文件时常用 export 命令导出对应的属性和方法、import 命令导入对应的属性和方法。

1. export 命令

一个模块就是一个独立的文件，文件内部的所有变量外部无法获取。如果希望外部能够读取模块内部的某个变量，就必须使用 export 关键字输出该变量。

示例 32 是一个 JS 文件（假设文件名为 profile.js ），使用 export 命令输出变量。export 命令对外部输出了 3 个变量。除了第一种写法之外，还有另一种写法是使用大括号指定要输出的一组变量。它与第一种写法是等价的，但是应该优先使用第二种写法。因为第二种写法可以直接写在脚本尾部，方便集中管理 。

示例32

// 第一种写法
export var firstName = "黄";
export var lastName = "子涵";
export var brother = "黄春钦";
export var mother = "陈兰英";
 
// 第二种写法
var firstName = "黄";
var lastName = "子涵";
var brother = "黄春钦";
var mother = "陈兰英";
export { firstName, lastName, brother, mother };

export 命令除了输出变量，还可以输出函数，如示例 33 所示。

示例 33

// 导出单个函数
export function multiply(hzh, hcq, cly) {
    return hzh*hcq*cly;
};
 
// 导出多个函数
function hzh() {}
function hcq() {}
function cly() {}
export {
    hzh,hcq,cly
};

2. import 命令

使用 export 命令定义模块的对外接口以后，其他 JS 文件就可以通过 import 命令加载这个模块。

import 命令用于加载其他的文件，并从中输入变量。import 命令接受一对大括号，里面指定要从其他模块导入的变量名（或者函数名），大括号里面的变量名必须与被导入模块（profile.js）对外接口的名称相同。如示例 34 所示。

示例 34

import { hzh, hcq, cly } from './family.js';
 
function setFamily(member) {
    member.textContent = hzh + '，' + hcq + '，' + cly;
}

注意

import 命令输入的变量都是只读的，因为它的本质是输入接口。也就是说，不允许在加载模块的脚本中改写接口。如果导入的是一个对象，改写对象的属性是允许的，但是这种改写不推荐使用，建议凡是输入的变量，都当作完全只读，轻易不要改变它的属性。

import 后面的 from 指定模块文件的位置，可以使用相对路径，也可以使用绝对路径，.js 后缀可以省略。