JS 开发必修课《JS 模式》— 设计模式篇

前端

2024-02-11 11:19:03

JavaScript 设计模式：现代开发中的核心原则

JavaScript 作为当今网络开发的主流语言，其设计模式对于构建复杂且可维护的应用程序至关重要。这些模式提供了一套可重用的解决方案，可帮助开发人员高效、轻松地应对常见编码挑战。

了解设计模式

设计模式是一种软件工程概念，它提供了一种结构化的方法来解决常见的编程问题。它通过抽象概念和封装行为来提高代码的可重用性、可维护性和可扩展性。

常见的 JavaScript 设计模式

JavaScript 中有许多设计模式，每种模式都有其独特的用途和优势。以下是几种常见的模式：

单例模式： 确保某个类只有一个实例，用于创建全局对象（如数据库连接）。
观察者模式： 当一个对象（称为主题）发生变化时，它会通知所有订阅该主题的观察者对象。
策略模式： 将算法或行为封装在一个独立的对象中，允许在运行时更改这些算法或行为。
享元模式： 减少对象创建的数量，用于管理大量相似对象。
迭代器模式： 提供一种以顺序方式访问集合中元素的方法。

代码示例

// 单例模式
class Singleton {
  private static instance = null;

  static getInstance() {
    if (Singleton.instance === null) {
      Singleton.instance = new Singleton();
    }
    return Singleton.instance;
  }
}

// 观察者模式
class Subject {
  private observers = [];

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

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

// 策略模式
class Context {
  private strategy = null;

  setStrategy(strategy) {
    this.strategy = strategy;
  }

  executeStrategy() {
    this.strategy.execute();
  }
}

// 享元模式
class Flyweight {
  private sharedState = null;

  constructor(sharedState) {
    this.sharedState = sharedState;
  }

  getUnsharedState() {
    return this.unsharedState;
  }

  setUnsharedState(unsharedState) {
    this.unsharedState = unsharedState;
  }
}

// 迭代器模式
class Iterator {
  private items = [];
  private index = 0;

  constructor(items) {
    this.items = items;
  }

  hasNext() {
    return this.index < this.items.length;
  }

  next() {
    if (this.hasNext()) {
      return this.items[this.index++];
    }

    return null;
  }
}