Js面向对象之观察者模式

//模拟一个目标可能拥有的一些列依赖
function ObserverList() {
this.observerList = [];
};

//添加一个观察者
ObserverList.prototype.Add = function (obj) {
return this.observerList.push(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();
}
};

//扩展对象
function extend(obj, extension) {
console.log(obj);
for (var k in obj) {
console.log(k);
extension[k] = obj[k]
}
};

//模拟一个目标对象,并模拟实现在观察者列表上添加、删除和通知观察者的能力
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.RemoveAllObserver = function () {
this.observers = [];
}

//模拟实现通知功能
Subject.prototype.Notify = function (context) {
var observerCount = this.observers.Count();
for (var i = 0; i < observerCount; i++) {
this.observers.Get(i).Update(context);
}
};
//模拟创建一个观察者
function Observer() {
this.Update = function () {
};
}

var controlCheckbox = document.getElementById("mainCheckBox");
var removerObserver = document.getElementById("removerAllObserver");
var addBtn = document.getElementById("addNewObserver");
var container = document.getElementById("observerContainer");
extend(new Subject(), controlCheckbox);

controlCheckbox["onclick"] = Function("controlCheckbox.Notify(controlCheckbox.checked)");

addBtn["onclick"] = AddNewObserver;
function AddNewObserver() {
var check = document.createElement("input");
check.type = "checkbox";
extend(new Observer(), check);
check.Update = function (value) {
this.checked = value;
};
controlCheckbox.AddObserver(check);
container.appendChild(check);
}

时间: 2024-12-24 06:23:07

Js面向对象之观察者模式的相关文章

js面向对象的系列

在面向对象语言中如java,C#如何定义一个对象,通常是定义一个类,然后在类中定义属性,然后通过new 关键字来实例化这个类,我们知道面向对象有三个特点,继承.多态和封装.那么问题来了,在javaScript中如何定义一个类?在javaScript中如何定义类的属性?如何继承?带着这些问题开始我们的js面向对象之旅吧. 在js中如何定义类? js中是没有类的概念的,但是我们通常会用一个函数定义成一个类.funtion class1(){ //类的成员定义 } 这里class1既是一个函数也是一个

简单粗暴地理解js原型链--js面向对象编程

简单粗暴地理解js原型链--js面向对象编程 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好. 不要纠结于那一堆术语了,那除了让你脑筋拧成麻花,真的不能帮你什么.简单粗暴点看原型链吧,想点与代码无关的事,比如人.妖以及人妖. 1)人是人他妈生的,妖是妖他妈生的.人和妖都是对象实例,而人他妈和妖他妈就是原型.原型也是对象,叫原型对象. 2)人他妈和人他爸啪啪啪能生出一堆人宝宝.妖他妈和妖他爸啪啪啪能生出一堆妖宝宝,啪啪啪就是构造函数,俗

js面向对象程序设置——创建对象

<script type="text/javascript">            //工厂方式        //1.原始方式        /* var objCar=new Object();        objCar.name="劳斯莱斯";        objCar.color="blue";        objCar.showColor = function() {          alert(this.colo

js面向对象编程:如何实现方法重载

js中如何实现方法重载?这涉及到三个问题 1同名函数的调用问题 2函数中特殊的参数arguments 3如何利用arguments实现方法重载 1同名函数的调用问题 都知道在js中如果存在多个名称相同的函数,则调用实际每次都只使用最后一个,js其实是没有重载的,也就是说,如果定义了多个同名的函数,单参数不一样,在调用时,js不管参数个数,只管前后顺序 例如: function test1(arg1) { alert("参数1:"+arg1); } function test1(arg1

js面向对象编程:如何定义常量?

js中有一个关键字const,但目前的浏览器似乎还不支持,如果一定要定义一些常量,其实可以使用闭包,匿名函数实现常量的定义. 例如: var Class = (function() { var UPPER_BOUND = 100;//定义了常量 var Test={}; // 定义了一个静态方法 获取常量的方法 Test.getUPPER_BOUND=function() { return UPPER_BOUND; } return Test; })(); 用法: var k=Class.get

JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对象之间的赋值,for...in语句,delete使用,成员方法,json对象的使用,prototype的使用,原型继承与原型链 JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法 1.Object类 在JS中,Object是所有类的基

js面向对象深入理解

js面向对象深入理解 ECMAScript 有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标志,那就是类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,ECMAScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 一.创建对象 创建一个对象,然后给这个对象新建属性和方法. var box = new Object(); //创建一个Object 对象 box.name = 'Lee'; //创建一个name 属性并赋值 b

js面向对象编程

1.js面向对象之对象 1.1js代码 <script> function hello(){ alert("hi!"); } //使用prototype属性为类添加属性和方法 hello.prototype={ name:"lihua", say:function(){ alert(this.name); } } //测试 function test(){ var people=new hello(); people.say(); alert(peopl

js面向对象编程:两个小括号的使用

在查看很多jQuery的过程中,经常遇到两个小括号的情况. 例如: (function() { alert("测试1"); })(); (function() { alert("测试3"); }()); 其实这段代码,就是定义了一个匿名函数,并且进行了调用, 相当于如下几行代码: (function ListCommon2() { alert("测试1"); })(); (function ListCommon3() { alert("