<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向对象之观察者模式</title>
</head>
<style type="text/css">
.word{
width:500px;
height: 150px;
border:1px solid #333;
margin-top:20px;
}
</style>
<body>
<h1>用观察者模式来切换</h1>
<select name="" id="">
<option value="default">默认风格</option>
<option value="male">男士风格</option>
<option value="female">女士风格</option>
</select>
<input type="button" name="" value="观察动作栏" onclick="t1();">
<input type="button" name="" value="不观察动作栏" onclick="t2();">
<div class="word" id="content">内容</div>
<div class="word" id="ad">广告</div>
<div class="word" id="study">动作</div>
</body>
<script type="text/javascript">
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);
}
}
//客户端
var content= document.getElementById('content');
content.update=function(observee){
if(observee.value=='male'){
this.style.backgroundColor='gray';
}else if(observee.value=='female'){
this.style.backgroundColor='pink';
}
}
var ad= document.getElementById('ad');
ad.update=function(observee){
if(observee.value=='male'){
this.innerHTML='汽车';
}else if(observee.value=='female'){
this.innerHTML='化妆品';
}
}
//让content观察select的变化
sel.attach('content',content);
sel.attach('ad',ad);
//耦合度低
var study=document.getElementById('study');
study.update=function(observee){
if(observee.value=='male'){
this.innerHTML='学习计算机';
}else if(observee.value=='female'){
this.innerHTML='学习美容';
}
}
sel.attach('study',study);
function t1(){
sel.attach('study',study);
}
function t2(){
sel.detach('study');
}
</script>
</html>
