js的常用的设计模式例子

单例模式（Singleton Pattern）：

单例模式确保一个类只有一个实例，并提供一个全局访问点。在前端开发中，这可以用于创建一个全局状态管理器，例如 Redux 或 Vuex。

class Singleton {
  constructor() {
    if (!Singleton.instance) {
      Singleton.instance = this;
    }
    return Singleton.instance;
  }
}

const instance1 = new Singleton();
const instance2 = new Singleton();

console.log(instance1 === instance2); // 输出 true

观察者模式（Observer Pattern）：

观察者模式用于建立对象之间的一对多依赖关系，当一个对象状态发生变化时，所有依赖它的对象都会得到通知。在前端中，这常用于实现事件处理和订阅/发布系统。

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

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

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

class Observer {
  constructor(name) {
    this.name = name;
  }

  update(message) {
    console.log(`${this.name} received message: ${message}`);
  }
}

const subject = new Subject();
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');

subject.addObserver(observer1);
subject.addObserver(observer2);

subject.notify('Hello, observers!');

工厂模式（Factory Pattern）：

工厂模式用于创建对象，隐藏了对象的具体实现细节。在前端中，可以用于创建不同类型的 UI 组件或处理 AJAX 请求。

class Button {
  constructor(label) {
    this.label = label;
  }

  render() {
    const button = document.createElement('button');
    button.textContent = this.label;
    return button;
  }
}

class Input {
  constructor(type) {
    this.type = type;
  }

  render() {
    const input = document.createElement('input');
    input.type = this.type;
    return input;
  }
}

function createUIComponent(type, label) {
  if (type === 'button') {
    return new Button(label);
  } else if (type === 'input') {
    return new Input(label);
  }
}

const button = createUIComponent('button', 'Click me');
const input = createUIComponent('input', 'text');