您的位置:网站首页 > IT观察 > 正文

Javascript设计模式理论与实战:观察者模式

类别:IT观察 日期:2017-11-1 19:32:09 人气: 来源:

  观察者模式主要应用于对象之间一对多的依赖关系,当一个对象发生改变时,多个对该对象有依赖的其他对象也会跟着做出相应改变,这就非常适合用观察者模式来实现。使用观察者模式可以根据需要增加或删除对象,解决一对多对象间的耦合关系,使程序更易于扩展和。

  观察者模式定义了对象间的一种一对多依赖关系,每当一个对象发生改变时,其相关依赖对象皆得到通知并被进行相应的改变。观察者模式又叫做发布-订阅 模式。生活中有很多类似的关系,比如微信号订阅,多个读者订阅一个微信号,一旦号有更新,多个读者都会收到更新,而这种情况在应用程序中也非 常常见,js绑定各种事件本质上就是观察者模式的实现。

  在Web开发中,我们经常遇到这种情况,ajax请求数据后,要同时更新数据到页面的不同部分中,这种情况我们可以最直接的在ajax的回调中更新 页面,但是如果要更新的很多,我们就要去修改回调函数,这样代码的性和扩张性不高,这种情况下,我们就可以用观察者模式来实现。

  目标对象Subject中有一个数组,这个数组保存观察者列表,而目标对象提供三个方法:观察对象,取消观察对象,触发对象更新。

  我们通过subscribe方法增加观察者,保存到observers数组中,如果有需要可以通过unsubscribe方法取消订阅,然后更新数据时调用fire方法触发,从而通知各个观察者进行相应处理。

  假设我们页面有一个主视图和一个侧视图,两个视图都要进行相应的修改,我们可以定义两个对象如下:

  代码定义了两个对象,分别为侧视图和主视图,两个对象都有相应的渲染页面的方法render,然后我们将两个方法添加到观察者列表中。

  通过调用fire方法,传入“test”,从而触发两个render函数。从这段代码中,我们可以很轻松地通过subscribe来添加观察者对象,而不必每次都去修改fire方法。

  在jQuery中,通过on方法来绑定事件,off来移除事件,trigger来触发事件,本质上就是一种观察者模式。代码中,我们通过一个obj对象来保存观察者对象,我们只要像平时绑定事件一样使用就可以,如下:

  这段代码分别输出test和test2.我们绑定了两个处理函数到render上,然后通过fire触发render事件,这就实现了观察者模式一对多依赖的特点。

  观察者模式是一种很常用的设计模式,因为我们的应用程序中涉及到依赖关系的非常多。常见的比如消息通知,向用户发送一个消息需要同时通知到站内信, 邮件,短信等多种消息,这种一对多的情况非常适合使用观察者模式来实现。使用观察者模式的关键是在于理清目标对象和观察者对象,目标对象通过一个数组对观 察者对象进行管理,更新数据的时候再循环调用观察者对象,从而实现观察者模式。

  每日头条、业界资讯、热点资讯、爆料,全天微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与,TechWeb微博期待您的关注。

  10月27日下午3点,iPhone X终于正式预购,下手快的小伙伴下周五(11月3日)就能首批拿...

  小米Note 3是今年9月份发布的一款大屏旗舰,该机现已降价300元,2199元起售,性价比空...

  在Mate 10上市前,华为Mate 9的价格已经降低到2899元起,堪称是史上最低价。而随着Mat...

  时间10月30日早间消息,Uber上周五宣布任命一名新的首席法务官,帮助该公司应对诸...

  一名美国已责令进行一项新的审判,目的是判定三星应因其抄袭苹果公司iPhone外观设...

  去年年底《超级马里奥跑酷》在 iOS 首发上架后,任天堂随即配合 iOS 10 的新 iMessage...

  尽管苹果已经公开表示,iOS 是为移动设备设计的系统,而 macOS 的主场是桌面,这就决...

  王者荣耀S9赛季开始已经有几天了,不少的玩家已经开始着手上分了。那么S9哪些英雄上分......

  《师》与《滑头鬼之孙 ~千年魔京~》联动即将正式!主角奴良陆生将作为此次联......

  炉石传说乱斗无头骑士怎么打呢?无头骑士乱斗打法攻略技巧有哪些?124期乱斗想必一些......

  《绝地大逃杀》中的四排是需要有一些战术策略的,这样团队合作才能发挥出较好的效......

  推荐:

  

0
0
0
0
0
0
0
0
下一篇:没有资料

网友评论 ()条 查看

姓名: 验证码: 看不清楚,换一个

推荐文章更多

热门图文更多

最新文章更多

关于联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助

声明:网站数据来源于网络转载,不代表站长立场,如果侵犯了你的权益,请联系站长删除。

CopyRight 2010-2016 科技创新信息网- All Rights Reserved