JavaScript 模块化系统

admin

2025年7月20日 10:3 本文热度 52

一、为什么需要模块化？

想象一下你正在写一个大型项目, 所有代码都堆在一个文件里:

// 可怕的全局变量地狱var utils = {...};var api = {...};var componentA = {...};var componentB = {...};
// 20000行之后...function doSomething() {    //谁知道这个函数会不会覆盖前面的定义?}

这种写法有几个致命问题:

命名冲突: 变量和函数都在全局作用域，容易覆盖
依赖混乱:不知道代码执行前需要加载哪些依赖
难以维护: 代码组织像意大利面条，牵一发而动全身

模块化就是为了解决这些问题而生的! 它让我们可以:

将代码拆分成独立的小文件（模块）
明确声明依赖关系
避免污染全局命名空间
方便代码复用和维护

二、CommonJS

CommonJS 是 Node.js 采用的模块系统, 语法非常简单:

// math.jsfunction add(a, b) {    return a + b;}
function subtract(a, b) {    return a - b;}
//导出模块module.exports = {    add,    subtract};
//或者也可以这样导出exports.add = add;exports.subtract = subtract;

使用的时候如下所示:

// app.jsconst math = require('./math.js');
console.log(math.add(2, 3)); // 5console.log(math.subtract(5, 2)); // 3

它有什么特点呢?

同步加载: 模块在 require 时同步加载并执行.
缓存机制: 模块首次加载后会被缓存, 后续 require 直接返回缓存.
值拷贝: 导出的是值的拷贝(对于原始类型), 修改不会影响原模块.

三、ES Modules

ES Modules(简称 ESM)是 ECMAScript 2015(ES6)引入的官方模块系统, 现在已经被现代浏览器和 Node.js 支持.

基本语法:

// math.jsexport function add(a, b) {    return a + b;}
export function subtract(a, b) {    return a - b;}
// 或者默认导出export default {    add,    subtract};

导入模块:

// 命名导入import { add, subtract } from './math.js';
// 默认导入import math from './math.js';
// 混合导入import math, { add } from './math.js';
// 整体导入import * as math from './math.js';

与CommonJS的区别:

静态分析: ESM 的 import/export 必须在顶层作用域, 可以被静态分析
动态绑定: ESM 导出的是值的引用（活的绑定), 修改会影响所有导入
异步加载: ESM 在浏览器中是异步加载的

// counter.jsexport let count = 0;
export function increment() {    count++;}
// app.jsimport { count, increment } from './counter.js';
console.log(count); // 0increment();console.log(count); //1（ESM是动态绑定）

在浏览器里如何加载模块呢?

<!-- 传统脚本 --><script src="app.js"></script>
<!-- 模块脚本 --><script type="module" src="app.js"></script>

关键区别:

模块默认defer, 在文档解析完成后执行
模块有独立作用域, 不会污染全局
模块需要 CORS 配置, 不能使用 file:// 协议
模块会自动应用严格模式

四、按需加载

静态导入（import ... from ...）必须在模块顶层, 但有时候我们需要按需加载:

// 普通导入import('./math.js').then(math => {    console.log(math.add(2, 3));});
// 配合 async/awaitasync function calculate() {    const math = await import('./math.js');    console.log(math.add(2, 3));}

条件加载:

if (user.isAdmin) {    import('./admin.js').then(...);}

预加载:

<link rel="modulepreload" href="critical-module.js">

组合使用:

Promise.all([    import('./moduleA.js'),    import('./moduleB.js')]).then(([moduleA, moduleB]) => {    // 两个模块都加载完成});

阅读原文：原文链接

该文章在 2025/7/21 10:33:09 编辑过

关键字查询

模块

正在查询...

点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。

点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理，结合码头的业务特点，围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体，是物流码头及其他港口类企业的高效ERP管理信息系统。

点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。

点晴免费OA是一款软件和通用服务都免费，不限功能、不限时间、不限用户的免费OA协同办公管理系统。