您的位置：首页 > Web前端 > JavaScript

js观察者模式

2015-04-19 17:59 169 查看

<!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

相关文章推荐

新的分享

章节导航