前端面试题:观察者模式

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

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

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

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

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

观察者模式实现如下:

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();
相关推荐
mapbar_front11 分钟前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
倔强青铜三17 分钟前
苦练Python第67天:光速读取任意行,linecache模块解锁文件处理新姿势
人工智能·python·面试
quweiie33 分钟前
thinkphp8+layui多图上传,带删除\排序功能
前端·javascript·layui
李鸿耀38 分钟前
React 项目 SVG 图标太难管?用这套自动化方案一键搞定!
前端
闲蛋小超人笑嘻嘻41 分钟前
树形结构渲染 + 选择(Vue3 + ElementPlus)
前端·javascript·vue.js
我是华为OD~HR~栗栗呀1 小时前
华为od-21届考研-C++面经
java·c语言·c++·python·华为od·华为·面试
叶梅树1 小时前
从零构建A股量化交易工具:基于Qlib的全栈系统指南
前端·后端·算法
巴博尔1 小时前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城1 小时前
UniApp 实现双语功能
javascript·vue.js·uni-app
Asthenia04122 小时前
技术复盘:从一次UAT环境CORS故障看配置冗余的危害与最佳实践
前端