javascript设计模式电子版：JavaScript设计模式精要，从概念到实战

来源：网络作者：日期：2025-11-15 07:32:12

JavaScript设计模式是现代前端开发中不可或缺的知识体系,它不仅能提升代码质量，还能增强团队协作效率，本文将深入浅出地解析JavaScript设计模式的核心概念、应用场景及实现方式，帮助开发者从理论到实践全面掌握这一重要技能。

设计模式概述

设计模式是解决软件设计问题的典型可复用方案,它不是某种编程语言的专属概念，而是通用的软件工程思想，JavaScript作为原型链驱动的语言，其设计模式具有独特性，尤其在浏览器端开发中表现得尤为重要。

1 设计模式的分类

创建型模式：关注对象的创建机制，如单例模式、工厂模式。
结构型模式：处理对象和类之间的组合与结构，如适配器模式、组合模式。
行为型模式：定义对象间的通信方式，如观察者模式、策略模式。

2 JavaScript的特殊性

JavaScript的原型链、闭包、异步编程等特点，使得其设计模式实现方式与传统面向对象语言有所不同，单例模式在JavaScript中常通过闭包和原型链实现。

核心设计模式解析

1 单例模式（Singleton）

场景：全局配置管理、工具类封装。

实现：

javascript设计模式电子版：JavaScript设计模式精要，从概念到实战

const Singleton = (() => {
  let instance;
  function create() {
    return {
      init() {
        console.log("初始化");
      }
    };
  }
  return {
    getInstance() {
      if (!instance) {
        instance = create();
      }
      return instance;
    }
  };
})();
Singleton.getInstance().init(); // 初始化

要点：利用闭包和立即执行函数避免全局污染，确保实例唯一性。

2 工厂模式（Factory）

场景：创建不同类型的对象，如DOM元素、API请求实例。

实现：

class ButtonFactory {
  static createButton(type) {
    const button = document.createElement('button');
    if (type === 'primary') {
      button.classList.add('primary');
    } else if (type === 'secondary') {
      button.classList.add('secondary');
    }
    return button;
  }
}
const primaryBtn = ButtonFactory.createButton('primary');

扩展：结合策略模式实现动态选择创建逻辑。

javascript设计模式电子版：JavaScript设计模式精要，从概念到实战

3 观察者模式（Observer）

场景：事件监听、状态同步（如Redux中的中间件）。

实现：

class Subject {
  constructor() {
    this.observers = [];
  }
  subscribe(fn) {
    this.observers.push(fn);
  }
  unsubscribe(fn) {
    this.observers = this.observers.filter(obs => obs !== fn);
  }
  notify(data) {
    this.observers.forEach(fn => fn(data));
  }
}
const subject = new Subject();
subject.subscribe(msg => console.log(msg));
subject.notify('Hello World');

优化：使用Proxy或WeakMap避免内存泄漏。

4 策略模式（Strategy）

场景：算法切换，如排序、支付方式选择。

javascript设计模式电子版：JavaScript设计模式精要，从概念到实战

实现：

const strategies = {
  add(a, b) { return a + b; },
  subtract(a, b) { return a - b; }
};
class Calculator {
  constructor(strategy = 'add') {
    this.strategy = strategies[strategy];
  }
  execute(a, b) {
    return this.strategy(a, b);
  }
}
const calculator = new Calculator('subtract');
console.log(calculator.execute(10, 5)); // 5

5 模块模式（Module）

场景：封装私有方法和全局API。

实现：

const Counter = (function() {
  let count = 0;
  return {
    increment() { count++; },
    decrement() { count--; },
    getCount() { return count; }
  };
})();
Counter.increment();
console.log(Counter.getCount()); // 1