Javascript设计模式:观察者模式
2010-09-14 13:10:55 来源：WEB开发网一直以来都想把在实际开发中的一些经验系统地整理一下，共享出来给一些有志于深入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>
Tags：Javascript 设计模式 观察者
编辑录入：爽爽 [复制链接] [打 印]
中查找“Javascript设计模式:观察者模式”更多相关内容
中查找“Javascript设计模式:观察者模式”更多相关内容更多精彩
赞助商链接
