简介
ECMAScript 是一种标准的编程语言,随着前端语言的发展,它也不断地更新与完善。其中,ECMAScript 2017 在模块化方面做出了重大的改进,引入了 import 和 export 语句。这两个语句为 JavaScript 提供了更加强大、灵活的模块化开发能力。
import 语句
import 语句是 ECMAScript 2017 中新增的语句之一,用于从一个模块中加载一个或多个导出的功能。它的基本语法如下:
------ ------------- ---- -------------- ------ - -- ---- ---- -------------- ------ - ------- - ---- -------------- ------ - ------- -- ------ - ---- -------------- ------ - ------- - ------- - ---- -------------- ------ - ------- - ------- -- ------ - ----- - ---- --------------
其中,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";
按需导入默认导出
对于只导出了一个默认功能的模块,可以使用按需导入默认导出的方式,用以加载模块的默认输出。
-- ----- ------ ------- ---------- -- ------ ------ ---- -------------- --------- -- ------
导入一个命名导出
当只需导入一个命名导出时,可以直接使用其名称进行导入。
-- ----- ------ -------- -------- -- ------ - ------ - ---- -------------- --------- -- ----- --------
导入多个命名导出
当需要导入多个命名导出时,也可以通过它们的名称列表直接导入使用。
-- ----- ------ -------- ------- --- ------ -------- ------- -- ------ - ------ ----- - ---- -------------- -------- -- -- ----- -------- -- -- -----
导入多个命名导出并重命名
有时候,导出的名称可能与本地变量或函数的名称冲突,这时就需要使用重命名语法。
-- ----- ------ -------- --------- --- ------ -------- --------- -- ------ - ------- -- ------ ------- -- ----- - ---- -------------- -------- -- -- ------- -------- -- -- -------
导入模块中的所有导出
import *
语法可以让我们导入模块中的所有导出,可以使用 import *
来重命名导出。
-- ----- ------ -------- ------- --- ------ -------- ------- -- ------ - -- -------- ---- -------------- ----------------- -- -------- ---- ------- -- ----------------- -- -------- ---- ------- --
export 语句
export 语句用来自定义模块的对外接口,多个 export 语句可以出现在一个模块中。它的基本语法如下:
-- -------- ------ ------- ----------- -- ------ ------ -------- -------- --- -- ------ ------ ----- ------- - ---- -- ----- ------ ----- ------- ---
示例代码
黄金几何数学库(geometry.js),定义了一些计算几何数学的函数,如圆周率 Pi,欧拉数,弧角、角度互换等。
-- ----------- ------ ----- -- - ----------------------- ------ ----- - - ----------------------- ------ -------- ---------------------- - ------ ------- - -- - ---- - ------ -------- --------------------- - ------ ------ - --- - --- -
几何数学库的客户端(client.js)可以根据需要从 geometry.js 中导入需要的函数或常量。
-- --------- ------ - --- -- ------------- - ---- ---------------- ----- ----------- - ------------------ --------------- ------- ------ -- ------ ------ -- ------------ - --------- --------------- ------ -- ---- -------------------- ------- -- ---
通过这个示例,我们可以体会到 import 和 export 语句的威力,使得客户端代码与已有的库模块进行了解耦,提高了模块封装性与模块用户的使用体验。
总结
ECMAScript 2017 中的 import 和 export 语句为 JavaScript 提供了强大的模块化开发能力。通过准确的导入和导出,可以轻松构造易于维护和扩展的 JavaScript 应用程序。
在使用 import 和 export 语句时,需要注意代码的组织结构、命名空间等问题。根据项目的特点,选择合适的导入和导出方式,可以让代码更加健壮、更易于维护。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64fec88e95b1f8cacdd74e84