javascript设计模式_JavaScript设计模式之观察者模式（Observer Pattern）

最新推荐文章于 2024-05-31 14:59:51 发布

weixin_39602737

最新推荐文章于 2024-05-31 14:59:51 发布

阅读量71

点赞数

文章标签： javascript设计模式

观察者模式

观察者模式又叫发布订阅模式(Publish/Subscribe)，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。

使用观察者模式的好处：

1.抽象主题(Subject)角色：把所有对观察者对象的引用保存在一个集合中，每个抽象主题角色都可以有任意数量的观察者。抽象主题提供一个接口，可以增加和删除观察者角色。一般用一个抽象类和接口来实现。

2.抽象观察者(Observer)角色：为所有具体的观察者定义一个接口，在得到主题的通知时更新自己。

3.具体主题(ConcreteSubject)角色：在具体主题内部状态改变时，给所有登记过的观察者发出通知。具体主题角色通常用一个子类实现。

4.具体观察者(ConcreteObserver)角色：该角色实现抽象观察者角色所要求的更新接口，以便使本身的状态与主题的状态相协调。通常用一个子类实现。如果需要，具体观察者角色可以保存一个指向具体主题角色的引用。

观察者模式的使用

大部分前端都使用过观察者模式~

什么，你不信？

那么来看看下面这段代码~

 document.querySelector('#btn').addEventListener('click',function () { alert('You click this btn'); },false)

怎么样，是不是很眼熟！

没错，我们平时对 DOM 的事件绑定就是一个非常典型的 发布-订阅者模式 ，这里我们需要监听用户点击按钮这个动作，但是我们却无法知道用户什么时候去点击，所以我们订阅按钮上的 click 事件，只要按钮被点击时，那么按钮就会向订阅者发布这个消息，我们就可以做对应的操作了。

除了我们常见的 DOM 事件绑定外，观察者模式应用的范围还有很多~

比如比较当下热门 vue 框架，里面不少地方都涉及到了观察者模式，比如：

利用 Object.defineProperty() 对数据进行劫持，设置一个监听器 Observer，用来监听所有属性，如果属性上发上变化了，就需要告诉订阅者 Watcher 去更新数据，最后指令解析器 Compile 解析对应的指令，进而会执行对应的更新函数，从而更新视图，实现了双向绑定~

子组件与父组件通信

Vue 中我们通过 props 完成父组件向子组件传递数据，子组件与父组件通信我们通过自定义事件即 $on,$emit来实现，其实也就是通过 $emit 来发布消息，并对订阅者 $on 做统一处理 ~

ok，说了这么多，该我们自己露一手了，接下来我们来自己创建一个简单的观察者~

为了加深理解，让我们来看一个具体的例子，有三个报纸出版社，报社一、报社二、报社三，有两个订报人，分别是:订阅者1，订阅者2。在这里出版社就是被观察者，订报人就是观察者

被观察者

观察者(订阅功能)

取消订阅

好了，上面就已经做好了基本的准备的，我们来做个小demo

我们来看看html代码段

JavaScript设计模式之迭代器模式(Iterator Pattern)

参考

https://juejin.im/post/5bce9a35f265da0abd355715

https://juejin.im/entry/580b5553570c350068e6c2d6

https://juejin.im/post/59df4f74f265da430f311909

关注