观察者模式存在观察者和被观察者
被观察者的状态发生改变，通知观察者调用观察者的update方法，观察者的update方法对被观察者的状态进行检测，做出相应的操作
被观察者存在接口attach,detach,notify
观察者模式作用：将操作转化为通知
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>观察者模式</title>
<style type="text/css">
div{
border:1px solid green;
color:gray;
}
</style>
</head>
<body>
<select name="guancha">
<option value="jingdian">经典模式</option>
<option value="huali">华丽模式</option>
</select>
<div id="content">
现在是默认内容.
</div>
<input id="btn1" type="button" value="别监控默认区域了">
<input id="btn2" type="button" value="继续默认区域了">
<script type="text/javascript">
//被观察者：select
//观察者：content
var osel=document.getElementsByTagName("select")[0];
var ocon=document.getElementById("content");
//将所有的观察者都注册在被观察者身上
osel.observers={};
//注册方法
osel.attach=function(key,observer){
this.observers[key]=observer;
}
//注销方法
osel.detach=function (key){
delete this.observers[key];
}
//通知所有观察者，调用他们的update方法//在select改变时通知所有被观察者
osel.onchange=osel.notify=function(){
for(var key in this.observers){
this.observers[key].update(this);
}
}
//定义ocon的update方法
ocon.update=function(observer){
if(observer.value=="jingdian"){
this.style.background="#FF9E4A";
}else if(observer.value=="huali"){
this.style.background="red";
}
}
//向被观察者当中注册
osel.attach("ocon",ocon);
var obtn1=document.getElementById("btn1");
var obtn2=document.getElementById("btn2");
obtn1.onclick=function(){
osel.detach("ocon");
}
obtn2.onclick=function(){
osel.attach("ocon",ocon);
}
</script>
</body>
</html>