当前位置：首页 > news >正文

认识javascript中的模块化

news 文章来源：https://blog.csdn.net/sxlesq/article/details/144535044 2025/5/15 14:01:10

什么是模块化？

将程序⽂件依据⼀定规则拆分成多个文件，拆分出来每个⽂件就是⼀个模块，模块中的数据都是私有的，模块之间互相隔离。如果不进行隔离，可能会造成模块间的变量定义有冲突，导致程序崩溃

为啥要使用模块化？

1.全局污染：引入不同js文件时，js当中同名的函数、变量等因引入先后顺序的问题导致相互覆盖，造成调用不清晰的问题
2.依赖混乱：引入js文件顺序不同导致页面效果混乱

模块化优点？

1.防止命名冲突
2.代码复用
3.提高代码的维护性

哪些模块化规范？

IIFE (Immediately Invoked Function Expression)：这不是一个模块格式，而是一种 JavaScript 函数的执行方式。它创建一个立即执行的函数，通常用于避免全局作用域的污染。在打包工具中，IIFE 格式通常用于生成一个可以直接在浏览器中运行的自包含脚本。

CommonJS (CJS)：这是 Node.js 使用的模块系统。它使用 require() 来导入模块，module.exports 或 exports 来导出。它是动态的，可以在运行时加载模块，但不支持 tree-shaking。

AMD (Asynchronous Module Definition)：这种格式主要用于浏览器，支持异步加载和依赖管理。它使用 define() 函数来定义模块。

UMD (Universal Module Definition)：这种格式旨在兼容 AMD 和 CommonJS，同时还能在全局变量中运行。它通常用于让库能在各种环境中运行，包括浏览器和 Node.js。

SystemJS：这是一个动态模块加载器，可以在浏览器中加载各种模块格式，包括 ES6、AMD、CommonJS 和全局脚本。

ES Modules (ESM)：这是 ECMAScript 6 (ES6) 引入的官方标准格式。它支持导入和导出语句，以及静态分析和 tree-shaking。它是唯一的静态模块系统，意味着你可以在编译时确定导入和导出的内容。

历史课上一上

直接定义依赖 (1999): 由于当时 js 文件非常简单，模块化方式非常简单粗暴 —— 通过全局方法定义、引用模块。这种定义方式与现在的 commonjs 非常神似，区别是 commonjs 以文件作为模块，而这种方法可以在任何文件中定义模块，模块不与文件关联。

闭包模块化模式 (2003): 用闭包方式解决了变量污染问题，闭包内返回模块对象，只需对外暴露一个全局变量。

模版依赖定义 (2006): 这时候开始流行后端模版语法，通过后端语法聚合 js 文件，从而实现依赖加载，说实话，现在 go 语言等模版语法也很流行这种方式，写后端代码的时候不觉得，回头看看，还是挂在可维护性上。

注释依赖定义 (2006): 几乎和模版依赖定义同时出现，与 1999 年方案不同的，不仅仅是模块定义方式，而是终于以文件为单位定义模块了，通过 lazyjs 加载文件，同时读取文件注释，继续递归加载剩下的文件。

外部依赖定义 (2007): 这种定义方式在 cocos2d-js 开发中普遍使用，其核心思想是将依赖抽出单独文件定义，这种方式不利于项目管理，毕竟依赖抽到代码之外，我是不是得两头找呢？所以才有通过 webwpack 打包为一个文件的方式暴力替换为 commonjs 的方式出现。

Sandbox模式 (2009): 这种模块化方式很简单，暴力，将所有模块塞到一个 sanbox 变量中，硬伤是无法解决明明冲突问题，毕竟都塞到一个 sandbox 对象里，而 Sandbox 对象也需要定义在全局，存在被覆盖的风险。模块化需要保证全局变量尽量干净，目前为止的模块化方案都没有很好的做到这一点。

依赖注入 (2009): 就是大家熟知的 angular1.0，依赖注入的思想现在已广泛运用在 react、vue 等流行框架中。但依赖注入和解决模块化问题还差得远。

CommonJS (2009): 真正解决模块化问题，从 node 端逐渐发力到前端，前端需要使用构建工具模拟。

Amd (2009): 都是同一时期的产物，这个方案主要解决前端动态加载依赖，相比 commonJs，体积更小，按需加载。

