JavaScript设计模式提升代码质量详解

JavaScript设计模式的价值不在于炫技或彰显资历，而在于精准解决重复出现的结构问题——如状态同步混乱、对象创建冗余、事件响应失控等；文章深入剖析单例、Observer和工厂函数三大高频模式在JS生态中的正确用法：单例应以闭包封装实现可控共享与可预测生命周期，而非追求全局唯一；Observer比EventEmitter更契合前端响应式需求，推荐Proxy+自定义通知替代低效深比较；工厂函数则以参数驱动和行为组合取代僵化的类继承，真正发挥JS的动态性优势；核心提醒是——模式是问题的解药，不是代码的装饰品，用错比不用更危险。

单例模式不是为了“全局唯一”，而是为了“可控的共享实例”

很多人一上来就用 class + static instance 实现单例，结果发现测试时无法重置状态、模块热更新失败、或者和 ESM 的顶层作用域冲突。

真正该用单例的场景是：需要跨模块复用且初始化开销大（如日志器、配置加载器、WebSocket 连接管理器），同时要求生命周期可预测。

• 推荐用闭包封装，避免污染全局或依赖 new 调用：

  const Logger = (() => {
    let instance = null;
    return () => {
      if (!instance) {
        instance = { log: (msg) => console.log(`[LOG] ${msg}`) };
      }
      return instance;
    };
  })();

• 不要在构造函数里做异步初始化（如 fetch 配置）；改用 init() 方法并返回 Promise，调用方显式等待
• 如果项目用 React 或 Vue，优先考虑 Composition API / useMemo 等机制替代手写单例，避免脱离框架生命周期

Observer 模式比 EventEmitter 更适合前端状态流

Node.js 的 EventEmitter 在浏览器里容易引发内存泄漏（忘记 off）、事件名拼错无提示、无法链式响应。而原生 Observer（如 MutationObserver）或轻量实现（如 tiny-observer）更贴合 DOM 更新节奏。

• 监听对象变化时，优先用 Proxy + 自定义通知，而非深克隆对比：

  const createObservable = (obj) => {
    return new Proxy(obj, {
      set(target, key, value) {
        target[key] = value;
        notify(key, value); // 触发订阅
        return true;
      }
    });
  };

• 避免在 render 函数里直接调用 subscribe()；应放在 useEffect 或 onMounted 中，并确保 unsubscribe 被正确调用
• 当多个组件订阅同一状态时，别让每个组件都新建一个观察者实例——复用同一个 Subject 实例，否则响应会指数级放大

工厂函数比抽象类更适合 JavaScript 的动态性

class 继承在 JS 中常被误用：为了一点行为差异就建一堆子类，结果每个子类只重写一个方法，其余全是复制粘贴。JS 没有编译期类型检查，abstract class 只是徒增心智负担。

• 用参数驱动行为，而不是靠继承层级：

  const createButton = ({ type = 'primary', size = 'md', onClick }) => ({
    render() {
      const cls = `btn btn-${type} btn-${size}`;
      return `<button class="${cls}" onclick="${onClick}">Click</button>`;
    }
  });

• 当逻辑分支超过 3 种，且每种有独立验证/副作用时，才考虑拆成独立函数（如 createPrimaryButton、createOutlineButton），而不是塞进一个巨型 switch
• 工厂返回的对象不要暴露内部状态字段；若需修改，统一走 update(config) 方法，避免外部直接赋值破坏一致性

今天关于《JavaScript设计模式提升代码质量详解》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！