js observer观察者模式详解|极客笔记

js observer观察者模式详解

观察者模式是一种行为设计模式，它定义了对象之间的一对多依赖关系，当一个对象的状态改变时，所有依赖于它的对象都会得到通知并自动更新。在JavaScript中，观察者模式常用于实现事件处理、数据绑定等功能。本文将详细介绍JavaScript中的观察者模式，包括原理、实现方式、应用场景等。

原理介绍

观察者模式由两类对象组成：主体（Subject）和观察者（Observer）。主体维护一组观察者对象，当主体的状态发生变化时，主体会通知所有的观察者对象，并调用它们的更新方法。观察者对象可以根据主体的通知进行相应的操作。

实现方式

在JavaScript中，观察者模式可以通过原生的事件机制或自定义实现来实现。下面先介绍如何使用原生的事件机制实现观察者模式。

使用原生事件机制

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

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

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }

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

class Observer {
  update() {
    console.log('Received notification from Subject');
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

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

subject.notify();

上面的代码演示了如何使用原生的事件机制实现一个简单的观察者模式。Subject类表示主体对象，Observer类表示观察者对象，当Subject的状态发生变化时，通过调用notify方法通知所有的观察者对象。

自定义实现

除了使用原生的事件机制，我们还可以自定义实现观察者模式。下面是一个自定义实现的示例代码：

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

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

  removeObserver(observer) {
    const index = this.observers.indexOf(observer);
    if (index !== -1) {
      this.observers.splice(index, 1);
    }
  }

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

class Observer {
  update() {
    console.log('Received notification from Subject');
  }
}

const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();

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

subject.notify();

上面的代码与使用原生事件机制实现观察者模式的方式类似，只是在自定义实现中，我们需要手动调用观察者的update方法来进行通知。

应用场景

观察者模式在JavaScript中有着广泛的应用场景，其中最常见的就是实现事件处理和数据绑定。

事件处理

事件处理是观察者模式的经典应用之一。当用户触发某个事件时，触发器对象（如DOM元素）会通知注册在该事件上的监听器（观察者对象），监听器对象会根据事件进行相应的处理。

<!DOCTYPE html>
<html>
<head>
  <title>Observer Pattern Example</title>
</head>
<body>
  <button id="btn">Click me</button>
  <script>
    class Subject {
      constructor() {
        this.observers = [];
      }

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

      removeObserver(observer) {
        const index = this.observers.indexOf(observer);
        if (index !== -1) {
          this.observers.splice(index, 1);
        }
      }

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

    class Observer {
      update() {
        console.log('Button is clicked');
      }
    }

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

    document.getElementById('btn').addEventListener('click', () => {
      subject.notify();
    });
  </script>
</body>
</html>

上面的代码演示了如何使用观察者模式处理按钮点击事件。

数据绑定

数据绑定是另一个常见的应用场景，通过观察者模式可以实现数据的双向绑定，当数据发生变化时，视图会自动更新。下面是一个简单的双向数据绑定示例：

<!DOCTYPE html>
<html>
<head>
  <title>Observer Pattern Example</title>
</head>
<body>
  <input id="input" type="text">
  <p id="text"></p>
  <script>
    class Subject {
      constructor() {
        this.value = '';
        this.observers = [];
      }

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

      removeObserver(observer) {
        const index = this.observers.indexOf(observer);
        if (index !== -1) {
          this.observers.splice(index, 1);
        }
      }

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

      setValue(value) {
        this.value = value;
        this.notify();
      }

      getValue() {
        return this.value;
      }
    }

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

      update() {
        document.getElementById('text').innerText = this.subject.getValue();
      }
    }

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

    document.getElementById('input').addEventListener('input', () => {
      subject.setValue(document.getElementById('input').value);
    });
  </script>
</body>
</html>

上面的代码演示了如何使用观察者模式实现简单的双向数据绑定。