Umd (2011): 兼容了 CommonJS 与 Amd，其核心思想是，如果在 commonjs 环境（存在 module.exports，不存在 define），将函数执行结果交给 module.exports 实现 Commonjs，否则用 Amd 环境的 define，实现 Amd。

Labeled Modules (2012): 和 Commonjs 很像了，没什么硬伤，但生不逢时，碰上 Commonjs 与 Amd，那只有被人遗忘的份了。

YModules (2013): 既然都出了 Commonjs Amd，文章还列出了此方案，一定有其独到之处。其核心思想在于使用 provide取代 return，可以控制模块结束时机，处理异步结果；拿到第二个参数 module，修改其他模块的定义（虽然很有拓展性，但用在项目里是个搅屎棍）。

ES2015 Modules (2015): 就是我们现在的模块化方案，还没有被浏览器实现，大部分项目已通过 babel 或 typescript 提前体验。

这张图看的比较清晰：

在这里插入图片描述

一个个拉出来溜溜

1. commonjs

cjs 是 Node 中的模块规范，导入和导出的 API 为：

equire
exports

在服务端被广泛使用。CJS 可以通过使用 require() 函数和 module.exports 来识别。require() 是一个可用于从另一个模块导入 symbols 到当前作用域的函数。 module.exports 是当前模块在另一个模块中引入时返回的对象。

API 天生是同步的。在源文件中按 require 的顺序瞬时加载模块。CJS 模块不能在浏览器端使用，除非它被转译器打包。像 Babel 和 Traceur 那样的转译器，如果环境原生不支持新版本的 JavaScript，转译器将它们编译成支持的 JS 版本。

2. 异步模块定义（AMD）

异步模块定义（AMD）是一种JavaScript模块的定义规范，它支持模块的异步加载，解决了传统同步加载方式下的诸多问题。AMD规范通过定义清晰的接口，让模块可以被异步加载和组织，这使得模块间的依赖关系可以明确，提高了代码的可维护性和可扩展性。

通过两个主要的函数——define和require，来完成模块的定义和加载。这种方式不仅支持模块的异步加载，还允许开发者在浏览器中有效地组织和管理模块依赖，提升了项目的模块化和代码的复用性。

define函数的基本语法

define(id?, dependencies?, factory);

参数说明：

id 是一个可选参数，用于指定模块的唯一标识符。通常不推荐在代码中显式指定 id ，因为模块系统会根据文件路径自动生成模块标识符。
dependencies 是一个数组，列出当前模块依赖的其他模块。如果当前模块依赖于其他模块，需要在这个数组中按照依赖顺序列出这些模块的标识符。
factory 是一个函数，返回模块的导出内容。这是一个关键参数，定义了模块的实现逻辑。工厂函数可以有三种形式：
- 无参数工厂函数：返回模块的导出对象或值。
- 单参数工厂函数：工厂函数接收一个参数，通常是一个依赖模块的数组。
- 多参数工厂函数：工厂函数可以接收多个参数，每个参数对应一个依赖模块。

define(['jquery', 'underscore'], function($, _) {return {name: 'Module A',sayHello: function() {console.log('Hello from Module A!');}};
});

requirequire 函数

用于加载一个或多个AMD模块，其基本语法如下：

require([dependencies], callback);

dependencies 参数：一个数组，包含了所有需要加载的模块标识符。
callback 参数：一个函数，依赖模块加载完成后执行的回调函数。回调函数的参数对应于
dependencies 数组中的模块。

AMD 脱胎于 CJS，支持异步模块加载。AMD 和 CJS 的主要区别在于它是否支持异步模块加载。RequireJS 使用 AMD 在浏览器端工作。

可以顺便了解下CMD

3. 通用模块定义（UMD）

UMD（Universal Module Definition）是一种通用的模块定义规范，旨在使同一个模块能够在不同的环境中使用，包括浏览器、Node.js 等。它采用一种灵活的方式，既支持类似 CommonJS 的模块加载方式，也支持类似 AMD 的异步加载方式，同时兼容浏览器全局变量的使用。

UMD 模块通常通过一定的判断逻辑来确定当前的模块加载环境，从而决定采用何种加载方式。

看一个网上的示例，了解下

