当前位置: 首页 > news >正文

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

一个对象(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);
   }
};

相关文章:

  • python用sybase自带的sybpydb模块访问数据库
  • 三种对象传参和ModelDriven的原理
  • netty demo
  • [Angularjs]asp.net mvc+angularjs+web api单页应用
  • 解决tomcat6部署spring4+mybatisJSP页面产生的500错误,控制台报java.lang.NullPointerException的问题...
  • SQL Server中查看哪些游标未释放
  • 【抄】更改eclipse配置
  • 胜利大逃亡(续)
  • 理解JavaScript中的回调函数
  • hdu 5640 King's Cake(模拟)
  • 2、Python语法基础
  • Python基础教程第二版 6:抽象
  • UnicodeEncodeError: 'ascii' codec can't encode
  • 【Android 学习】 Android反编译
  • 【转】Java 中的 i = i++
  • CSS3 聊天气泡框以及 inherit、currentColor 关键字
  • ES6核心特性
  • git 常用命令
  • JAVA_NIO系列——Channel和Buffer详解
  • JavaWeb(学习笔记二)
  • js作用域和this的理解
  • leetcode-27. Remove Element
  • leetcode388. Longest Absolute File Path
  • Linux CTF 逆向入门
  • mysql innodb 索引使用指南
  • Python 使用 Tornado 框架实现 WebHook 自动部署 Git 项目
  • 聊聊sentinel的DegradeSlot
  • 深入浅出webpack学习(1)--核心概念
  • 智能合约开发环境搭建及Hello World合约
  • [地铁译]使用SSD缓存应用数据——Moneta项目: 低成本优化的下一代EVCache ...
  • 【运维趟坑回忆录】vpc迁移 - 吃螃蟹之路
  • # MySQL server 层和存储引擎层是怎么交互数据的?
  • #pragma 指令
  • #pragma预处理命令
  • (02)vite环境变量配置
  • (32位汇编 五)mov/add/sub/and/or/xor/not
  • (C语言)编写程序将一个4×4的数组进行顺时针旋转90度后输出。
  • (草履虫都可以看懂的)PyQt子窗口向主窗口传递参数,主窗口接收子窗口信号、参数。
  • (附源码)springboot社区居家养老互助服务管理平台 毕业设计 062027
  • (附源码)计算机毕业设计大学生兼职系统
  • (排序详解之 堆排序)
  • (译)计算距离、方位和更多经纬度之间的点
  • (转)IOS中获取各种文件的目录路径的方法
  • (转)jdk与jre的区别
  • (转)视频码率,帧率和分辨率的联系与区别
  • (轉貼) 蒼井そら挑戰筋肉擂台 (Misc)
  • **PyTorch月学习计划 - 第一周;第6-7天: 自动梯度(Autograd)**
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复
  • .NET 6 在已知拓扑路径的情况下使用 Dijkstra,A*算法搜索最短路径
  • .NET Core 中插件式开发实现
  • .NET 使用 XPath 来读写 XML 文件
  • .NET 中使用 TaskCompletionSource 作为线程同步互斥或异步操作的事件
  • .NETCORE 开发登录接口MFA谷歌多因子身份验证
  • .Net接口调试与案例
  • .NET框架类在ASP.NET中的使用(2) ——QA