Javascript设计模式学习之Observer(观察者)模式

DevWiki 发布于2019-08-19 17:50 / 2156人阅读

摘要：一个对象维持一系列依赖于它观察者的对象，将有关状态的任何变更自动通知给它们。观察者模式的实现模拟拥有的一系列依赖使用扩展对象模拟目标和在观察者列表上添加删除或通知观察者

一个对象（subject)维持一系列依赖于它(观察者）的对象，将有关状态的任何变更自动通知给它们。

当一个目标需要告诉观察者发生了什么有趣的事情,它会向观察者广播一个通知

当我们不再希望某个特定的观察者获取其注册目标发出的改变通知时,该目标可以将它从观察者列表中删除。

Observer(观察者)模式列表组件

Subject(目标): 维护一系列观察者,方便添加或删除观察者

Observer(观察者): 为那些在目标状态发生改变时需获得通知的对象提供一个更新接口

ConcreteSubject(具体目标):状态发生改变时,向Observer发出通知,存储ConcreteObserver的状态

ConcreteObserver(具体观察者):存储一个指向ConcreteSubject的更新接口,实现Observer的更新接口,以使自身状态与目标的状态保持一致。

1. 观察者模式的实现

1.1 模拟拥有的一系列依赖Observer

function ObserverList(){
   this.observerList = [];
}
ObserverList.prototype.Add = function(obj){
   return this.observerList.push(obj);
};
ObserverList.prototype.Remove = function(obj){
   return this.observerList.pop(obj);
};
ObserverList.prototype.Empty = function(){
   this.observerList = [];
};
ObserverList.prototype.Count = function(){
   return this.observerList.length;
};
ObserverList.prototype.Get = function(index){
   if(index > -1 && index < this.observerList.length){
      return this.observerList[index];
   }
};
ObserverList.prototype.Insert = function(obj,index){
   var pointer = -1;
   if(index === 0){
      this.observerList.unshift(obj);
      pointer = index;
   }else if(index === this.observerList.length){
      this.observerList.push(obj);
      pointer = index;
   }
   return pointer;
};
ObserverList.prototype.IndexOf = function(obj,startIndex){
   var i = startIndex,
       pointer = -1;
   while(i < this.observerList.length){
       if(this.observerList[i] === obj){
          pointer = i;
       }
       i++;
   }
   return pointer;
};
ObserverList.prototype.RemoveIndexAt = function(index){
   if(index === 0){
     this.observerList.shift();
   }else if(index === this.observerList.length - 1){
     this.observerList.pop();
   }
};
//使用extension扩展对象
function extend(obj,extension){
   for(var key in obj){
       extension[key] = obj[key];
   }
};
var liuyidi = {};
var observer = new ObserverList();
extend(observer,liuyidi);
console.log(liuyidi);

1.2 模拟目标(Subject)和在观察者列表上添加、删除或通知观察者

function Subject(){
   this.observers = new ObserverList();
}

Subject.prototype.AddObserver = function(observer){
   this.observers.Add(observer);
};

Subject.prototype.RemoveObserver = function(observer){
   this.observers.RemoveIndexAt(this.observers.IndexOf(observer,0));
};

Subject.prototype.Notify = function(context){
   var observerCount = this.observers.Count();
   for(var i = 0; i < observerCount; i++){
      this.observers.Get(i).Update(context);
   }
};

GPU云服务器云服务器设计模式观察者模式观察者模式 php观察者模式 ios观察者模式

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

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

忘了再看设计模式-行为型

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

ShevaKuilin 2019-08-15 12:03 评论0 收藏0
vue源码学习之简单的数据监听

摘要：先实现一个简单的数据劫持。思路遍历对象的每个属性，为每个属性挂上监听函数即利用进行元编程考虑属性的子属性的监听先上代码你访问了你设置了新的其中涉及的知识点如果属性值还是对象，则递归继续先实现一个简单的数据劫持。思路：遍历对象的每个属性，为每个属性挂上监听函数（即利用Object.defineProperty进行元编程）；考虑属性的子属性的监听；先上代码： function ...

zone 2019-08-20 15:17 评论0 收藏0
一起学设计模式 - 观察者模式

摘要：观察者模式是一种使用频率非常高的设计模式，无论是移动应用应用或者桌面应用，观察者模式几乎无处不在，它为实现对象之间的联动提供了一套完整的解决方案，凡是涉及到一对一或者一对多的对象交互场景都可以使用观察者模式。观察者模式（Observer Pattern）属于对象行为型模式的一种，定义对象之间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。 ...

cpupro 2019-08-16 10:56 评论0 收藏0
Javascript设计模式学习之Decorator(装饰者)模式

摘要：抽象模式使用的装饰者模式允许我们在运行时或者在随后一个点上动态地将两个或两个以上的对象和它们的属性一起扩展或合并为一个单一对象。定义三个对象目的是为了装饰对象将的额外功能附加到上。抽象decorator模式使用jQuery的装饰者模式 jQuery.extend()允许我们在运行时或者在随后一个点上动态地将两个或两个以上的对象(和它们的属性)一起扩展(或合并）为一个单一对象。定义...

Joyven 2019-08-19 17:50 评论0 收藏0
Javascript设计模式学习之Module(模块)模式

摘要：实现模块的几种方法对象字面量表示法模式模式模式模块对象字面量对象字面量型完整版配置对象基本方法根据配置信息输出内容重写当前的配置信息输出结果值模式最初被定义为一种在传统软件工程中为类提供私有和公有封装的方法。该模式返回一个对象。 javascript实现模块的几种方法: 对象字面量表示法 Module模式 AMD模式 CommonJS模式 ECMAScript Harmony模块 ...

付永刚 2019-08-19 17:48 评论0 收藏0