<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>用观察者模式来切换</h1>
<select>
<option value="male">男士风格</option>
<option value="female">女士风格</option>
</select>
<div id="content" style="width:100px; height: 100px; border:1px solid #000;"></div>
<script type="text/javascript">
var sel=document.getElementsByTagName('select')[0];
sel.observers={};
sel.attach=function(key,obj){ //
sel.observers[key]=obj;
}
sel.detach=function(key){
delete observers[key];
}
sel.οnchange=sel.notify=function(){
console.log(this.observers);
for(var key in this.observers){
this.observers[key].update(this);
}
}
//客户端
var content=document.getElementById("content");
content.update=function(obs){
if(obs.value=='male'){
this.style.backgroundColor='gray';
}else if(obs.value='female'){
this.style.backgroundColor='red';
}
}
//让content 观察select 变化
sel.attach('content',content);
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>用观察者模式来切换</h1>
<select>
<option value="male">男士风格</option>
<option value="female">女士风格</option>
</select>
<div id="content" style="width:100px; height: 100px; border:1px solid #000;"></div>
<script type="text/javascript">
var sel=document.getElementsByTagName('select')[0];
sel.observers={};
sel.attach=function(key,obj){ //
sel.observers[key]=obj;
}
sel.detach=function(key){
delete observers[key];
}
sel.οnchange=sel.notify=function(){
console.log(this.observers);
for(var key in this.observers){
this.observers[key].update(this);
}
}
//客户端
var content=document.getElementById("content");
content.update=function(obs){
if(obs.value=='male'){
this.style.backgroundColor='gray';
}else if(obs.value='female'){
this.style.backgroundColor='red';
}
}
//让content 观察select 变化
sel.attach('content',content);
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
