多选框多选取舍观察者模式运筹帷幄**

前端

2024-02-19 02:05:52

一、什么是Observer（观察者）模式

Observer模式是一种设计模式，它允许对象在不了解对象内部的情况下，对对象的状态进行监听和响应。

在Observer模式中，有以下几个角色：

Subject（目标） ：维护一系列的观察者，方便添加或者删除观察者。
Observer(观察者) ：观察目标的状态，并根据目标的状态做出相应的反应。

二、具体实现

我们实现Observer模式需要使用到以下组件：

Subject（目标） ：维护一系列的观察者，方便添加或者删除观察者。
Observer(观察者) ：观察目标的状态，并根据目标的状态做出相应的反应。

1. 实现Subject（目标）

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

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

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

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

2. 实现Observer(观察者)

class Observer {
  constructor(subject) {
    this.subject = subject;
    this.subject.addObserver(this);
  }

  update() {
    // 根据目标的状态做出相应的反应
  }
}

3. 使用Observer模式实现多选框的全选功能

const subject = new Subject();
const observer = new Observer(subject);

const checkboxes = document.querySelectorAll('input[type="checkbox"]');

checkboxes.forEach((checkbox) => {
  checkbox.addEventListener('change', () => {
    subject.notifyObservers();
  });
});

observer.update = () => {
  const checkedAll = checkboxes.every((checkbox) => checkbox.checked);
  const checkboxAll = document.querySelector('input[type="checkbox"][name="all"]');
  checkboxAll.checked = checkedAll;
};