Js面向对象之观察者模式

  1 //模拟一个目标可能拥有的一些列依赖
  2 function ObserverList() {
  3 this.observerList = [];
  4 };
  5 
  6 //添加一个观察者
  7 ObserverList.prototype.Add = function (obj) {
  8 return this.observerList.push(obj);
  9 };
 10 
 11 //清除所有观察者
 12 ObserverList.prototype.Empty = function () {
 13 this.observerList = [];
 14 };
 15 
 16 //获得所有观察者的数量
 17 ObserverList.prototype.Count = function () {
 18 return this.observerList.length;
 19 };
 20 
 21 //获取某个指定的观察者
 22 ObserverList.prototype.Get = function (index) {
 23 if (index > -1 && index < this.observerList.length) {
 24 return this.observerList[index];
 25 }
 26 };
 27 //插入一个观察者
 28 ObserverList.prototype.Insert = function (obj, index) {
 29 var pointer = -1;
 30 if (index === 0) {
 31 this.observerList.unshift(obj);
 32 pointer = index;
 33 } else if (index == this.observerList.length) {
 34 this.observerList.push(obj);
 35 pointer = index;
 36 }
 37 return pointer;
 38 };
 39 //从某个位置开始查找特定的观察者并返回观察者的索引值
 40 ObserverList.prototype.IndexOf = function (obj, startIndex) {
 41 var i = startIndex, pointer = -1;
 42 while (i < this.observerList.length) {
 43 if (this.observerList[i] == obj) {
 44 pointer = i;
 45 } i++;
 46 }
 47 return pointer;
 48 };
 49 
 50 //移除某个特定索引的观察者（如果存在）
 51 ObserverList.prototype.RemoveIndexAt = function (index) {
 52 if (index == 0) {
 53 this.observerList.shift();
 54 } else if (index == this.observerList.length - 1) {
 55 this.observerList.pop();
 56 }
 57 };
 58 
 59 //扩展对象
 60 function extend(obj, extension) {
 61 console.log(obj);
 62 for (var k in obj) {
 63 console.log(k);
 64 extension[k] = obj[k]
 65 }
 66 };
 67 
 68 //模拟一个目标对象，并模拟实现在观察者列表上添加、删除和通知观察者的能力
 69 function Subject() {
 70 this.observers = new ObserverList();
 71 };
 72 
 73 //目标添加一个观察者
 74 Subject.prototype.AddObserver = function (observer) {
 75 this.observers.Add(observer);
 76 };
 77 
 78 //目标对象移除某个观察者
 79 Subject.prototype.RemoveObserver = function (observer) {
 80 this.observers.RemoveIndexAt(this.observers.IndexOf(observer, 0));
 81 };
 82 
 83 Subject.prototype.RemoveAllObserver = function () {
 84 this.observers = [];
 85 }
 86 
 87 //模拟实现通知功能
 88 Subject.prototype.Notify = function (context) {
 89 var observerCount = this.observers.Count();
 90 for (var i = 0; i < observerCount; i++) {
 91 this.observers.Get(i).Update(context);
 92 }
 93 };
 94 //模拟创建一个观察者
 95 function Observer() {
 96 this.Update = function () {
 97 };
 98 }
 99 
100 var controlCheckbox = document.getElementById("mainCheckBox");
101 var removerObserver = document.getElementById("removerAllObserver");
102 var addBtn = document.getElementById("addNewObserver");
103 var container = document.getElementById("observerContainer");
104 extend(new Subject(), controlCheckbox);
105 
106 controlCheckbox["onclick"] = Function("controlCheckbox.Notify(controlCheckbox.checked)");
107 
108 addBtn["onclick"] = AddNewObserver;
109 function AddNewObserver() {
110 var check = document.createElement("input");
111 check.type = "checkbox";
112 extend(new Observer(), check);
113 check.Update = function (value) {
114 this.checked = value;
115 };
116 controlCheckbox.AddObserver(check);
117 container.appendChild(check);
118 }

View Code

 

转载于:https://www.cnblogs.com/mengqin/p/5460017.html