简介
ECMAScript 是一种标准的编程语言，随着前端语言的发展，它也不断地更新与完善。其中，ECMAScript 2017 在模块化方面做出了重大的改进，引入了 import 和 export 语句。这两个语句为 JavaScript 提供了更加强大、灵活的模块化开发能力。
import 语句
import 语句是 ECMAScript 2017 中新增的语句之一，用于从一个模块中加载一个或多个导出的功能。它的基本语法如下：
import defaultExport from "module-name";
import * as name from "module-name";
import { export1 } from "module-name";
import { export1 as alias1 } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";其中，import 语句分为以下几种：
- 按需导入默认导出：
import defaultExport from "module-name"; - 导入一个命名导出：
import { export1 } from "module-name"; - 导入多个命名导出：
import { export1 , export2 } from "module-name"; - 导入多个命名导出并重命名：
import { export1 as alias1 , export2 as alias2 , [...] } from "module-name"; - 导入模块中的所有导出：
import * as name from "module-name";
按需导入默认导出
对于只导出了一个默认功能的模块，可以使用按需导入默认导出的方式，用以加载模块的默认输出。
// 模块导出: export default function() {}
import myFunc from "module-name";
myFunc(); // 使用默认输出导入一个命名导出
当只需导入一个命名导出时，可以直接使用其名称进行导入。
// 模块导出: export function myFunc() {}
import { myFunc } from "module-name";
myFunc(); // 使用导出的 myFunc()导入多个命名导出
当需要导入多个命名导出时，也可以通过它们的名称列表直接导入使用。
// 模块导出: export function func1() {}; export function func2() {}
import { func1, func2 } from "module-name";
func1(); // 使用 func1
func2(); // 使用 func2导入多个命名导出并重命名
有时候，导出的名称可能与本地变量或函数的名称冲突，这时就需要使用重命名语法。
// 模块导出: export function myFunc1() {}; export function myFunc2() {}
import { myFunc1 as func1, myFunc2 as func2 } from "module-name";
func1(); // 使用 myFunc1
func2(); // 使用 myFunc2导入模块中的所有导出
import * 语法可以让我们导入模块中的所有导出，可以使用 import * 来重命名导出。
// 模块导出: export function func1() {}; export function func2() {}
import * as myModule from "module-name";
myModule.func1(); // myModule 对象中的 func1() 函数
myModule.func2(); // myModule 对象中的 func2() 函数export 语句
export 语句用来自定义模块的对外接口，多个 export 语句可以出现在一个模块中。它的基本语法如下：
// javascriptcn.com 代码示例
// 对外导出默认功能
export default expression;
// 对外导出函数
export function myFunc() {};
// 对外导出常量
export const myConst = 123;
// 对外导出类
export class myClass {};示例代码
黄金几何数学库（geometry.js），定义了一些计算几何数学的函数，如圆周率 Pi，欧拉数，弧角、角度互换等。
// javascriptcn.com 代码示例
// geometry.js
export const Pi = 3.14159265358979323846;
export const E = 2.71828182845904523536;
export function angleToRadian(degrees) {
return degrees * Pi / 180;
}
export function radianToAngle(radian) {
return radian * 180 / Pi;
}几何数学库的客户端（client.js）可以根据需要从 geometry.js 中导入需要的函数或常量。
// client.js
import { Pi, E, angleToRadian } from "./geometry.js";
const radianValue = angleToRadian(90);
console.log("90 degrees equals to radian value: ", radianValue, " radian");
console.log("Pi value: ", Pi);
console.log("Euler's number: ", E);通过这个示例，我们可以体会到 import 和 export 语句的威力，使得客户端代码与已有的库模块进行了解耦，提高了模块封装性与模块用户的使用体验。
总结
ECMAScript 2017 中的 import 和 export 语句为 JavaScript 提供了强大的模块化开发能力。通过准确的导入和导出，可以轻松构造易于维护和扩展的 JavaScript 应用程序。
在使用 import 和 export 语句时，需要注意代码的组织结构、命名空间等问题。根据项目的特点，选择合适的导入和导出方式，可以让代码更加健壮、更易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fec88e95b1f8cacdd74e84