首页 > 文章 > 前端

设计模式JavaScript实战教程

时间：2026-02-16 13:36:46 261浏览收藏

本文深入浅出地讲解了单例、工厂、观察者、装饰器和策略这五种经典设计模式在JavaScript中的简洁实现与真实应用场景，充分利用JS函数一等公民、闭包、动态对象和高阶函数等特性，让原本复杂的模式变得轻量直观；无论是配置管理、条件化对象创建、事件响应机制、横切逻辑增强，还是算法灵活切换，这些模式都直击前端开发中的常见痛点，帮你写出更可维护、可扩展、更富表达力的代码——掌握它们，不是为了套用模板，而是为了解决问题提供经过验证的思维框架。

设计模式_JS实现与应用

设计模式是软件开发中常见问题的可复用解决方案。在JavaScript中，由于其灵活的语言特性（如函数是一等公民、动态类型、原型继承等），许多经典的设计模式可以以更简洁或不同的方式实现。下面介绍几种常用的设计模式及其在JS中的实现与应用场景。

1. 单例模式（Singleton Pattern）

单例模式确保一个类只有一个实例，并提供一个全局访问点。

在JavaScript中，可以通过闭包或模块模式来实现单例：

const Singleton = (function () {
  let instance;

  function createInstance() {
    return { name: 'I am the only instance' };
  }

  return {
    getInstance: function () {
      if (!instance) {
        instance = createInstance();
      }
      return instance;
    }
  };
})();

// 使用
const obj1 = Singleton.getInstance();
const obj2 = Singleton.getInstance();
console.log(obj1 === obj2); // true

适用于：配置管理、日志记录器、全局状态管理等需要唯一实例的场景。

2. 工厂模式（Factory Pattern）

工厂模式用于创建对象，而无需指定具体的类。它将对象的创建逻辑封装起来。

function AnimalFactory(type) {
  if (type === 'dog') {
    return {
      speak: () => console.log('Woof!')
    };
  } else if (type === 'cat') {
    return {
      speak: () => console.log('Meow!')
    };
  }
}

// 使用
const dog = AnimalFactory('dog');
const cat = AnimalFactory('cat');
dog.speak(); // Woof!
cat.speak(); // Meow!

适用于：需要根据条件创建不同对象类型，且希望解耦创建逻辑与使用逻辑的情况。

3. 观察者模式（Observer Pattern）

观察者模式定义了对象之间的一对多依赖关系，当一个对象状态改变时，所有依赖它的对象都会收到通知。

在前端开发中，这种模式广泛应用于事件系统和响应式数据绑定。

class Subject {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter(obs => obs !== observer);
  }

  notify(data) {
    this.observers.forEach(observer => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log('Received:', data);
  }
}

// 使用
const subject = new Subject();
const obs1 = new Observer();
const obs2 = new Observer();

subject.subscribe(obs1);
subject.subscribe(obs2);
subject.notify('Hello Observers!'); // 两个观察者都会收到消息

适用于：事件总线、发布/订阅系统、Vue或React中的响应式更新机制。

4. 装饰器模式（Decorator Pattern）

装饰器模式允许在不修改原有对象的基础上，动态地扩展其功能。

JavaScript中可以通过高阶函数或ESNext的装饰器语法（需编译支持）实现。

function logDecorator(fn) {
  return function (...args) {
    console.log(`Calling ${fn.name} with`, args);
    const result = fn.apply(this, args);
    console.log(`Result: ${result}`);
    return result;
  };
}

function add(a, b) {
  return a + b;
}

const loggedAdd = logDecorator(add);
loggedAdd(2, 3); 
// 输出：
// Calling add with [2, 3]
// Result: 5

适用于：日志记录、权限校验、性能监控等横切关注点的增强。

5. 策略模式（Strategy Pattern）

策略模式将算法或行为封装成独立的策略对象，使它们可以互换使用。

const strategies = {
  'fast': () => console.log('Running fast strategy'),
  'slow': () => console.log('Running slow strategy'),
  'balanced': () => console.log('Running balanced strategy')
};

function runStrategy(name) {
  if (strategies[name]) {
    strategies[name]();
  } else {
    console.log('Unknown strategy');
  }
}

// 使用
runStrategy('fast');     // Running fast strategy
runStrategy('balanced'); // Running balanced strategy

适用于：表单验证、动画效果选择、算法切换等需要灵活替换逻辑的场景。

基本上就这些。JavaScript凭借其灵活性，让设计模式的实现更加轻量和直观。理解这些模式的核心思想比死记硬背更重要，合理运用能显著提升代码的可维护性和扩展性。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~

资料下载

编程学习资料下载

精选编程（Golang、Python、Java、C++、JavaScript等）教程、电子书与示例源码，一键打包本地下载学习。

立即下载