Javascript设计模式:观察者模式

概述

在软件构建过程中，我们需要为某些对象建立一种“通知依赖关系” ——一个对象（目标对象）的状态发生改变，所有的依赖对象（观察者对象）都将得到通知。如果这样的依赖关系过于紧密，将使软件不能很好地抵御变化。使用面向对象技术，可以将这种依赖关系弱化，并形成一种稳定的依赖关系。从而实现软件体系结构的松耦合。

意图

定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时, 所有依赖于它的对象都得到通知并被自动更新。[GOF 《设计模式》]

结构图

代码实现如下：

程序代码

/**
* 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);
　　　　}
　　};
}