文章の目录

• 一、定义
• 二、使用场景
• 三、示例
• 参考
• 写在最后

一、定义

观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象(通知者)。这个主题对象观察到被观察者发生变化时，会通知所有的观察者对象，使它们能够自己更新自己。

这里涉及了几个角色及他们自己功能：

• 观察者对象：可以更新自己
• 主题对象：可以添加观察者，移除观察者，通知观察者
• 被观察者：被主题对象监视，当被观察者发生变化时，主题对象会通知观察者更新自己的状态

二、使用场景

当一个对象改变需要同时改变其他对象的时候，而且不需要知道有多少个对象需要改变

三、示例

class Event {constructor() {// 保存事件this.handles = {};}// 添加事件,监听 、观察addEvent(eventName, fn) {// {'myevent':[fn1,fn2....],'myevent2':[fn1,fn2..]}if (typeof this.handles[eventName] === "undefined") {this.handles[eventName] = [];}this.handles[eventName].push(fn);}// 触发trigger(eventName) {this.handles[eventName].forEach(v => {v();});}// 移除事件removeEvent (eventName,fn）;
}
let obj1 = {fn() {console.log("fn111");}
};
let obj2 = {fn() {console.log("fn222");}
};
let myevent = new Event();
// 添加事件(没有执行)
myevent.addEvent("myevent", obj1.fn);
myevent.addEvent("myevent", obj2.fn);
// myevent.removeEvent("myevent",obj2.fn);  //移除obj2.fn
setTimeout(() => {myevent.trigger("myevent");
}, 1000);

参考

1. js观察者模式的介绍及使用

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！