在前端开发中，模块化是一个非常重要的概念。ES6 之前，开发者们通常使用 CommonJS 或者 AMD 等模块化方案来组织自己的代码。随着 ES6 的发布，原生支持了模块化，这使得开发者们可以更加方便地编写和组织自己的代码。而在 ES9 中，模块导入和导出的功能又得到了一些新的改进和增强。
模块导出
在 ES6 中，我们可以使用 export 关键字将一个变量、函数或者类导出为一个模块。例如：
-- -------------------- ---- ------- -- ------ ------ ----- ---- - ------ -- ------ ------ -------- ---------- - ---------------------- - -- ----- ------ ----- ------ - ----------------- ---- - --------- - ----- -------- - ---- - ---------- - ------------------- --- ------------- ----------- ----- ------- - -展开代码
在 ES9 中，我们可以使用 export 关键字的另一种形式 export default 来导出一个默认的模块。例如：
-- -------------------- ---- ------- -- --------- ------ ------- ---------- - ------------------- --------- - -- -------- ------ ------- ----- - ----------------- ---- - --------- - ----- -------- - ---- - ---------- - ------------------- --- ------------- ----------- ----- ------- - -展开代码
需要注意的是，一个模块只能有一个默认导出，而且默认导出不需要使用大括号包裹。
模块导入
在 ES6 中，我们可以使用 import 关键字来导入一个模块。例如：
// 导入一个变量 import { name } from "./example.js"; // 导入一个函数 import { sayHello } from "./example.js"; // 导入一个类 import { Person } from "./example.js";
在 ES9 中，我们可以使用 import() 函数来动态地导入一个模块。这个函数返回一个 Promise，可以在 Promise 被解决后获取导入的模块。例如：
// 动态导入一个模块 import("./example.js").then(module => { module.sayHello(); });
需要注意的是，import() 函数只能在代码的顶层作用域中使用，不能在函数内部使用。
模块的循环依赖
在模块化的开发中，循环依赖是一个非常常见的问题。循环依赖指的是两个或多个模块相互依赖，导致它们之间形成了一个循环。例如：
-- -------------------- ---- ------- -- ----------- ------ - --- - ---- ---------------- ------ -------- ----- - ----------------- - -- ----------- ------ - --- - ---- ---------------- ------ ----- --- - ------- -------- ------展开代码
在 ES6 中，这种循环依赖会导致代码出现问题。但在 ES9 中，这种循环依赖可以被解决。ES9 引入了一个新的关键字 import()，可以在运行时动态地加载一个模块。例如：
-- -------------------- ---- ------- -- ----------- ------ -------- ----- - ----------------------------------- -- - ------------------------ --- - -- ----------- ------ - --- - ---- ---------------- ------ ----- --- - ------- -------- ------展开代码
这样，我们就可以解决循环依赖的问题了。
总结
ES9 中的模块导入和导出带来了一些新的改进和增强，使得模块化的开发更加方便和灵活。在开发中，我们需要注意模块的导出和导入的使用方式，以及模块的循环依赖问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650a5cec95b1f8cacd4b8202
