前端Wiki/词条/前端设计模式

前端设计模式

定义前端开发中反复出现的经典代码结构，用于解耦、复用与扩展

前端最常考的设计模式有五个：发布订阅模式（事件总线、消息队列）；观察者模式（框架的响应式依赖收集）；单例模式（全局弹窗、状态库实例）；代理模式（图片懒加载、Proxy 拦截）；装饰器模式（高阶组件与中间件）。每个模式都要能说出应用场景和手写实现。

面试要求不只是背概念：手写发布订阅是高频手写题，答的时候先写核心代码（订阅、发布、 cancel 的实现），再对比发布订阅与观察者的区别——前者有中间调度中心，后者目标直接通知观察者。结合 Vue 与 React 的实际用法说明模式的工程价值。

发布订阅有调度中心，观察者是目标直接通知，面试常要求对比
单例注意闭包与懒加载初始化的写法
代理与装饰器都强调不改变原对象、职责分离

JavaScript

// 经典发布订阅（事件总线）
class EventBus {
  constructor() { this.map = {}; }
  on(name, fn) { (this.map[name] = this.map[name] || []).push(fn); return this; }
  emit(name, ...args) { (this.map[name] || []).slice().forEach(fn => fn(...args)); }
  off(name, fn) {
    if (!fn) { this.map[name] = []; return; }
    this.map[name] = (this.map[name] || []).filter(f => f !== fn);
  }
}

const bus = new EventBus();
bus.on('click', v => console.log('A 收到', v));
bus.on('click', v => console.log('B 收到', v));
bus.emit('click', 'hello');      // A B 各打印一次

⚠ 常见误区

把发布订阅和观察者混为一谈，调度中心是分水岭
只会说模式名字，写不出事件总线的核心代码
单例写法忘了懒加载，实例在模块加载时就创建

🔗 相关词条手写发布订阅与事件总线框架响应式原理