模块化架构基础：设计理念、原则与通信方式

做渲染帧率监控，你肯定遇到过这种情况：一个页面跑了三个月，突然卡成PPT，你翻遍所有代码，发现是某个动画模块和网络请求模块因为全局变量打架了。我当时就栽过这个坑。所以这章我们聊聊模块化架构——说到底，它是让庞大系统保持“手脚不乱”的根基。

模块化设计理念：拆开，再拼回去

模块化不是新鲜概念。说白了，就是把一个复杂系统拆成若干独立的功能块。每个块只管自己的事，然后通过明确的接口对外提供服务。我习惯把模块比作“乐高积木”——你想换一个轮子，不用把整个赛车拆掉重搭。

• 模块 = 代码 + 数据 + 职责边界。每个模块有自己的“私人物品”（内部变量）和“公共接口”（暴露的方法/事件）。
• 模块粒度：我个人建议别太细。比如一个帧率采集器自成一模块就够了，没必要把采样、计算、上报拆成三个模块——那是过度工程。
• 模块生命周期：启动 → 初始化 → 运行 → 销毁。每个阶段都要考虑清楚资源释放，否则内存泄漏迟早找上门。

高内聚低耦合：模块化的黄金准则

这两个词你们肯定听过。但什么叫真正的“高内聚”？一个模块里的函数最好都在做同一类事。比如帧率采集模块，内部就是采样、计算FPS、微分卡顿检测——你千万别把一个网络请求封装扔进去，那叫“乱入”。

低耦合呢？两个模块之间知道得越少越好。我见过最离谱的代码是这样：

// ❌ 糟糕的耦合：直接访问另一个模块的私有数据
let fpsData = frameMonitor._internalBuffer;
fpsData.push(myCustomMetric);

这直接破坏了封装。正确的做法是通过接口通信：

// ✅ 解耦：通过事件上报
frameMonitor.on('frame', (fpsInfo) => {
  // 只拿你需要的数据
  console.log(fpsInfo.currentFps);
});

你想想看，如果每个模块内部高度自治，对外只暴露少量、稳定的接口，那么后续维护、替换、单元测试都会轻松很多。这也解释了为什么很多大型框架都强制模块间通过事件总线（EventBus）通信——就是逼着你不要互相依赖内部细节。

模块间通信方式：事件驱动 vs 消息传递

在帧率监控这种实时性要求高的场景，模块间通信的方式直接影响性能。我主要用两种模式：

通信方式	适用场景	优点	注意事项
事件发布/订阅	帧数据上报、卡顿时通知	松耦合、支持多监听者	注意取消订阅，防止内存泄漏
消息队列/频道	跨线程、跨进程通信	异步安全、可持久化	序列化开销，不适合高频帧级数据
直接调用接口	严格依赖的配置传递	简单、低延迟	会引入强依赖，慎用

嗯，这里要注意。帧率监控模块通常每秒产生几十甚至上百次数据。如果用消息队列那种“序列化-发送-反序列化”的流程，CPU扛不住的。所以我一般用事件方式，传递轻量级的对象引用或基本数值。比如：

// 帧率采集器内部
class FrameMonitor {
  constructor() {
    this._eventBus = new EventBus();
  }
  
  // 每帧调用
  tick(timestamp) {
    // ...计算fps
    this._eventBus.emit('fpsUpdate', { fps, jankCount });
  }
  
  // 外部订阅
  onFpsUpdate(callback) {
    this._eventBus.on('fpsUpdate', callback);
    // 返回取消函数，方便清理
    return () => this._eventBus.off('fpsUpdate', callback);
  }
}

这就形成了一个清晰的单向数据流。采集器只管发事件，订阅者（比如UI模块、日志模块、告警模块）各自处理——谁也不影响谁。

模块化架构的核心逻辑图

上面这张图帮你看清整体结构。应用层调用采集、分析、上报三个独立模块，但它们之间不直接相互调用——所有通信走事件总线。底层的基础设施（如内存管理器）被各模块内部使用，但不暴露细节。这样的好处是：你想替换上报模块（从console.log换成远程服务器），完全不用碰采集模块的代码。

实践中的避坑与建议

• 事件命名规范：我习惯用“模块名:动作”格式，比如frameMonitor:fpsUpdate，避免命名冲突。
• 不要滥用全局事件总线。所有模块都在一个EventBus里发来发去，调试时你会疯的。可以按域划分总线，比如“帧率域”、“性能域”。
• 模块初始化顺序：如果你的事件总线还没启动，某个模块就开始发事件——那会静默丢失。我曾在线上遇到这个问题，排查半天。建议所有模块在ready事件后再开始发布。

当初我接手一个老项目，帧率采集和UI渲染混在一起，为了修一个卡顿bug，我不得不读通整套代码。后来彻底用事件总线解耦，再改需求时，半天就能搞定。这就是模块化架构的回报——前期多花点心思理清边界，后续少加无数个夜班。