前端面试题：观察者模式

观察者模式和订阅-发布模式都属于事件模型，它们都是为了解耦合而存在，但是它们之间还是有一些不同之处的：

观察者模式中，主题（被观察者）和观察者之间是直接联系的，观察者订阅主题，主题状态发生变化时会直接通知观察者；而订阅-发布模式中，发布者和订阅者之间没有直接的联系，发布者发布消息到消息中心，订阅者从消息中心订阅消息。

在观察者模式中，主题和观察者是一对多的关系，一个主题可以有多个观察者，而在订阅-发布模式中，发布者和订阅者是多对多的关系，一个发布者可以有多个订阅者，一个订阅者也可以订阅多个发布者。

在观察者模式中，主题状态发生变化时，观察者会被直接通知，通知的方式可以是同步或异步的，观察者可以决定如何处理通知；而在订阅-发布模式中，消息是通过消息中心进行传递的，订阅者从消息中心订阅消息，发布者发布消息到消息中心，消息中心再将消息发送给订阅者，这个过程是异步的，订阅者不能决定何时接收消息。

在观察者模式中，主题和观察者之间存在强耦合关系，如果一个观察者被移除，主题需要知道这个观察者的身份；而在订阅-发布模式中，发布者和订阅者之间没有强耦合关系，发布者不需要知道订阅者的身份，订阅者也不需要知道发布者的身份。

观察者模式实现如下：

javascript 复制代码

class Observer {
	constructor(name) {
		this.name = name;
	}
	update(...args) {
		console.log("----->>>", this.name, ...args);
	}
}

javascript 复制代码

class Subject {
	constructor() {
		this.subs = [];
	}
	add(sub) {
		this.subs.push(sub);
	}
	remove(sub) {
		const index = this.subs.indexOf(sub);
		if (index !== -1) {
			this.subs.splice(index, 1);
		}
	}
	notify(...args) {
		this.subs.forEach(observer => observer.update(...args));
	}
}

javascript 复制代码

const ob1 = new Observer("one");
const ob2 = new Observer("two");
const ob3 = new Observer("three");
const ob4 = new Observer("four");

let sub = new Subject();
sub.add(ob1);
sub.add(ob2);
sub.add(ob3);
sub.add(ob4);

sub.notify(123);
sub.remove(ob1);
sub.notify();