一、JavaScript 模块化
JavaScript 模块化是一种组织和管理 JavaScript 代码的方法，它将代码分割为独立的模块，每个模块都有自己的作用域，并且可以导出和导入功能。模块化可以提高代码的可维护性、可重用性和可扩展性。
在JavaScript中，有几种常见的模块化规范和工具，包括：
CommonJS：
CommonJS 是一种服务器端 JavaScript 模块化规范，主要用于 Node.js。
使用 require() 函数导入模块，使用 module.exports 或 exports 导出模块。
支持同步加载模块，因此在浏览器端可能会阻塞页面渲染。
适用于服务器端开发，模块的加载是在运行时发生的。
javascript
// CommonJS模块
let { stat, exists, readfile } = require('fs')
// 等同于
let _fs = require('fs')
let stat = _fs.stat
let exists = _fs.exists
let readfile = _fs.readfile上面代码的实质是整体加载 fs 模块（即加载 fs 的所有方法），生成一个对象（_fs），然后再从这个对象上面读取 3 个方法。这种加载称为"运行时加载"，因为只有运行时才能得到这个对象，导致完全没办法在编译时做"静态优化"。
AMD (Asynchronous Module Definition)：
AMD 是一种浏览器端 JavaScript 模块化规范，旨在解决异步加载模块的问题。
使用 define() 函数定义模块，并使用 require() 函数异步导入模块。
支持异步加载模块，在运行时按需加载模块，不会阻塞页面渲染。
适用于浏览器端开发，特别是在网络环境较慢的情况下。
UMD (Universal Module Definition)：
UMD 是一种通用的 JavaScript 模块化规范，旨在兼容 CommonJS 和 AMD 规范。
根据环境判断是否支持 CommonJS、AMD 或全局对象，并采取相应的模块化方式。
可以在服务器端和浏览器端都使用，兼容不同的模块化规范。
ES6 (ES2015) 模块化：
ES6 模块化是 ECMAScript 2015 引入的官方标准模块化规范。
使用 import 和 export 关键字来导入和导出模块。
静态分析：可以在编译时进行静态分析，提前处理模块依赖关系。
支持默认导出和命名导出，支持动态导入。
在现代浏览器和Node.js中得到广泛支持。
javascript
// ES6模块
import { stat, exists, readFile } from 'fs'上面代码的实质是从 fs 模块加载 3 个方法，其他方法不加载。这种加载称为"编译时加载"或者静态加载，即 ES6 可以在编译时就完成模块加载，效率要比 CommonJS 模块的加载方式高。当然，这也导致了没法引用 ES6 模块本身，因为它不是对象。
ES6 模块化是目前被广泛使用的标准模块化规范，它提供了更加简洁、灵活的语法，并且在编译阶段进行静态分析，能够提高性能。大多数现代的 JavaScript 开发都采用 ES6 模块化来组织和管理代码，尤其是在使用构建工具（如Webpack、Rollup等）进行项目构建时。
二、ES6 Module
模块功能主要由两个命令构成：export 和 import。export 命令用于规定模块的对外接口，import 命令用于输入其他模块提供的功能。
1、导出（export）
（1）命名导出（Named Exports）： 使用 export 命令指定导出一个变量（var、let、const）、函数（functions）或类（class）。
导出变量
javascript
// 导出变量
export const name = 'Amy'
export let age = 20
export const city = 'Beijing'
// 等同于（推荐）
const name = 'Amy'
let age = 20
const city = 'Beijing'
export { name, age, city }
// 使用 as 关键字重命名
export { name as firstName }
// ----------------------------------------
// export 命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。
// 以下写法报错
export 1 // 直接输出
export name // 通过变量 m，还是直接输出 1导出函数
javascript
export function multiply(x, y) {
return x * y
}
export function calculateSum(a, b) {
return a + b
}
// 等同于
function multiply(x, y) {
return x * y
}
function calculateSum(a, b) {
return a + b
}
export { multiply, calculateSum }
// 报错
export multiply导出类
javascript
export class Person {
constructor(name, age) {
this.name = name
this.age = age
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`)
}
}（2）默认导出（Default Exports）： 使用 export default 命令默认导出一个变量、函数、类。
默认导出变量
javascript
// 默认导出一个值
export default 20
// 导出一个对象作为默认值
const person = {
name: 'Amy',
age: 20,
}
export default person默认导出函数
javascript
// 导出一个默认的加法函数
export default function add(a, b) {
return a + b
}默认导出类：
javascript
export default class Person {
constructor(name, age) {
this.name = name
this.age = age
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`)
}
}2、导入（import）
（1）命名导入（Named Imports）： 使用 import { xxx } from url 语法导入模块的指定变量、函数、或类。
export 导出的模块，在导入时不能随意取别名，名称必须与模块导出时相同！并且要使用类似于解构赋值的 {} 形式。
javascript
// 命名导出
export const name = 'Amy'
export function sayHello() {
console.log('Hello!')
}
// ----------------------------------------
// 命名导入
import { name, sayHello } from './module.js'（2）默认导入（Default Imports）： 使用 import xxx from url 语法导入模块的默认导出变量、函数、或类。
export default 导出的模块，在导入时可以取任意名称。并且 import 命令后面，不需要使用大括号。
javascript
// 默认导出
const age = 18
export default age
// ---------------------------------------------
// 默认导入
import age from './module.js'（3）整体导入： 用星号 * 指定一个对象，所有输出值都加载在这个对象上面。
将同一文件里的所有模块导入到一个对象中，不仅对 export 有效，同时对 export default 也同样有效。
javascript
// 整体导入
import * as Obj from './module.js'
console.log(Obj) // 见图片
console.log(Obj.fn) // ƒ fn() {}
console.log(Obj.className) // class className {}
console.log(Obj.age) // 18
// export default 也同样有效：imObj.default
（4）同时导入
当我们需要分别导入 export default 和 export 时，可以使用同时导入的方式。
javascript
// 我们可以分开实现
import { fn, className, age } from './module.js'
import sex from './module.js'
javascript
// 更推荐使用同时导入的方式
import sex, { fn, className, age } from './module.js'
// 注意：export default 必须在 export 之前3、导出导入时起别名
export 导出的变量或 import导入的变量，可以使用 as 关键字重命名。
javascript
// 导出
function fn() {}
class className {}
const age = 18
export { fn as func, className as cN, age }
javascript
// 导入
import { func, cN, age as nl } from './module.js'
console.log(func) // ƒ fn() {}
console.log(cN) // class className {}
console.log(nl) // 184、export 与 import 的复合写法
如果在一个模块之中，先输入后输出同一个模块，import 语句可以与 export 语句写在一起。
javascript
export { foo, bar } from 'my_module'
// 可以简单理解为
import { foo, bar } from 'my_module'
export { foo, bar }上面代码中，export和import语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar。
模块的接口改名和整体输出，也可以采用这种写法。
javascript
// 接口改名
export { foo as myFoo } from 'my_module'
// 整体输出
export * from 'my_module'默认接口的写法如下。
javascript
export { default } from 'foo'具名接口改为默认接口的写法如下。
javascript
export { es6 as default } from './someModule'
// 等同于
import { es6 } from './someModule'
export default es6同样地，默认接口也可以改名为具名接口。
javascript
export { default as es6 } from './someModule'ES2020 之前，有一种 import 语句，没有对应的复合写法。
javascript
import * as someIdentifier from 'someModule'ES2020 补上了这个写法。
javascript
export * as ns from "mod";
// 等同于
import * as ns from 'mod'
export { ns }5、export 与 import 的总结
在 ES6 中使用 export、和 export default 向外导出成员； 使用 import 来导入成员。
在一个模块中，可以同时使用 export default 和 export 向外导出成员；export default 只允许向外导出一次。
使用 export default 向外暴露的成员，可以用任意变量接收。
使用 export 向外暴露的成员，必须用 {} 接收，变量之间用逗号分隔，且名称必须与导出时的名称一致。
export 可以向外暴露多个成员，如果某些成员，在 import 导入时，不需要，可以不在 {} 中定义
export 导出的变量或 import导入的变量，可以使用 as 关键字重命名。
6、import() 动态导入
import() 是 ES6 中的动态导入语法，它允许在运行时动态地加载模块。与传统的静态导入（使用 import 关键字：import 命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行。）相比，动态导入可以根据需要按需加载模块，提供了更大的灵活性。
javascript
// 静态导入：语法错误（import 和 export 命令只能在模块的顶层，不能在代码块之中）
if (x === 2) {
import MyModual from './myModual'
}import 函数的参数 specifier，指定所要加载的模块的位置。import 命令能够接受什么参数，import() 函数就能接受什么参数，两者区别主要是后者为动态加载。
javascript
// 动态导入
import(specifier)import() 返回一个 Promise 对象，因此可以使用 async/await 等方式来处理导入的模块。
适用场合
（1）按需加载：import() 可以在需要的时候，再加载某个模块。
javascript
// 只有用户点击了按钮，才会加载 dialogBox 模块
button.addEventListener('click', event => {
import('./dialogBox.js').then(dialogBox => {
dialogBox.open()
}).catch(error => {
/* Error handling */
})
})（2）条件加载：import() 可以放在 if 代码块，根据不同的情况，加载不同的模块。
javascript
if (condition) {
import('moduleA').then(...)
} else {
import('moduleB').then(...)
}（3）动态的模块路径：import() 允许模块路径动态生成。
javascript
import(f()).then(...)动态导入的优点
可以根据需要按需加载模块，避免一次性加载所有模块，提高性能和加载速度。
可以在条件满足时才加载模块，实现延迟加载和懒加载的效果。
可以动态地根据运行时信息选择不同的模块进行加载。
三、ES6 Module 和 CommonJS 模块的区别
ES6 Module 是 JavaScript 的官方模块系统，而 CommonJS 是 Node.js 的模块系统。ESM 具有更强大的特性和更高的效率，适用于现代浏览器环境和某些前端工具链中。而 CJS 则适用于 Node.js 环境和一些较老的浏览器环境。然而，随着 Node.js 对 ESM 的支持不断改进，ESM 已经成为了通用的模块系统，并逐渐取代了 CJS 的使用。
1、语法差异
CommonJS 使用 module.exports = {} 导出一个模块对象，require('file_path') 引入模块对象。
ES6 Module 使用 import 和 export 关键字来导入和导出模块。
2、加载方式
CommonJS 在运行时同步加载模块。它会先加载整个模块，然后再执行模块代码。
ES6 Module 在解析阶段进行静态分析，即在编译时确定模块依赖关系。它使用异步加载模块的方式，在运行时按需加载模块。
3、输出差异
CommonJS 模块中，module.exports 导出的是一个值的拷贝。当其他模块使用 require 导入该模块时，会得到这个拷贝的值，而不是原始值本身。因此，如果在被导入的模块内部对导出的值进行修改，不会影响到其他模块中已经导入的值。
javascript
// module.js
let count = 0
setTimeout(() => {
count++
}, 1000)
module.exports = count
// main.js
const count = require('./module')
setTimeout(() => {
console.log(count) // 输出: 0，因为count只是module.js导出的初始值的一个拷贝，不会变化
}, 2000)ES6 Module 模块中，export 导出的是一个值的引用。当其他模块使用 import 导入该模块时，得到的是原始值的引用。这意味着，如果在被导入的模块内部对导出的值进行修改，会直接影响到其他导入该模块的地方，因为它们引用同一个原始值。
javascript
// module.js
export let count = 0
setTimeout(() => {
count++
}, 1000)
// main.js
import { count } from './module'
setTimeout(() => {
console.log(count) // 输出: 1，因为count是module.js导出的原始值的引用，会随着变化而变化
}, 2000)需要注意的是，虽然 ES6 模块的输出是引用，但并不意味着你可以直接修改导入的值。在严格模式下，对于 import 导入的值是只读的，不能直接修改。如果你想要修改导入的值，可以通过修改原始值或者使用 export default 来实现。
4、导入和导出特性
CommonJS 只支持默认导出，通过给 module.exports 赋值来导出模块。
ES6 Module 支持命名导出（Named Exports）和默认导出（Default Exports）两种导出方式。