前端高频面试必备：掌握观察者模式，点亮职业晋升之路

前端

2023-12-19 19:58:34

引言

前端领域，观察者模式绝对算得上是炙手可热的明星，在面试中也是频频亮相。想要在求职路上脱颖而出，熟练掌握观察者模式必不可少。本文将为你深入剖析这一重要设计模式，助你轻松应对面试挑战。

观察者模式：定义与原理

观察者模式是一种软件设计模式，它定义了一种一对多的依赖关系，其中一个对象（被观察者 ）会维护一个观察者对象的集合。当被观察者对象的状态发生改变时，它会自动通知所有观察者，从而触发观察者的相应动作。

其基本原理如下图所示：

[图片观察者模式示意图。被观察者对象 Subject 与多个观察者对象 Observer 相连接。当 Subject 状态改变时，它会通知所有 Observer，触发 Observer 的对应动作。]

观察者模式在前端中的应用

观察者模式在前端开发中有着广泛的应用场景，比如：

事件监听： 当用户在页面上触发事件（如点击、滚动等）时，观察者模式可以用来监听这些事件并执行相应的处理。
状态管理： 在单页应用中，观察者模式可以用来管理组件之间的状态同步。当某个组件的状态发生变化时，其他组件会自动更新其显示或行为。
异步请求处理： 在处理异步请求时，观察者模式可以用来监听请求的状态变化（如成功、失败、超时等），并根据不同的状态执行不同的操作。

JavaScript 中的观察者模式实现

在 JavaScript 中，我们可以通过自定义事件或第三方库（如 RxJS）来实现观察者模式。以下是自定义事件实现的一个简单示例：

// 创建一个被观察者对象
const subject = new Subject();

// 创建两个观察者对象
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');

// 观察者注册监听事件
subject.subscribe(observer1);
subject.subscribe(observer2);

// 被观察者对象状态发生改变，触发通知
subject.notify('Hello, observers!');