一、回调地狱
回调地狱（Callback Hell），也称为回调地狱，是指在 JavaScript 中处理多个嵌套的异步回调函数时，代码结构变得非常难以阅读和维护的现象。
为什么会出现回调地狱？
回调地狱通常出现在需要执行多个异步操作的场景中，特别是当这些异步操作之间有依赖关系时。为了在每个异步操作完成后执行下一个操作，你通常需要将回调函数嵌套在另一个回调函数中。随着操作增多，代码结构会变得越来越复杂，逐渐形成嵌套的“地狱”层次。
示例：回调地狱
以下是一个典型的回调地狱示例，假设你有多个异步操作需要依次执行：
asyncOperation1(function(result1) {asyncOperation2(result1, function(result2) {asyncOperation3(result2, function(result3) {asyncOperation4(result3, function(result4) {console.log(result4);});});});
});
在这个例子中，每次异步操作都需要嵌套在上一个操作的回调函数中。如果有很多异步操作，嵌套层数会迅速增加，导致代码变得非常难以维护，且容易出现错误。
回调地狱的特点：
-
嵌套层级深：每个回调都需要嵌套在上一个回调函数内，形成多层嵌套。
-
代码不易读：随着嵌套层数增加，代码的可读性和可维护性大大降低。
-
错误处理困难：当异步操作失败时，需要仔细地在每个回调函数中处理错误，如果有多个层次的回调，错误的捕获和处理变得复杂。
-
调试困难：在复杂的嵌套回调中，错误的定位和调试变得更加困难。
二、promise异步编程
Promise 是 JavaScript 中处理异步操作的一种机制，它提供了一种方式来处理那些需要较长时间执行的操作（如网络请求、文件读取等），使得这些操作能够在完成时通知你结果，并且提供了一种更清晰、可控的方式来处理异步代码，避免了回调地狱（Callback Hell）的问题。
Promise 的基本概念
Promise 是一种表示 异步操作最终完成 或 失败 的对象，且能够在异步操作完成时提供结果值（成功的结果或失败的原因）。
Promise 有三个状态：
-
Pending（等待中）：表示异步操作尚未完成。
-
Fulfilled（已完成）：表示异步操作已经成功完成，Promise 对象返回一个结果值。
-
Rejected（已拒绝）：表示异步操作失败，Promise 对象返回一个错误原因。
Promise 的使用
1. 创建 Promise
Promise 对象可以通过 new Promise 来创建。Promise 构造函数接受一个函数作为参数，这个函数有两个参数：resolve 和 reject，分别用于处理成功的结果和失败的结果。
let promise = new Promise((resolve, reject) => {// 异步操作（例如：网络请求、文件读取等）let success = true; // 假设这个变量决定了操作是否成功if (success) {resolve("操作成功");} else {reject("操作失败");}
});
2. 使用 .then() 和 .catch() 方法
-
.then()用于处理成功的结果。 -
.catch()用于处理失败的结果。
promise.then(result => {console.log(result); // 如果 Promise 成功，输出：操作成功}).catch(error => {console.log(error); // 如果 Promise 失败，输出：操作失败});
3. 链式调用
由于 then 和 catch 方法本身会返回一个新的 Promise，所以你可以链式调用多个 then()，按顺序处理异步操作。
new Promise((resolve, reject) => {resolve("第一个操作成功");
}).then(result => {console.log(result); // 输出：第一个操作成功return "第二个操作成功"; // 返回新的结果给下一个 then()}).then(result => {console.log(result); // 输出：第二个操作成功return "第三个操作成功"; // 返回新的结果}).then(result => {console.log(result); // 输出：第三个操作成功});
4. 异步操作的错误处理
当链中的任何 then() 出现错误时，错误会被传递到最近的 catch() 方法。
new Promise((resolve, reject) => {resolve("开始");
}).then(result => {console.log(result); // 输出：开始throw new Error("发生了错误"); // 主动抛出一个错误}).catch(error => {console.log(error.message); // 输出：发生了错误});
5. Promise.all()
Promise.all() 接受一个包含多个 Promise 对象的数组，返回一个新的 Promise，当所有传入的 Promise 都完成时，新的 Promise 就会变成 fulfilled，如果有一个 Promise 被 rejected，那么新的 Promise 就会立即 rejected，并且返回失败的原因。
let promise1 = new Promise((resolve, reject) => setTimeout(resolve, 100, '第一个任务完成'));
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 200, '第二个任务完成'));
let promise3 = new Promise((resolve, reject) => setTimeout(resolve, 300, '第三个任务完成'));Promise.all([promise1, promise2, promise3]).then(results => {console.log(results); // 输出：["第一个任务完成", "第二个任务完成", "第三个任务完成"]}).catch(error => {console.log(error); // 如果其中一个 Promise 被拒绝，输出错误});
6. Promise.race()
Promise.race() 返回的 Promise 会在第一个 Promise 完成时立即返回结果，无论这个 Promise 是 fulfilled 还是 rejected，其他 Promise 会被忽略。
let promise1 = new Promise((resolve, reject) => setTimeout(resolve, 100, '第一个任务完成'));
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 200, '第二个任务完成'));Promise.race([promise1, promise2]).then(result => {console.log(result); // 输出：第一个任务完成});
7. Promise.allSettled()
Promise.allSettled() 接受一个包含多个 Promise 对象的数组，返回一个新的 Promise，这个新的 Promise 会在所有的 Promise 都完成后 resolved，不论它们是 fulfilled 还是 rejected。
let promise1 = new Promise((resolve, reject) => setTimeout(resolve, 100, '第一个任务完成'));
let promise2 = new Promise((resolve, reject) => setTimeout(reject, 200, '第二个任务失败'));Promise.allSettled([promise1, promise2]).then(results => {console.log(results); // 输出： // [// { status: 'fulfilled', value: '第一个任务完成' },// { status: 'rejected', reason: '第二个任务失败' }// ]});
8. Promise.finally()
finally() 方法在 Promise 执行完后，无论成功还是失败都会被调用，通常用于清理操作。
new Promise((resolve, reject) => {resolve("任务成功");
}).then(result => {console.log(result); // 输出：任务成功}).finally(() => {console.log("清理操作"); // 输出：清理操作});
总结
-
Promise 提供了一种优雅的方式来处理异步操作，避免了回调地狱问题。
-
then()用于处理成功结果，catch()用于处理失败结果，finally()用于执行无论成功还是失败都要执行的操作。 -
可以使用
Promise.all()、Promise.race()、Promise.allSettled()等方法来处理多个 Promise 的执行。
如何避免回调地狱？
1、使用 Promise：通过 Promise 可以链式调用，使代码更加平坦和可读，避免多层嵌套。
asyncOperation1().then(result1 => asyncOperation2(result1)).then(result2 => asyncOperation3(result2)).then(result3 => asyncOperation4(result3)).then(result4 => console.log(result4)).catch(error => console.log(error));
2、使用 async/await：async/await 是基于 Promise 的语法糖，它使得异步代码看起来像同步代码一样，极大提高了代码的可读性。
async function runOperations() {try {let result1 = await asyncOperation1();let result2 = await asyncOperation2(result1);let result3 = await asyncOperation3(result2);let result4 = await asyncOperation4(result3);console.log(result4);} catch (error) {console.log(error);}
}runOperations();
3、模块化与函数拆分：将复杂的回调操作拆分成多个小函数，减少代码的嵌套层级，使得每个函数的职责更加明确。
三、 Proxy和Reflect
-
Proxy：为对象的基本操作（如读取、写入、删除属性）提供了一种拦截和自定义行为的机制，可以让开发者在操作对象时插入自定义逻辑。 -
Reflect：提供了一组用于操作对象的标准方法，简化了对象操作并避免了副作用。它通常与Proxy一起使用，作为Proxy的默认行为执行器。
为什么会引入 Proxy？
-
拦截和自定义对象操作： JavaScript 的对象操作（如读取属性、设置属性、调用方法等）通常是隐式的，开发者无法直接拦截和修改这些操作。而有时在实际应用中，开发者需要自定义一些对象行为，比如实现属性访问的日志、验证属性值、对属性值进行处理等。
Proxy为此提供了一种机制，允许开发者在对象操作时插入自定义行为。例子： 假设你想在每次访问对象属性时记录日志。使用传统的方法，JavaScript 并没有提供直接的方式来做到这一点，但通过
Proxy，你可以轻松地拦截和定制这些操作。 -
简化复杂的操作： 在一些复杂场景下，比如需要做一系列连贯的对象拦截操作时，传统的 JavaScript 实现方式显得冗长、复杂且容易出错。
Proxy的引入可以大大简化这类任务，且代码更加简洁和易于管理。 -
动态对象控制：
Proxy允许你动态地控制对象的行为，使得你可以在运行时动态地指定对象的行为。通过Proxy，你可以拦截对象的读取、写入、删除属性等操作，而无需在每个操作点显式地编写代码。
为什么会引入 Reflect？
-
简化对象操作：
Reflect提供了一个规范化的 API，用于执行对象操作，目的是简化对对象的访问和修改。之前，JavaScript 提供了一些方法（如Object.defineProperty、Object.getOwnPropertyDescriptor等），但是它们有时不够简洁和易用，尤其是在动态操作对象时，Reflect让这些操作变得更加直观和统一。 -
标准化操作： 在使用
Proxy时，开发者可能需要在拦截操作中手动执行默认行为（例如读取属性时获取目标对象的值）。Reflect提供了一组与Proxy拦截器方法一一对应的 API，使得操作对象时能遵循标准、统一的方式，减少代码出错的几率。例子： 如果你拦截了对象的
get操作，但需要在某些情况下调用默认的行为，你可以使用Reflect.get()来获取目标对象的属性值，而无需手动调用目标对象的原始方法。 -
增强
Proxy的灵活性：Reflect和Proxy密切相关，Reflect提供了标准化的方法来执行对象的操作，通常用来在Proxy的 handler 函数中调用默认行为。Reflect的引入使得Proxy更加强大且易于使用，能够让开发者更加灵活地控制对象操作，并且能保持代码的简洁性。例子： 在
Proxy中，你可以使用Reflect来执行目标对象的默认操作，使得你的代码更加简洁且符合 JavaScript 的标准。 -
一致性与避免副作用：
Reflect方法在执行对象操作时，不会修改原始对象的行为或状态，而是返回执行结果。这避免了手动处理错误和副作用的问题，使得开发者可以更容易理解和控制对象的行为。
1、Proxy
Proxy 是一个用于创建对象代理的工具，可以通过 Proxy 来拦截和修改对对象的操作。Proxy 可以让你定义自定义的行为，来干预对象的基本操作，例如读取、写入、函数调用等。
创建 Proxy
Proxy 的构造函数接受两个参数：
-
target：表示目标对象，即我们要代理的对象。 -
handler：一个对象，定义了所有拦截行为（如读取、写入、删除属性等）的处理函数。
let handler = {get: function(target, prop, receiver) {console.log(`访问了属性: ${prop}`);return prop in target ? target[prop] : 37; // 如果属性不存在，返回 37}
};let proxy = new Proxy({}, handler);
proxy.name = "John"; // 赋值
console.log(proxy.name); // 读取，控制台输出 "访问了属性: name"，并且输出 "John"
console.log(proxy.age); // 读取，不存在的属性，控制台输出 "访问了属性: age"，并且输出 37
Proxy 的拦截方法
Proxy 中的陷阱是定义如何拦截和修改目标对象操作的函数。常见的陷阱包括：
-
get(target, prop, receiver)：拦截对对象属性的读取。 -
set(target, prop, value, receiver)：拦截对对象属性的赋值。 -
has(target, prop)：拦截in操作符。 -
deleteProperty(target, prop)：拦截delete操作符。 -
apply(target, thisArg, args)：拦截函数调用。 -
construct(target, args, newTarget)：拦截new操作符。
常见的 Proxy 使用示例
1 get：拦截属性读取
get 捕捉对目标对象的属性访问。可以修改返回值，或者对未定义的属性进行特殊处理。
get(target, prop, receiver) {
// target: 目标对象
// prop: 要访问的属性名称
// receiver: 用于执行该操作的代理对象
}
target（目标对象）
-
target是你传递给Proxy的原始对象。它表示你想要代理的对象，所有的get、set等操作最终都会作用于该对象。 -
target让你可以访问目标对象的实际数据，可以对其进行操作。
prop（属性名称）
-
prop是要访问的属性名称或键。在Proxy中，prop是你在代理对象上进行操作时所用的属性。 -
它是一个字符串或符号，表示你正在尝试访问的属性。
receiver（代理对象）
-
receiver是当前代理对象，指的是当前Proxy的实例。它是拦截操作的接收者。 -
在大多数情况下，
receiver会指向代理对象本身，但它在某些情况下也会指向原始对象（特别是在使用Proxy的继承时）。 -
在大多数情况下，
receiver只是代理对象的引用，因此你可能不常直接操作它。但它在某些复杂的场景中（如继承代理）很有用，特别是在多个代理链或继承代理时。
let target = {name: 'Alice',age: 30
};let handler = {get: function(target, prop) {if (prop in target) {return target[prop];} else {return `Property ${prop} does not exist`;}}
};let proxy = new Proxy(target, handler);console.log(proxy.name); // 'Alice'
console.log(proxy.age); // 30
console.log(proxy.nonExistent); // 'Property nonExistent does not exist'
2 set：拦截属性赋值
set 捕捉对目标对象属性的赋值，可以用于验证输入、转换数据等。
set(target, prop, value, receiver)（拦截属性赋值）
-
target：目标对象，指的是你要操作的原始对象。 -
prop：正在设置的属性名称或键。 -
value：赋给该属性的值。 -
receiver：代理对象。
let target = {name: 'Alice'
};let handler = {set: function(target, prop, value) {if (prop === 'name' && value === '') {console.log('Name cannot be empty!');} else {target[prop] = value;}return true;}
};let proxy = new Proxy(target, handler);proxy.name = 'Bob'; // 正常赋值
console.log(target.name); // 'Bob'proxy.name = ''; // 会触发警告
3 has：拦截 in 操作符
has 用于拦截 in 操作符，判断对象是否包含某个属性。
has(target, prop)（拦截 in 操作符）
-
target：目标对象，指的是你要操作的原始对象。 -
prop：要检查的属性名称。
let target = {name: 'Alice'
};let handler = {has: function(target, prop) {if (prop === 'name') {return true;} else {return false;}}
};let proxy = new Proxy(target, handler);console.log('name' in proxy); // true
console.log('age' in proxy); // false
4 deleteProperty：拦截 delete 操作符
deleteProperty 捕捉删除属性的操作，可以通过此方法定义删除属性的行为。
let target = {name: 'Alice',age: 30
};let handler = {deleteProperty: function(target, prop) {if (prop === 'name') {console.log('Cannot delete name!');return false; // 阻止删除}delete target[prop];return true;}
};let proxy = new Proxy(target, handler);delete proxy.name; // 会输出 'Cannot delete name!' 并阻止删除
console.log(target.name); // 'Alice'delete proxy.age; // 正常删除
console.log(target.age); // undefined
5 apply：拦截函数调用
apply 捕捉函数调用的操作，当通过 Proxy 调用函数时，会触发此陷阱。
apply(target, thisArg, args)（拦截函数调用）
-
target：目标函数。 -
thisArg：调用函数时的this值。 -
args：传递给函数的参数数组。
let target = function(x, y) {return x + y;
};let handler = {apply: function(target, thisArg, argumentsList) {console.log(`Arguments: ${argumentsList}`);return target(...argumentsList) * 2; // 执行原函数并返回两倍的结果}
};let proxy = new Proxy(target, handler);console.log(proxy(2, 3)); // Arguments: 2,3 => 10
6 construct：拦截 new 操作符
construct 捕捉构造函数的调用，允许自定义构造对象的行为。
construct(target, args, newTarget)（拦截 new 操作符）
-
target：目标构造函数。 -
args：传递给构造函数的参数数组。 -
newTarget：new操作符创建对象时使用的构造函数。
function Person(name, age) {this.name = name;this.age = age;
}let handler = {construct(target, args) {console.log(`Creating a new Person with arguments: ${args}`);return new target(...args); // 执行原构造函数}
};let proxy = new Proxy(Person, handler);let p = new proxy('Alice', 30);
console.log(p.name); // Alice
这里，construct 用来捕捉通过 new 创建对象的行为，并自定义构造函数的执行逻辑。
Proxy 的应用场景
1 验证和数据校验
Proxy 可以用来对对象属性的设置进行验证，确保数据的合法性。
let person = {name: '',age: 0
};let personProxy = new Proxy(person, {set(target, prop, value) {if (prop === 'name' && typeof value !== 'string') {throw new Error('Name must be a string');}if (prop === 'age' && typeof value !== 'number') {throw new Error('Age must be a number');}target[prop] = value;return true;}
});personProxy.name = 'John'; // Valid
personProxy.age = 25; // Valid
// personProxy.name = 123; // Throws Error: Name must be a string
2 访问控制
Proxy 可以用来实现访问控制，定义哪些属性可以被访问、修改或删除。
let user = {name: 'Alice',age: 30
};let handler = {get(target, prop) {if (prop === 'age') {return 'Restricted';}return target[prop];}
};let userProxy = new Proxy(user, handler);console.log(userProxy.name); // Alice
console.log(userProxy.age); // Restricted
总结
Proxy 是一种强大的元编程工具，允许你拦截和修改对对象的基本操作。它使得我们可以在不改变原对象的情况下，自定义对象的行为，常用于数据校验、访问控制、日志记录等场景。结合 Reflect，可以在实现代理的同时保持默认操作的行为，提供更加灵活的对象操作。
2、Reflect
Reflect 是 ES6 引入的一个对象，它包含一组方法，用于操作 JavaScript 对象的基本行为。与 Proxy 一起，Reflect 提供了一种更加一致和简洁的方式来处理对象的操作。Reflect 主要用于在拦截操作时调用默认行为，确保与 Proxy 中的拦截方法相匹配，并提供了对这些操作的更加明确和一致的控制。
Reflect 的方法与 Proxy 中的陷阱方法一一对应，因此它们通常用于与 Proxy 结合使用，但 Reflect 也可以独立使用。
上面的话不好理解，其实就是说reflect就是简化的proxy，假如有一个数组arr=[1,2,3,4],我们想获取数组里面的值的时候是不是通过数组的下标0，1，2，3。那如果此时用户输入负数呢？负数是不是就是从后往前数arr[-1]应该是4，那我们怎么去写代码呢？
let arr=[1,2,3,4]
let handler = {get(target, prop) {prop=Number(prop)if(prop<0){prop=prop+target.length//将负数加上数组就变为正数 ；例如-1+4=3 此时索引下标等于3}//如果不为负数就只是用内置函数访问就可以了return Reflect.get(target,prop); // 默认行为},};Reflect 的基本概念
Reflect 是一个 内置对象，它提供了一些静态方法，这些方法与对象的操作相关，基本上是 Proxy 的默认行为（也就是常规的对象操作）。Reflect 的方法和操作符相似，但它们总是返回明确的结果，而不是自动修改目标对象。
Reflect 方法的特点：
-
返回值始终是 布尔值 或 返回目标对象的操作结果，而不是抛出异常。
-
Reflect中的方法是 静态方法，不能通过实例化来调用，只能通过Reflect.method的方式调用。
Reflect 常见方法
-
Reflect.get(target, prop)-
读取目标对象的指定属性值。
-
返回目标对象中指定属性的值。如果属性不存在，则返回
undefined。
-
-
Reflect.set(target, prop, value)-
设置目标对象的指定属性的值。
-
返回
true如果成功，false如果失败。
-
-
Reflect.has(target, prop)-
检查目标对象是否包含指定的属性。
-
返回
true如果对象包含该属性，false如果不包含。
-
-
Reflect.deleteProperty(target, prop)-
删除目标对象的指定属性。
-
返回
true如果成功删除，false如果删除失败。
-
-
Reflect.apply(target, thisArg, args)-
调用目标函数，并传递参数。
-
返回目标函数的执行结果。
-
-
Reflect.construct(target, args)-
使用目标构造函数创建一个新对象，并传递构造函数的参数。
-
返回新创建的对象。
-
-
Reflect.getPrototypeOf(target)-
获取目标对象的原型。
-
返回目标对象的原型对象。
-
-
Reflect.setPrototypeOf(target, prototype)-
设置目标对象的原型。
-
返回
true如果成功，false如果失败。
-
-
Reflect.isExtensible(target)-
检查目标对象是否可扩展（即是否可以添加新的属性）。
-
返回
true如果可扩展，false如果不可扩展。
-
-
Reflect.preventExtensions(target)-
禁止目标对象扩展，意味着不能再添加新的属性。
-
返回
true如果成功，false如果失败。
-
-
Reflect.getOwnPropertyDescriptor(target, prop)-
获取目标对象的某个属性的描述符。
-
返回属性的描述符对象，如果属性不存在，则返回
undefined。
-
-
Reflect.defineProperty(target, prop, descriptor)-
定义目标对象的属性，并设置该属性的描述符。
-
返回
true如果成功，false如果失败。
-
Reflect 则是一个 API 的集合，它提供了对对象操作的默认行为，通常用于 简单、标准的操作，尤其是在 Proxy 中调用默认行为时。Reflect 的方法是静态的，可以直接操作对象。与 Proxy 中的拦截方法相比，Reflect 不会拦截操作，它只是返回目标对象的正常行为。例如：
Reflect 适用场景
Reflect 主要用于简化对对象操作的代码，尤其是在不需要复杂拦截逻辑时。例如，当我们需要 直接调用标准操作 时，可以使用 Reflect 来避免额外的代码复杂性。
示例 1：使用 Reflect 进行简单的操作
let target = {name: 'Alice',age: 30
};// 使用 Reflect 执行标准操作
console.log(Reflect.get(target, 'name')); // 'Alice'
Reflect.set(target, 'age', 35); // 修改 age 为 35
console.log(target.age); // 35
Proxy 与 Reflect 的结合
通常情况下，Proxy 与 Reflect 一起使用，可以让我们拦截对象的操作并调用默认行为。Proxy 中的陷阱方法（如 get、set）可以通过调用 Reflect 来实现标准行为。
示例 ：结合使用 Proxy 和 Reflect
let target = {name: 'Alice',age: 30
};let handler = {get(target, prop, receiver) {console.log(`Accessing property: ${prop}`);return Reflect.get(...arguments); // 使用 Reflect 调用默认行为},set(target, prop, value, receiver) {if (prop === 'name' && value === '') {console.log('Name cannot be empty!');return false;}return Reflect.set(...arguments); // 使用 Reflect 调用默认行为}
};let proxy = new Proxy(target, handler);console.log(proxy.name); // 'Alice'
proxy.age = 35; // 设置 age 为 35
console.log(target.age); // 35
总结：Proxy 和 Reflect 的选择
-
使用
Proxy：当你需要拦截并修改对象的操作，或在某些操作上添加自定义逻辑时使用Proxy。Proxy适合复杂的、需要改变对象行为的场景。 -
使用
Reflect：当你需要执行标准对象操作，并且不需要拦截或修改行为时，使用Reflect更加简洁。Reflect可以用于与Proxy配合使用，也可以独立操作对象。
四、 JavaScript 模块化
模块化 是指将代码分割成小的、独立的部分（即模块），每个模块只负责自己的一部分功能，能够有效提高代码的可维护性、可复用性和团队协作效率。JavaScript 在早期并没有内建的模块系统，随着应用需求的增长，标准化模块化的支持逐步被引入。
模块化的优点
-
可维护性：每个模块只关注自己的功能，代码更加清晰、易于管理。
-
复用性：模块化的代码可以被重复使用，减少冗余代码。
-
团队协作：不同开发人员可以在独立的模块中工作，提高团队开发效率。
模块化的方式
1.1 CommonJS（Node.js 模块化）
CommonJS 是最早用于 Node.js 的模块化规范，定义了如何加载和使用模块。在 CommonJS 中，模块通过 require 来加载，模块通过 module.exports 或 exports 导出。
-
导出：
module.exports或exports -
导入：
require()
// math.js (模块)
module.exports.add = function(a, b) {return a + b;
};// app.js (主程序)
const math = require('./math');
console.log(math.add(2, 3)); // 5
优点：
-
适用于服务器端（Node.js 环境）。
-
模块可以同步加载，适合文件系统中的模块加载。
缺点：
-
只能在 Node.js 或支持 CommonJS 的环境中使用。
-
不适用于浏览器端的模块化。
1.2 ES6 模块化（ESM）
ES6 引入了官方标准的模块系统（ESM），它在浏览器和 Node.js 中都得到了广泛支持。ES6 模块使用 import 和 export 关键字来导入和导出模块。
-
导出：
export或export default -
导入：
import
// math.js (模块)
export function add(a, b) {return a + b;
}// app.js (主程序)
import { add } from './math';
console.log(add(2, 3)); // 5
优点：
-
是 JavaScript 官方标准，能够在浏览器和 Node.js 中都使用（现代浏览器和 Node.js 已经支持）。
-
支持按需导入（代码分割），具有更好的优化空间。
-
静态分析：ES6 模块允许编译器对依赖关系进行优化。
缺点：
-
在老版本浏览器中不支持（但可以通过 Babel 等工具进行转换）。
1.3 AMD（Asynchronous Module Definition）
AMD 是一个主要用于浏览器的模块加载规范，它支持异步加载模块。require.js 是最著名的实现。
-
导出：
define() -
导入：
require()
// math.js (模块)
define(function() {return {add: function(a, b) {return a + b;}};
});// app.js (主程序)
require(['math'], function(math) {console.log(math.add(2, 3)); // 5
});
优点：
-
异步加载模块，适用于浏览器端，能够提高加载速度。
-
支持按需加载，有利于减少首次加载的资源。
缺点：
-
语法复杂，使用起来不如 CommonJS 和 ES6 模块直观。
-
主要用于浏览器端，不适用于 Node.js。
1.4 UMD（Universal Module Definition）
UMD 是一种兼容 CommonJS、AMD 和全局变量的模块化规范，它可以在不同环境下使用，兼容浏览器和 Node.js。
定义模块：使用 define() 定义模块，并自动判断运行环境（CommonJS、AMD 或全局）。
(function (root, factory) {if (typeof define === 'function' && define.amd) {define(factory); // AMD 模块} else if (typeof module === 'object' && module.exports) {module.exports = factory(); // CommonJS 模块} else {root.myModule = factory(); // 全局变量}
}(this, function () {return {add: function(a, b) {return a + b;}};
}));
优点：
-
兼容多种模块化规范，能够在不同环境中工作。
-
适合库或框架的开发。
缺点：
-
由于兼容多种环境，代码较为复杂，使用时需要做兼容性处理。
