Javascript设计模式:观察者模式

Javascript设计模式:观察者模式2010-02-04 cnrui.cn Clear一直以来都想把在实际开发中的一些经验系统地整理一下，共享出来给一些有志于深入B/S开发的朋友，趁着国庆忙里偷闲，先试验性的写一下有关于Javascript开发中的比较有用的东西。

设计模式一直以来都是在面向对象的语言，或比较正规化的开发中才会出现的一门程序设计思想。一直以来众多的前端开发者认为使用OO方式来写JS更像是一个程序开发者，殊不知一旦将这门脚本语言深入进去后，仅仅才是一个开始，设计模式仅能算是对程序设计深入了解的第一步。

为什么要用设计模式我就不多说了，仁者见仁的问题，现在还有一种反设计模式，如果有兴趣的话可以搜索一下相关的资料。

观察者模式在程序设计里面的使用频率是很高的，与简单工厂模式，适配器模式基本相当，那么现在就直接进入主题。

首先我们写一个最基本的HTML页面，包含一些基本的JS代码，目的很简单，当你输入一些字符到表单后，点击按钮，会改变相应的几个HTML对象的内容：

<！ 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 01</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 formObj = $（"form1"）;
formObj["changes"].onclick = function（）{
 $（"Box_A"）.innerHTML = $（"Box_A"）.id + ": "+formObj["fillbox"].value;
  $（"Box_B"）.innerHTML = $（"Box_A"）.id + ": "+formObj ["fillbox"].value;
 $（"Box_C"）.innerHTML = $（"Box_A"）.id + ": "+formObj["fillbox"].value;
}
} 
//]]>
</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.我们完全可以不再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）;
  }
}

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