前端面试题:观察者模式

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

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

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

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

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

观察者模式实现如下:

class Observer {
	constructor(name) {
		this.name = name;
	}
	update(...args) {
		console.log("----->>>", this.name, ...args);
	}
}
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));
	}
}
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();

你可能感兴趣的:(观察者模式,前端,javascript,vue.js,面试)