您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记
设计模式-观察者模式做风格切换
发布时间：2017-11-30 09:21:14编辑：雪饮阅读（）
一个使用观察者模式做的风格切换效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.colContentHobby{
width:100%;
height:20px;
}
</style>
</head>
<body>
<center>
<h1>用观察者模式来实现的切换效果</h1>
<select name="" id="">
<option value="male">男士风格</option>
<option value="female">女士风格</option>
</select>
<input type="button" value="观察爱好" onclick="t1()"; />
<input type="button" value="不观察爱好" onclick="t2()"; />
<p>肤色:</p>
<div id="col" class='colContentHobby'> </div>
<p>简介:</p>
<div id="content" class='colContentHobby'> </div>
<p>爱好:</p>
<div id="hobby" class='colContentHobby'> </div>
</center>
<script>
//获取一个被观察者对象
var sel=document.getElementsByTagName("select")[0];
//给被观察者初始化一个观察者容器，若被观察者出现变化遍历该容器对每个观察者进行通知
sel.observers={};
//给被观察者一个添加观察者进观察者容器的方法
sel.attach=function(key,obj){
this.observers[key]=obj;
}
//给被观察者一个从观察者容器中删除某个观察者的方法
sel.detach=function(key){
delete this.observers[key];
}
//给被观察者一个遍历通知每个观察者的方法
//监听被观察者值的变化事件，当被观察者的值发生变化时就遍历通知每个观察者
sel.onchange=sel.notify=function(){
for(var key in this.observers){
this.observers[key].update(this);
}
}
//观察者"肤色"的UI更新方法
col.update=function(observee){
if(observee.value=='male'){
this.style.backgroundColor='gray';
}
else if(observee.value=='female'){
this.style.backgroundColor='pink';
}
}
//将观察者"肤色"添加到被观察者的观察者容器中
sel.attach('col',col);
//观察者"简介"的UI更新方法
content.update=function(observee){
if(observee.value=='male'){
this.innerHTML='汽车';
}
else if(observee.value=='female'){
this.innerHTML='减肥';
}
}
//将观察者"简介"添加到被观察者的观察者容器中
sel.attach('content',content);
//观察者"爱好"的UI更新方法
hobby.update=function(observee){
if(observee.value=='male'){
this.innerHTML='学习计算机';
}
else if(observee.value=='female'){
this.innerHTML='学习美容';
}
}
//添加观察者“爱好”到被观察者的观察者容器中
function t1(){
sel.attach('hobby',hobby);
}
//从被观察者的观察者容器中删除“爱好”这个观察者
function t2(){
sel.detach('hobby');
}
</script>
</body>
</html>
分析：观察者模式做的风格切换虽然代码量比较大，但是比之前直接不用模式而用纯面向过程做的风格切换效果来说，观察者模式符合“对修改关闭，对扩展开放”原则。
当需要增加观察者时候，只需要增加一个新的观察者更新ui的方法，然后再将该观察者添加到被观察者的观察者容器中即可。
关键字词：设计模式,观察者