在现代开发中，模块化已经成为了不可或缺的一部分。模块化可以帮助我们将代码组织成小而独立的单元，使得代码更加可维护、可扩展和可重用。而 ES6 的模块化，在此方面做得非常出色，它支持了类似于 Node.js 的 require() 和 exports 的方式来引入和输出模块，使得 JavaScript 的模块化更加规范化和易用化。
ES6 模块化的基本语法
在 ES6 中，我们可以使用 import 和 export 两个关键词来实现模块化。具体来说，我们可以使用如下的方式来导入和导出模块：
-- -------------------- ---- -------
-- ----
------ - --- - ---- -----------
------ --- ---- -----------
-- ----
------ -------- ----- - -- ---- ---
-------------------
-
------ ------- ----- --- - -- ----- ---
------------- -
-------------------
-
-这个例子中，我们通过 import 关键词导入两个模块，一个是 foo.js 中导出的 foo 变量，另一个是 bar.js 中默认导出的模块。同时，我们也通过 export 关键词导出了两个模块，一个是函数 baz，另一个是默认导出的类 Qux。
需要注意的是，默认导出是一个模块只能有一个的。它的导入方式有所不同，我们需要使用 import 关键词后跟上 as 关键词来给默认导出的模块起一个别名，示例如下：
// 导入默认导出的模块
import MyClass from './my-class.js';
// 给默认导出的模块起一个别名
import { default as MyClass } from './my-class.js';实战演练
接下来让我们通过一个实例来演示如何使用 ES6 模块化在项目中实现代码分离和模块化组织。假设我们有一个项目，其中包含两个页面：一个是登录页面，另一个是注册页面。我们希望将这两个页面的代码分开管理，并将它们的公共组件抽象出来。
首先，我们可以在项目根目录下创建一个叫做 src 的文件夹，然后在该文件夹下创建三个文件夹：components、login 和 register，分别用于存放公共组件、登录页面和注册页面的源码。接着，我们可以在这些目录下创建相应的文件：
-- -------------------- ---- -------
-- -------------------
------ ------- ----- ----- -
------------------ -
---------- - ------
-
-------- -
-------------- - -----------
-
-
-- --------------
------ ----- ---- -------------------------
----- ----- - --- ---------------
---------------
----------------- -- --- ----- --------
-- -----------------
------ ----- ---- -------------------------
----- ----- - --- ------------------
---------------
----------------- -- --- -------- --------在这个例子中，我们创建了一个 Title 组件，并将其导出。然后，在 login 和 register 目录下，我们分别导入该组件，并使用它来设置当前页面的标题，并在控制台中输出一些文本。
最后，我们可以使用一个 HTML 文件来测试这些代码。假设我们在这个文件中分别引入 login/index.js 和 register/index.js，那么我们应该能够在控制台中看到类似于下面的输出：
Login This is the login page. Register This is the register page.
总结
通过本文，我们了解了 ES6 的模块化语法，及其在项目中实现代码分离和模块化组织的方法。不过需要注意的是，在实际开发中，我们可能需要将多个模块打包成一个文件，以减少 HTTP 请求的次数，并提高页面加载速度。这时，我们可以使用工具如 webpack 来进行打包操作。希望本文对你有所启发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2bf12f6b2d6eab3e027e7