了解JavaScript里的模块化
什么是模块化
JavaScript 模块化编程是一种将代码按照功能划分成独立的模块，通过导入和导出模块，实现代码的复用和管理的编程方式。在传统的 JavaScript 开发中，所有的代码都是放在同一个全局命名空间下，容易造成变量名冲突和代码结构混乱。而模块化编程则通过将代码分离成独立的模块来解决这些问题。
在 ES6 之前，JavaScript 没有原生的模块化系统，这使得在编写大型应用程序时很难管理代码。为了解决这个问题，社区提出了一些模块化规范，其中最流行的是 CommonJS、AMD 和 UMD。
CommonJS
CommonJS 是一种模块化规范，它最初是为 Node.js 设计的。它的主要思想是将模块定义为一个对象，该对象可以通过 require() 函数加载。每个模块都有自己的作用域，可以使用 module.exports 或 exports 导出模块中的函数和变量。
当你使用 exports 导出模块的成员时，实际上是在修改 module.exports 对象。
例如，我们可以创建一个名为 math.js 的模块，其中包含一些数学函数：
// math.js
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
module.exports = {
add: add,
subtract: subtract,
};
然后，在另一个文件中，我们可以使用 require() 函数加载 math.js 模块并调用其中的函数：
// app.js
const math = require("./math");
console.log(math.add(2, 3)); // 输出 5
console.log(math.subtract(5, 2)); // 输出 3
AMD
AMD（Asynchronous Module Definition）是另一种模块化规范，它主要用于浏览器环境中异步加载模块。AMD 使用 define() 函数定义模块，并使用 require() 函数加载模块。
例如，我们可以创建一个名为 math.js 的模块，其中包含一些数学函数：
// math.js
define(function () {
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
return {
add: add,
subtract: subtract,
};
});
然后，在另一个文件中，我们可以使用 require() 函数异步加载 math.js 模块并调用其中的函数：
// app.js
require(["math"], function (math) {
console.log(math.add(2, 3)); // 输出 5
console.log(math.subtract(5, 2)); // 输出 3
});
UMD
UMD（Universal Module Definition）是一种通用的模块化规范，它可以在浏览器和 Node.js 环境中使用。UMD 会检测当前环境，如果是 Node.js，则使用 CommonJS 规范加载模块；如果是浏览器，则使用 AMD 规范加载模块。
例如，我们可以创建一个名为 math.js 的模块，该模块使用 UMD 规范：
// math.js
(function (root, factory) {
if (typeof define === "function" && define.amd) {
// AMD
define([], factory);
} else if (typeof exports === "object") {
// Node.js/CommonJS
module.exports = factory();
} else {
// 浏览器全局变量
root.math = factory();
}
})(this, function () {
function add(a, b) {
return a + b;
}
function subtract(a, b) {
return a - b;
}
return {
add: add,
subtract: subtract,
};
});
然后，在另一个文件中，我们可以使用 require() 或者直接访问全局变量 math 来加载 math.js 模块并调用其中的函数：
// app.js
const math = require("./math");
console.log(math.add(2, 3)); // 输出 5
console.log(math.subtract(5, 2)); // 输出 3
原生的模块化系统
ES6（ECMAScript 2015）引入了原生的模块化系统，使用 import 和 export 关键字来声明和导出模块。
导出（export）
通过使用 export 关键字，可以将模块中的函数、变量、类或对象导出为公共接口，以便其他模块可以访问和使用它们。导出可以有多个命名导出和默认导出。
// 命名导出
export const name = "John";
export function sayHello() {
console.log("Hello!");
}
// 默认导出
export default class Person {
constructor(name) {
this.name = name;
}
}
导入（import）
使用 import 关键字可以从其他模块中导入所需的函数、变量、类或对象。可以使用相对路径或绝对路径指定要导入的模块。
// 导入命名导出
import { name, sayHello } from "./module";
// 导入默认导出
import Person from "./module";
// 导入并重命名
import { name as myName } from "./module";
// 导入所有命名导出
import * as module from "./module";
动态导入（Dynamic Import）
ES6 还引入了动态导入，允许在运行时根据需要动态加载模块。动态导入返回一个 Promise，可以使用 await 或 .then() 处理导入的模块。
// 动态导入
import("./module")
.then((module) => {
// 使用导入的模块
console.log(module.name);
})
.catch((error) => {
// 处理导入错误
console.error(error);
});
模块的默认执行顺序：模块在首次导入时只会执行一次，之后会被缓存起来供后续的导入使用。这意味着模块中的顶层代码只会在第一次导入时执行。
// module.js
console.log("Module executed.");
export function sayHello() {
console.log("Hello!");
}
// main.js
import { sayHello } from "./module"; // Module executed.
sayHello(); // Hello!
模块的循环依赖
ES6 模块系统支持循环依赖，但要注意避免出现循环依赖的情况，因为它可能导致意想不到的问题。
注意事项
- CommonJS和AMD等其他模块规范是运行时加载，而ES6原生模块化系统是编译时加载。
- ES6原生模块化系统的导入和导出只能发生在顶级作用域中，不能在函数或块级作用域中使用。