什么是模块化

把复杂的代码按照功能的不同划分成不同的模块单独维护，提高开发效率，降低维护成本。

模块化规范

CommonJS 规范

一个文件就是一个模块 每个模块都有单独的作用域。
它使用 require 函数导入模块，使用 module.exports 或 exports 导出模块。
优点： 同步模式加载模块，node 执行机制时启动时加载模块，执行过程中不需要加载，在 node 可以直接使用
缺点： 在浏览器端页面加载会导致大量同步请求出现，效率较低

// 导入模块
const moduleA = require('./moduleA')

// 导出模块
module.exports = {
  // 模块内容
}

AMD Asynchronous module definition 异步模块定义规范

AMD 是一种用于浏览器端 JavaScript 的模块化规范，用于异步加载模块。
它使用 define 函数定义模块，使用 require 函数异步加载模块。

// 定义模块
define(['dependency1', 'dependency2'], function (dep1, dep2) {
  // 模块内容
  return {
    // 导出的内容
  }
})

// 异步加载模块
require(['moduleA'], function (moduleA) {
  // 模块加载完成后的回调
})

UMD Universal Module Definition

UMD 是一种通用的模块化规范，兼容 CommonJS、AMD 和全局变量（Global）环境。
它可以在不同的环境中使用不同的模块化规范，以便在各种环境下使用。

;(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD 环境
    define(['dependency1', 'dependency2'], factory)
  } else if (typeof module === 'object' && module.exports) {
    // CommonJS 环境
    module.exports = factory(require('dependency1'), require('dependency2'))
  } else {
    // 全局变量环境
    root.myModule = factory(root.dependency1, root.dependency2)
  }
})(this, function (dep1, dep2) {
  // 模块内容
  return {
    // 导出的内容
  }
})

ES Modules（ESM

ES Modules 是 ECMAScript 2015（ES6）引入的官方模块化规范，用于浏览器端和现代化的 Node.js 环境。
它使用 import 和 export 关键字导入和导出模块。

// 导入模块
import moduleA from './moduleA'

// 导出模块
export default {
  // 模块内容
}