js观察者模式

设计模式之—观察者模式 

一:概念:

观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时,会通知所有的观察者对象,使他们能够自动更新自己。

注意:观察者模式和发布订阅模式实际上是有区别的,但大致一样,有很多相似的地方,如果有想了解的童鞋可以看一下下面的博客:

链接:https://molunerfinn.com/observer-vs-pubsub-pattern/#%E6%A6%82%E8%BF%B0

二:解释

举个栗子:

    假如你去家小区商店买东西,你想要一个苹果,可是老板说苹果卖没了,得等到下次进货才有,你只能等老板下次进货再来才可以买到,但是你却不知道老板啥时候进货,于是你就和老板商量,你现在就把苹果的钱先给老板(这里相当于订阅),然后等老板下次进货的第一时间,把苹果给你,这样你就可以在老板进货的第一时间吃到苹果了,这就是一个简单的观察者模式。

其实我们在平时也用到过观察者模式,只是我们没有注意到而已,举一个简单的例子:我们曾经在DOM节点上面绑定过事件函数,那我们就使用过观察者模式,应为JS和DOM之间就是实现了一种观察者模式。

document.body.addEventListener("click", function() {
    alert("Hello World")
},false )
document.body.click() //模拟用户点击

以上js就是观察者,DOM就是被观察者,给DOM添加点击事件就相当于订阅了DOM,当DOM被点击,DOM就会通知js触发‘ alert("Hello World") ’

参考博客

https://www.cnblogs.com/loveyt/p/10778986.html

https://srtian96.gitee.io/blog/2018/05/21/JavaScript%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%E4%B9%8B%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F/

猜你喜欢

转载自www.cnblogs.com/zhengyufeng/p/10985321.html