一文带你理解JavaScript观察者模式.docx

第

一文带你理解JavaScript观察者模式

目录为什么需要观察者模式代码示例应用场景DOM事件监听：数据绑定自定义事件Promise对象Pub/Sub模式观察者模式（ObserverPattern）是一种行为型设计模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象，当主题对象发生变化时，它的所有观察者都会收到通知并进行相应的处理。

观察者模式包含两个角色：

主题（Subject）：被观察的对象，它维护了一个观察者列表，可以添加、删除观察者，以及通知观察者状态的变化。观察者（Observer）：观察主题的对象，当主题状态发生变化时，它会接收到通知并进行相应的处理。

为什么需要观察者模式

观察者模式的价值在于它可以将主题对象和观察者对象解耦，使得它们可以独立地进行扩展和修改，同时也可以降低代码的耦合度，提高代码的可维护性和可扩展性。

具体来说，观察者模式有以下几个价值：

观察者模式可以在不修改主题对象和观察者对象的情况下，增加新的观察者对象或者新的主题对象，从而实现系统的扩展性。

观察者模式将主题对象和观察者对象解耦，使得它们可以独立地进行扩展和修改，降低了它们之间的依赖关系，提高了系统的灵活性。

观察者模式通过事件通知的方式，实现了主题对象和观察者对象之间的通信，使得它们可以相互交流和协作，从而实现系统的功能。

总之，观察者模式可以帮助我们更好地组织代码，降低代码的耦合度，提高代码的可维护性和可扩展性，应用广泛，是一种非常有价值的设计模式。

代码示例

下面是一个简单的观察者模式的代码示例：

//主题对象

classSubject{

constructor(){

this.observers=[];//观察者列表

//添加观察者

addObserver(observer){

this.observers.push(observer);

//删除观察者

removeObserver(observer){

constindex=this.observers.indexOf(observer);

if(index!==-1){

this.observers.splice(index,1);

//通知所有观察者状态的变化

notify(){

for(constobserverofthis.observers){

observer.update(this);

//更改状态，并通知所有观察者

setState(state){

this.state=state;

this.notify();

//观察者对象

classObserver{

//接收主题对象，并将自己添加到主题的观察者列表中

constructor(subject){

subject.addObserver(this);

//接收通知并进行相应的处理

update(){

console.log(Observerupdate:,this);

//创建主题和观察者对象

constsubject=newSubject();

constobserver1=newObserver(subject);

constobserver2=newObserver(subject);

//更改主题状态，并通知所有观察者

subject.setState(newstate);

这段代码中，我们首先定义了一个主题对象Subject，它维护了一个观察者列表observers，并提供了添加、删除观察者的方法，以及通知所有观察者状态变化的方法notify。在setState方法中，我们将状态赋值给state，并调用notify方法通知所有观察者。

然后定义了一个观察者对象Observer，它在构造函数中接收主题对象subject，并将自己添加到subject的观察者列表中。在update方法中，我们打印出观察者自身的信息。

最后创建了一个主题对象subject，以及两个观察者对象observer1和observer2。调用setState方法更改主题状态，并通知所有观察者。

应用场景

观察者模式的应用场景很多，以下是几个常见的场景及对应的代码示例：

DOM事件监听：

常见的如click事件、mouse事件、keyboard事件等，通过addEvent