当前位置：首页 > 文章列表 > 文章 > 前端 > 设计模式JS实现与实战教程

设计模式JS实现与实战教程

2025-12-07 11:45:35 0浏览收藏

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

终于介绍完啦！小伙伴们，这篇关于《设计模式JS实现与实战教程》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！