JavaScript中的模块
本文解释了JavaScript中的模块。
YouTube Video
JavaScript中的模块
JavaScript中的模块是一种组织代码和将其分割成可重用组件的方法。通过使用模块，可以提高代码的可读性和可维护性，并且可以在其他项目中重用相同的功能。本文将从模块的概念到具体的使用示例，解释各种模块系统。
JavaScript模块的概念
JavaScript最初没有模块化系统。然而，随着应用规模的扩大，模块化变得至关重要，用于将代码划分为可重用的小单元。模块是一段具有特定功能的代码块，可以独立于其他代码进行管理，从而可以将其划分到多个文件中。
模块的主要类型
JavaScript中有多种模块系统。最常见的是ES模块（ESM）和CommonJS。
-
ES模块 是在ECMAScript 2015（ES6）中引入的模块系统，使用
import和export关键字来定义模块。这一系统广泛用于客户端（浏览器）和服务器端（Node.js）。 -
CommonJS 是一种主要用于 Node.js 的模块系统。模块使用
require和module.exports来定义导入和导出的文件。
ES模块（ESM）的详细信息
ES模块是JavaScript中的标准模块系统，可以轻松实现模块间的功能交换。在浏览器和Node.js中，这一系统被用于定义和导入模块。
export 和 import
export 是一个用于将模块功能暴露给外部的关键字。import 用于引入其他模块中定义的功能。
示例：模块导出
可以通过以下方式在 ES模块 中导出模块。
1// math.mjs
2export function add(a, b) {
3 return a + b;
4}
5export function subtract(a, b) {
6 return a - b;
7}在这个 math.mjs 模块中，add 和 subtract 这两个函数被导出。这些函数可以从其他模块中导入。
这里的 .mjs 是一种文件扩展名，明确表示该文件是ES模块格式的JavaScript文件。在 Node.js 中，文件扩展名决定了它是 CommonJS 还是 ES模块。但是，如果在 package.json 中指定了 type: "module"，那么扩展名为 .js 的文件会被默认当作 ES模块 处理。
示例：模块导入
可以通过以下方式在 ES模块 中导入模块。
1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3
通过使用import，您可以轻松使用其他文件中定义的函数。
默认导出与命名导出
模块有两种导出方法。一种是命名导出，另一种是默认导出。
- 命名导出用于从模块中导出多个函数或变量。您可以执行多个导出，在导入时通过指定的名称接收它们。
1// utils.mjs
2export function sum(a, b) {
3 return a + b;
4}
5export function multiply(a, b) {
6 return a * b;
7}1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6)); // 10
5console.log(multiply(3, 5)); // 15
- 默认导出用于从模块中导出单个函数或类。在导入时，可以使用任意名称接收。
1// greet.mjs
2export default function greet() {
3 return "Hello, World!";
4}1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"
每个模块只能有一个默认导出，而命名导出可以同时导出多个元素。
在客户端（浏览器）中的使用示例。
示例：模块导出
可以通过以下方式在 ES模块 中导出模块。
1// utils.js
2export function sum(a, b) {
3 return a + b;
4}
5export function multiply(a, b) {
6 return a * b;
7}在这个 utils.js 模块中，sum 和 multiply 这两个函数被导出。
示例：模块导入
在客户端可以通过以下方式导入模块。
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <title>ES Modules Sample in HTML</title>
6</head>
7<body>
8 <h1>ES Modules Sample</h1>
9 <div id="result"></div>
10
11 <script type="module">
12 import { sum, multiply } from './utils.js';
13
14 const result = `
15 <p>sum(3, 5) = ${sum(3, 5)}</p>
16 <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17 `;
18
19 document.getElementById('result').innerHTML = result;
20 console.log(sum(3, 5)); // 8
21 console.log(multiply(10, 7)); // 70
22 </script>
23</body>
24</html>- 通过将
<script>标签的type属性设置为module，可以在HTML中使用import、export等ES模块语法。 import语句会加载外部的utils.js并显示结果。
CommonJS 的详细介绍
CommonJS 是一个主要用于 Node.js 的模块系统。模块通过module.exports和require来导出和导入。
require 和 module.exports
在 CommonJS 中，使用module.exports来导出模块。同时，使用require来使用其他文件中的模块。
示例：模块导出
可以通过以下方式在 CommonJS 中导出模块。
1// math.js
2module.exports = {
3 add: function(a, b) {
4 return a + b;
5 },
6 subtract: function(a, b) {
7 return a - b;
8 }
9};示例：模块导入
可以通过以下方式在 CommonJS 中导入模块。
1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7)); // 11
5console.log(math.subtract(9, 2)); // 7
在 Node.js 中，默认使用 CommonJS 作为模块系统，但也支持 ES 模块。
动态导入
在 JavaScript 中，可以使用import()动态导入模块。这种方法利用异步处理根据需要加载模块。
可以通过以下方式进行动态导入。
1async function loadModule() {
2 const math = await import('./math.js');
3 console.log(math.add(5, 3)); // 8
4}
5
6loadModule();动态导入是提高应用程序性能的一种方式。由于可以在需要时加载模块，而不是在初始加载时加载所有模块，因此可以提高页面显示速度。
模块的优势
-
代码可重用性
- 模块化的代码可以在其他项目中重复使用。通过创建具有通用功能的模块，并在多个应用程序中使用它们，可以显著提高开发效率。
-
提升可维护性
- 通过将代码分割成模块，修改特定功能或部分会更加容易。将代码管理成小单元有助于更轻松地查找和修复错误。
-
避免命名空间冲突
- 在全局作用域中定义许多变量和函数会导致命名冲突，但模块化可以防止这种情况，并有助于维护更清晰的代码库。
-
依赖管理
- 使用模块可以让你明确地管理应用程序的依赖关系。可以明确知道哪个模块依赖于其他模块，从而使代码结构更加清晰易懂。
总结
JavaScript 的模块系统是组织代码并将其拆分为可重复使用组件的一种强大方式。通过理解 ES 模块和 CommonJS 之间的差异，并根据项目选择适合的模块系统，可以提高代码的可读性和可维护性。此外，通过利用动态导入，可以优化应用程序性能。
让我们利用模块系统构建更具可扩展性和高效的 JavaScript 应用程序。
您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。