观察者模式主要应用于对象之间一对多的依赖关系,当一个对象发生改变时,多个对该对象有依赖的其他对象也会跟着做出相应改变,这就非常适合用观察者模式来实现。使用观察者模式可以根据需要增加或删除对象,解决一对多对象间的耦合关系,使程序更易于扩展和维护。
基础知识:
观察者模式定义了对象间的一种一对多依赖关系,每当一个对象发生改变时,其相关依赖对象皆得到通知并被进行相应的改变。观察者模式又叫做发布-订阅模式。生活中有很多类似的关系,比如微信公众号订阅,多个读者订阅一个微信公众号,一旦公众号有更新,多个读者都会收到更新,而这种情况在应用程序中也非常常见,js绑定各种事件本质上就是观察者模式的实现。
观察者模式是一个非常有用的设计模式,它主要有两个角色组成:
(1)目标对象:作为一对多关系中的一,可以用来管理观察者的增加和删除。
(2)观察者对象:观察目标对象,一旦目标发生改变则做出相应的反应。
更多详解查看:网页链接,希望可以帮到你
参看书籍JavaScript模式第七章设计模式我的理解:观察者模式又叫订阅/发布模式。被观察者(发布者)内部需要有一些东西来处理观察者(订阅者)的方法。
发布者对象paper 需要有以下这些成员:
1、subscribers:
一个数组
//存储每个事件类型下的订阅者。每个类型下订阅者是一个数组。
2、subscribe():
将订阅者添加到subscribers数组
//订阅者订阅某个类型,传入对应的回调函数。
3、unsubscribe():
从订阅者数组subscribers删除订阅者。
4、publish():
循环遍历subscribers中的每个元素,并且调用他们注册时所提供的方法。
5、visitSubscribers()
遍历操作订阅对象的方法。帮助方法。
如下:
发布者;
创造一个发布者;
发布者对象
订阅者对象
发布事件 和结果
vue的双向数据绑定大家应该很熟悉了,当一方的值发生改变时,另一方绑定的值也会随之变化,用起来是挺嗨的。
但是在原生中我们怎么使用这种机制呢?
最近有个需求是通过对接websocket获取后台服务器实时变化的值,推送给web端使用。
基于这个需求,我使用到了js中的设计模式-观察者模式。
那么,让我们来一起了解一下吧。
先来看看具体机制:
这里对象定义了四个属性,分别绑定四个函数。
1、订阅:订阅方通过传递回调函数,观察者模式把这个回调函数push到自身的订阅功能里,以此来得知谁订阅了,然后判断是否要推送。
2、退订:找到对应的回调函数,然后在自身的订阅功能里把当前函数删除掉
3、发布:循环所有的订阅方,当发布方进行发送的时候,把对应的数据推送给订阅方
4、发布订阅:定义一个对象,使其具备订阅并且发布的功能
流程是这样,说起来头头是道的,问题是怎么使用?
举个栗子:
我想定义一个对象,使其具备发布订阅功能,发布方数值改变的时候,订阅方得到平方值得变化
这里通过input框的change事件,模拟了数据的实时变更,然后把当前值进行发布,这边一发布,订阅方就能通过回调函数得到实时变化的值,然后得到值进行相应的操作。
效果:
这样就能简单实现数据变更推送功能了。
注:文件中引入的observer的js是最上面提到的观察者模式的那一套流程,tools的js大家可以不必在意,是我自己原生封装的$函数,用来获取dom元素的。
具体需求,大家还需要变通,稍作修改。
好了,以上就是js的观察者模式实现的双向数据绑定。
如有问题,请指出,接受批评。