Javascript设计模式:观察者模式

核心提示： 上面都是最简单的面向过程的方法，这里有两点需要告诉大家的是：1.我们完全可以不再HTML里面直接写然后一个对象的时间方法(比如：<a onclick="func();"></a>),这样是完全没有必要的，Javascript设计模式:观察者模式(

上面都是最简单的面向过程的方法，这里有两点需要告诉大家的是：

1.我们完全可以不再HTML里面直接写然后一个对象的时间方法(比如：<a onclick="func();"></a>),这样是完全没有必要的，因为我们可以使用动态方式绑定这些方法到对象上面。

2.在C/S开发中，每个程序总是要是有一个入口的，就是程序最初的触发方式，而所有的程序都是从这个地方开始，在代码的可读性上来说，这样做可以方便维护的时候快速找到程序入口，所以基本我是不会直接在JS里面去执行方法，而是使用window.onload事件来开始程序。当然更高级的技巧是使用DOM load方式，这样就可以避免大的图片载入前，你的JS什么都不能做的缺陷，具体的方式我会抽时间详细讲解B/S开发的入口设计。

然后我们就要开始修改这些JS代码，最迟的修改肯定是把相同的方法给抽象出来，我们发现每个对象的innerHTML复制方式是一样的，那么我们就抽象这个方法出来：

程序代码


/**
* 改变内容
* @param {Node} elem 节点对象
* @param {String} value 值
*/
function ChangeContent(elem, value){
　　elem.innerHTML = elem.id + ": "+ value;
}

这个时候的onload方法就变为：

程序代码

/**
* Window onload function
*/
window.onload = function(){
　　var formObj = $("form1");
　　formObj["changes"].onclick = function(){
　　　　ChangeContent($("Box_A"),formObj["fillbox"].value);
　　　　ChangeContent($("Box_B"),formObj["fillbox"].value);
　　　　ChangeContent($("Box_C"),formObj["fillbox"].value);
　　}
}