WEB开发网
开发学院网页设计JavaScript Javascript设计模式:观察者模式 阅读

Javascript设计模式:观察者模式

 2010-09-14 13:10:55 来源:WEB开发网   
核心提示: 关键在于Observer这个观察者对象上,大家都看到他有3个方法:注册,Javascript设计模式:观察者模式(5),反注册,通知,只需要执行一个通知方法,那么所有有关的对象都会自动调用不同的方法,而每个对象在onload事件中会进行注册,然后当我们点击按钮

关键在于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>

上一页  1 2 3 4 5 6  下一页

Tags:Javascript 设计模式 观察者

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接