在前端开发中，模块化开发一直是一个重要的话题。在日常开发中，使用模块化引入第三方库、组件和自定义模块已经成为标配。但是，在 JavaScript 中实现模块化却一直很困难，需要依赖于一些工具库。随着 ECMAScript 2019 中加入的模块化导入导出语法，JavaScript 开发将变得更加方便，本文将从以下四个方面介绍这种新语法。
模块化的缘由
模块化开发是为了解决以下问题：
代码复用：模块化可以把多个功能相近的代码组合在一个模块里面，减少代码重复。
代码维护：模块化可以把代码分为多个小块，每个小块只负责一部分功能，减少代码的复杂性，便于维护。
依赖管理：模块化可以帮助开发者管理不同部分的依赖关系，提高代码的可靠性和可复用性。
在 ECMAScript 2019 中，JavaScript 引入了一种更加便捷的模块化编程方式，通过 import 和 export 关键字实现模块导入和导出。
导出模块
在模块中通过 export 关键字导出模块：
//module.js
//导出函数
export function sayHello(name) {
console.log(`Hello ${name}!`);
}
//导出变量
export const PI = 3.14;使用 export 关键字可以导出纯函数、类、变量及默认导出。其中，export default 表示默认导出，一个模块中只能有一个默认导出。
导入模块
在其他文件中通过 import 关键字导入模块：
-- -------------------- ---- ------- ---------- ------ ------ ---------- ---- -------------- ------ ------ ---- ---- -------------- -------- ------ --- ---- -------------- ---------------- ---------------- ----------------------
使用 import 可以导入指定模块，并可以使用解构，从而提高代码可读性。
小结
export和import是 ES6 中新增的关键字。通过
export关键字可以导出模块，通过import关键字可以导入模块。export default表示默认导出。可以同时从一个模块中导入多个模块，也可以从一个文件中导入多个模块。
模块化案例
以下是一个简单的模块化案例。
-- -------------------- ---- -------
------------
------ -------- -------------- -
------------------ -----------
-
------------
------ ----- -- - -----
----------
------ ---------- ---- ---------------
------ ---- ---- ---------------
----------------
----------------总结
模块化开发是前端开发中的一个重要话题，通过模块化可以方便代码管理、复用和维护。ECMAScript 2019 中加入的模块化导入导出语法可以更加方便地实现 JavaScript 中的模块化。本文从模块化的缘由、示例、导入和导出四个方面详细介绍了 ECMAScript 2019 的模块化导入导出语法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e6fb44f6b2d6eab3251107