<!DOCTYPE html>
<html>
<head>
<meta charset=utf8>
<title></title>
<style type="text/css">
div{
width: 300px;
height: 200px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<select>
<option value="male">男生风格</option>
<option value="female">女生风格</option>
</select>
<div id="content">我是内容</div>
<div id="ad">我是内容</div>
<div 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改变的时候发送
sel.onchange=sel.notify=function(){
for(var key in this.observers)
{
this.observers[key].update(this);
}
}
//客户端
var content=document.getElementById('content');
var ad=document.getElementById('ad');
// 观察者的update方法
content.update=function(observers){
if(observers.value=='male'){
this.style.backgroundColor='gray';
}else if(observers.value=='female')
{
this.style.backgroundColor='pink';
}
}
ad.update=function(observers)
{
if(observers.value=='male')
{
this.innerHTML='计算机';
}else if(observers.value=='female')
{
this.innerHTML='美容';
}
}
sel.attach('content',content);
sel.attach('ad',ad);
</script>
</html>
js观察者模式
最新推荐文章于 2024-08-11 21:51:38 发布