Javascript设计模式:观察者模式

当需求告诉我们，每个对象的内容需要显示不同的时候，我们就要把抽象方法按不同的需求重写一次，这个时候JS显示如下：

程序代码


/**
* Get Element by ID
* @param {Object} id
* @return Element
*/
function $(id){
　　return document.getElementById(id);
}
/**
* Window onload function
*/
window.onload = function(){
　　var formObj = $("form1");
　　formObj["changes"].onclick = function(){
　　　　ChangeContentA($("Box_A"),formObj["fillbox"].value);
　　　　ChangeContentB($("Box_B"),formObj["fillbox"].value);
　　　　ChangeContentC($("Box_C"),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;
}

大家可以发现我们在点击按钮的时候每次都需要去知道这3个对象是否存在，同时按照不同的对象调用不同的方法，因为实例非常简单，可以看到这些对象都在一起，而在实际开发中，这种可能性就很小了，而且很有可能这些对象都是动态创建的，那么我们不可能事先就知道这个对象是否存在，而每次都要去判断对象是否存在就觉得很麻烦，那么观察者模式在这里就可以派上用场了，首先我们先了解一下这个模式的说明：