JS 设计模式十三（观察者模式）

shleyZ 发布于2019-08-19 18:24 / 633人阅读

摘要：观察者模式对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。具体主题角色在具体主题内部状态改变时，给所有登记过的观察者发出通知。

观察者模式

对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。

观察者要素

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

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

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

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

例子

为了生产的安全，你决定为你的工厂安装火警报警器，现在你需要为这个报警器写个控制软件。

// 观察者模式

var DP = require("./DesignPattern.js");

function Factory() {
  DP.Interface(this, ["attach", "detach", "nofityObserver", "fire"])
  //添加火灾报警器
  //移除火灾报警器
  //通知报警器
  //发生火灾
}
function FireAlarm(name) {
  var _name=name
  this.rang=function(){
    console.log(_name+"：发生工厂火灾了,鸣笛");
  }
}
function PorscheFactory() {
  this.__proto__ = new Factory();
  var _alarms = [];
  this.attach = function (alarm) {
    _alarms.push(alarm);
  }
  this.detach = function (alarm) {
    _alarms.splice(_alarms.indexOf(alarm),1);
  }
  this.nofityObserver = function () {
    _alarms.forEach(function(alarm){
      alarm.rang()
    })
  }
  this.fire=function(){
    console.log("工厂着火了");
    this.nofityObserver();
  }
}

var f=new PorscheFactory();
var fireAlarm1=new FireAlarm("门卫报警器");
var fireAlarm2=new FireAlarm("消防局报警器");
var fireAlarm3=new FireAlarm("门卫报警器");
f.attach(fireAlarm1);
f.attach(fireAlarm2);
f.attach(fireAlarm3);
f.fire();
console.log("--------------------------------------");
f.detach(fireAlarm3);
f.fire();

观察者模式优点：

1.观察者和被观察者是抽象耦合的。
2.建立一套触发机制。

观察者模式缺点：

1.如果一个被观察者对象有很多的直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间。
2.如果在观察者和观察目标之间有循环依赖的话，观察目标会触发它们之间进行循环调用，可能导致系统崩溃。
3.观察者模式没有相应的机制让观察者知道所观察的目标对象是怎么发生变化的，而仅仅只是知道观察目标发生了变化。

适用场景：

1.当一个抽象模型有两个方面, 其中一个方面依赖于另一方面。将这二者封装在独立的对象中以使它们可以各自独立地改变和复用。
2.当对一个对象的改变需要同时改变其它对象, 而不知道具体有多少对象有待改变。
3.当一个对象必须通知其它对象，而它又不能假定其它对象是谁。换言之, 你不希望这些对象是紧密耦合的。

GPU云服务器云服务器 js观察者模式视频设计模式观察者模式观察者模式 php观察者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79544.html

开篇：二十三种设计模式的通俗理解

摘要：里氏替换原则里氏代换原则面向对象设计的基本原则之一。里氏代换原则中说，任何基类可以出现的地方，子类一定可以出现。里氏代换原则是对开闭原则的补充。而基类与子类的继承关系就是抽象化的具体实现，所以里氏代换原则是对实现抽象化的具体步骤的规范。 showImg(https://segmentfault.com/img/bVbuXAu?w=640&h=361); 本文为本次系列文章的第一篇，接下...

morgan 2019-08-16 18:33 评论0 收藏0
忘了再看设计模式-行为型

摘要：推文用设计模式解构三国是一种什么体验行为型设计模式一策略模式工厂模式优化结构状态模式随着状态改变而改变行为。推文状态机与状态模式责任链模式多个对象依次处理请求前者指定后者。代理模式代理针对一个对象，为了增加控制等中介双方都是多个，为了解耦。策略模式选择使用封装好的一系列算法，可相互替换。类比：商店[Context]买完衣服买单[Stratege]（现金[Concrete Stra...

ShevaKuilin 2019-08-15 12:03 评论0 收藏0
前端面试题小集

摘要：一一个页面上两个左右铺满整个浏览器，要保证左边的一直为，右边的跟随浏览器大小变化比如浏览器为，右边为，浏览器为，右边为，请写出大概的代码。如果需要使用，最好是通过动态给添加属性值，这样可以绕开以上两个问题。一、一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为...

bawn 2019-08-20 14:15 评论0 收藏0
JS基础入门篇（三十三）—正则表达式

摘要：举例一使用这个正则，打印结果为使用这个正则，打印结果为举例二打印结果如下过滤标签你好美丽的上海想转化成你好，美丽的上海如果后面加，就会进入非贪婪模式。如果后面不加，就会进入贪婪模式，结果为上海。你好美丽的上海。 1.创建一个正则表达式方法一：使用一个正则表达式字面量，其由包含在斜杠之间的模式组成。 var reg1 = /a/; var reg2 = /ab+c/; 方法二：调用Re...

caspar 2019-08-22 18:18 评论0 收藏0
JS基础入门篇（三十三）—正则表达式

摘要：举例一使用这个正则，打印结果为使用这个正则，打印结果为举例二打印结果如下过滤标签你好美丽的上海想转化成你好，美丽的上海如果后面加，就会进入非贪婪模式。如果后面不加，就会进入贪婪模式，结果为上海。你好美丽的上海。 1.创建一个正则表达式方法一：使用一个正则表达式字面量，其由包含在斜杠之间的模式组成。 var reg1 = /a/; var reg2 = /ab+c/; 方法二：调用Re...

hot_pot_Leo 2019-08-02 10:47 评论0 收藏0