Javascript设计模式:观察者模式
2010-09-14 13:10:55 来源：WEB开发网关键在于Observer这个观察者对象上，大家都看到他有3个方法：注册，反注册，通知。
而每个对象在onload事件中会进行注册，然后当我们点击按钮，或者直接在输入框输入内容时，只需要执行一个通知方法，那么所有有关的对象都会自动调用不同的方法，至于好处大家都闭上眼睛YY一下。
全部代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Observer Pattern - sample 04</title>
<script type="text/javascript">
//<![CDATA[
/**
* Get Element by ID
* @param {Object} id
* @return Element
*/
function $(id){
return document.getElementById(id);
}
/**
* Window onload function
*/
window.onload = function(){
/**
* 内容观察者
*/
var ContentObserver = new Observer();//申明一个观察者
ContentObserver.register("Item.Box_A", $("Box_A"), ChangeContentA);
//ContentObserver.unRegister("Item.Box_A"); //卸载Box A
ContentObserver.register("Item.Box_B", $("Box_B"), ChangeContentB);
ContentObserver.register("Item.Box_C", $("Box_C"), ChangeContentC);
var formObj = $("form1");
formObj["changes"].onclick = formObj["fillbox"].onkeyup = function(){
ContentObserver.notify(formObj["fillbox"].value);
}
}
/**
*
* @param {Object} elem
* @param {Object} value
*/
function ChangeContentA(elem, value){
elem.innerHTML = elem.id + ": "+ value;
}
/**
*
* @param {Object} elem
* @param {Object} value
*/
function ChangeContentB(elem, value){
elem.innerHTML = elem.id + ": "+ value + "[我是Box B]";
}
/**
*
* @param {Object} elem
* @param {Object} value
*/
function ChangeContentC(elem, value){
elem.innerHTML = value;
}
/**
* 刪除數組子对象
* @param {String} attrName 属性名称
* @param {String} value 属性值
* @return Object
*/
Array.prototype.RemoveObject = function(attrName, value) {
for (var i = 0, j = this.length; i < j; i++) {
if (this[i][attrName] == value) {
return this.splice(i, 1);
}
}
};
/**
* 观察者
*/
function Observer(){
/**
* 注册对象列表
*/
this.groups = [];
/**
* 注册对象
* @param {String} groupName 名称
* @param {Node} elem 节点对象
* @param {Function} callback 回调方法
*/
this.register = function(groupName, elem, callback){
this.unRegister(groupName);//防止重复注册
//加入这个对象到对象列表
this.groups.push({ Name: groupName, Provider: elem, Func: callback });
};
/**
* 卸载对象
* @param {Object} groupName 名称
*/
this.unRegister = function(groupName){
this.groups.RemoveObject("Name",groupName);
};
/**
* 通知改变
* @param {Object} attchs 消息对象 [Name:名称 Provider:节点对象 Func:回调方法]
*/
this.notify = function(attchs){
//批量执行注册对象的回调方法
for (var i = 0, j = this.groups.length; i < j; i++) {
this.groups[i].Func(this.groups[i].Provider, attchs);
}
};
}
//]]>
</script>
</head>
<body>
<form id="form1">
<div>
<input type="text" name="fillbox" size="50" />
<input type="button" value="改变内容" name="changes" />
</div>
</form>
<div id="Box_A">Box_A</div>
<div id="Box_B">Box_B</div>
<div id="Box_C">Box_C</div>
</body>
</html>
Tags：Javascript 设计模式 观察者
编辑录入：爽爽 [复制链接] [打 印]
中查找“Javascript设计模式:观察者模式”更多相关内容
中查找“Javascript设计模式:观察者模式”更多相关内容更多精彩
赞助商链接