(function (root, factory) {if (typeof define === "function" && define.amd) {// AMDdefine(["dependency"], factory);} else if (typeof define === "function" && define.cmd) {// CMD 环境define(function (require, exports, module) {module.exports = factory(require("dependency"));});} else if (typeof exports === "object") {// Node.js/CommonJSmodule.exports = factory(require("dependency"));} else {// Browser globalsroot.YourModule = factory(root.Dependency);}
})(typeof self !== "undefined" ? self : this, function (Dependency) {// 你的模块代码return YourModule; // 暴露模块
});

4. ESM

ESM允许开发者将代码拆分为多个独立的文件，这些文件可以相互引用和依赖。每个文件都可以导出一个或多个值（如函数、对象或基本类型），并且可以从其他文件导入这些值。

1.导出（Export）

在ESM中，你可以使用export关键字来导出模块中的值。有两种主要的导出方式：命名导出和默认导出。

命名导出：允许你导出多个值，并且每个值都有一个唯一的名称。

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

默认导出：每个模块都可以有一个默认导出。当其他模块导入该模块时，默认导出将作为默认的值被导入。

// greeting.js
const greet = (name) => `Hello, ${name}!`;
export default greet;

2.导入（Import）

导入命名导出：你可以使用花括号来导入特定的命名导出。

// app.js
import { add, subtract } from './math.js';
console.log(add(1, 2)); // 输出 3
console.log(subtract(3, 1)); // 输出 2

导入默认导出：你可以为默认导出指定任何名称。通常，这个名称是默认导出所在模块的名称或一个与该模块功能相关的名称。

// app.js
import greet from './greeting.js';
console.log(greet('World')); // 输出 "Hello, World!"

导入所有导出：你还可以使用星号（*）作为通配符来导入模块中的所有导出。这将返回一个包含所有导出的对象。然而，这种用法并不常见，因为它可能导致命名冲突并使代码难以维护。但在某些场景下，如模块重新导出时，它可能是有用的。

// app.js
import * as math from './math.js';
console.log(math.add(1, 2)); // 输出 3
console.log(math.subtract(3, 1)); // 输出 2

3.静态导入和动态导入

在ESM中，导入是静态的，这意味着导入操作在编译时而不是运行时进行。这有助于进行诸如静态分析和代码拆分等优化。然而，有时你可能需要在运行时动态地导入模块。为此，你可以使用import()函数，它返回一个Promise对象，该对象在模块加载完成时解析为模块对象。

import('./dialog.js').then((dialogModule) => {dialogModule.openDialog();}).catch((error) => {console.error('Error loading dialog module:', error);});

4.顶级await

ESM还支持顶级await表达式，允许你在模块的顶层代码中等待异步操作完成。这对于需要在模块初始化时加载资源或获取配置的场景非常有用。

import {getUser} from ‘. /data/User’
let user=await getUser();

5.Tree Shaking：

Tree-Shaking 是一种基于 ES Module 规范的 Dead Code Elimination
技术，它会在运行过程中静态分析模块之间的导入导出，确定 ESM
模块中哪些导出值未曾其它模块使用，并将其删除，以此实现打包产物的优化。Tree Shaking 较早前由 Rich Harris 在
Rollup 中率先实现，Webpack 自 2.0 版本开始接入，至今已经成为一种应用广泛的性能优化手段。

5. 系统模块SystemJs

SystemJS是一个通用的模块加载器，支持多种模块规范，包括CommonJS、AMD、全局模块对象和ES6模块。通过使用插件，它还可以加载CoffeeScript和TypeScript。这使得开发者可以在项目中灵活使用不同的模块规范，而无需担心兼容性问题‌。

有兴趣的看他的官网：https://github.com/systemjs/systemjs.git

6. 函数表达式（IIFE）

IIFE（立即执行函数表达式）是一种在定义时立即执行的 JavaScript 函数。这种函数形式非常有用，特别是当需要创建一个新的作用域以避免污染全局作用域或需要执行一段代码但不希望这段代码之后再被引用或重用。

(function() {// 函数体
})();/*或者箭头函数*/
(() => {// 函数体
})();

有没有想起 “闭包”

了解它了，有啥用？

写出来的脚本框架是要给人使用的，既然要使用，就需要关注在哪里使用（环境），要不然白白浪费时间，这上面的概念你或许从不关注，那是因为webspack vite这种打包工具帮你干了，若你要发布自己的脚手架项目，不了解怎么能行？多读书，不然老是被人骗…

好了，到这里吧. stop!，有时间说一说 vite中怎么实现以上场景，！