如何使用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

看完上述内容,是不是对如何使用javascript中的观察者模式有进一步的了解,如果还想学习更多内容,欢迎关注创新互联行业资讯频道。


名称栏目:如何使用javascript中的观察者模式
URL地址:http://bzwzjz.com/article/jhjgho.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站建设 营销型网站建设 响应式网站设计方案 网站制作公司 重庆手机网站建设 成都网站设计公司 宜宾网站设计 成都网站建设 网站建设推广 app网站建设 手机网站设计 攀枝花网站设计 网站建设开发 高端网站设计 成都网站设计 成都网站制作 成都网站制作 网站设计公司 成都网站设计 网站设计制作报价 成都网站建设 成都网站建设