javascript设计模式 – 观察者模式原理与用法实例
本文实例讲述了javascript设计模式 – 观察者模式原理与用法。分享给大家供大家参考,具体如下
介绍前面我们针对系统内一对多,多对多的情况做了解决方案,是使用中介者模式,将所有关联关系交由中介者处理。这一节我们介绍一种解决一对多问题的设计模式观察者模式
观察者模式是使用频率最高的设计模式之一,用于建立一种对象与对象之间的依赖关系。
定义定义对象之间的之间的一种一对多依赖关系,使得每当一个对象状态发生改变时,其相关依赖对象皆得到通知并被自动更新。观察者模式的别名包括发布-订阅模式,模型-视图模式,监听模式或从属模式。观察者模式是一种对象行为型模式。
场景我们使用观察者模式做一个进制转换的小demo
示例
var Subject = function(){ var obServer = []; var _state; this.getState = function(){ return _state; } this.setState = function(state){ _state = state; this.notifyAllObservers(); } this.attach = function(ob){ obServer.push(ob); } this.notifyAllObservers = function(){ obServer.map(function(item){ item.update(); }); } } var BinaryObserver = function(subject){ var _subject = subject; _subject.attach(this); this.update = function(){ console.log('Binary String:' + _subject.getState().toString(2)); } } var OctalObserver = function(subject){ var _subject = subject; _subject.attach(this); this.update = function(){ console.log('Octal String:' + _subject.getState().toString(8)); } } var HexaObserver = function(subject){ var _subject = subject; _subject.attach(this); this.update = function(){ console.log('Hex String:' + _subject.getState().toString(16)); } } var subject = new Subject(); new HexaObserver(subject); new OctalObserver(subject); new BinaryObserver(subject); subject.setState(15); // Hex String:f // Octal String:17 // Binary String:1111
在这个例子里面Subject称为目标,它是被观察的对象,一个目标允许被多个观察者观察,这些观察者存放于obServer的数组中,当目标发生change时通知所有观察者。
BinaryObserver,OctalObserver,HexaObserver这三个类称为观察者,观察者将对目标的改变作出反应。在观察者中需要维护一个指向目标对象的引用。
观察者模式
优点
观察者模式可以实现表示层和数据逻辑层的分离,定义了稳定的消息更新传递机制。
观察者模式在观察目标和观察者者之间建立一个抽象的耦合。观察目标只需要维持一个抽象观察者的集合,无需了解其具体观察者。
观察者模式支持广播通信,观察目标会向所有已注册的观察者发送通知,简化了一对多系统的设计难度
缺点
在存在大量观察者时,对所有观察者的通知会花大量时间
如果观察者和目标之间存在循环依赖,将会导致系统崩溃
适用场景
系统中存在一个对象的改变将导致一个或多个其他对象也发生改变。
系统中存在大量依赖链,A影响B,B影响C,C影响D
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具测试上述代码运行效果。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题《》、《》、《》、《》及《》
希望本文所述对大家JavaScript程序设计有所帮助。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程