1:判断选中的值
2:顺序下来,根据值,修改内容区域
3:再修改广告区域.
if(v == '男') {
内容区背景变灰
广告区内容变成男人话题
} else if(v == '女'){
内容区背景变粉
广告区内容变成女人话题
}
问题在哪儿?
1:让你选择时引起3个区域的变化,
是否要修改if/elseif部分
2:如果选择女性样式,但不要变粉,现在流行变紫色,是否又要修改if elseif部分?
问题在于: 控制逻辑与被操作对象耦合严重.
我们让div对象观察select的变化,select变化,就会通知道这两个对象.
并引起这2个对象的变化,实现观察者模式
2:顺序下来,根据值,修改内容区域
3:再修改广告区域.
if(v == '男') {
内容区背景变灰
广告区内容变成男人话题
} else if(v == '女'){
内容区背景变粉
广告区内容变成女人话题
}
问题在哪儿?
1:让你选择时引起3个区域的变化,
是否要修改if/elseif部分
2:如果选择女性样式,但不要变粉,现在流行变紫色,是否又要修改if elseif部分?
问题在于: 控制逻辑与被操作对象耦合严重.
我们让div对象观察select的变化,select变化,就会通知道这两个对象.
并引起这2个对象的变化,实现观察者模式
<html>
<meta charset="utf-8" />
<style>
div{
margin: 10px;
width: 500px;
height: 200px;
}
#content
{
border: 1px solid red;
}
#ad
{
border: 1px solid blue;
}
#study
{
border: 1px solid blue;
}
</style>
<body>
<h1>用观察者模式来切换</h1>
<select name="" id="">
<option value="male">男士风格</option>
<option value="female">女士风格</option>
</select>
<div id="content">我是内容</div>
<div id="ad">我是广告</div>
<div id="study">学习区</div>
<input type="button" value="观察尾部" οnclick="t1()">
<input type="button" value="别观察尾部" οnclick="t2()">
</body>
</html>
<script type="text/javascript">
var sel = document.getElementsByTagName('select')[0];
sel.observer = {};
sel.attach = function(key, obj) {
this.observer[key] = obj;
}
sel.detach = function(key)
{
delete this.observer[key];
}
sel.onchange = sel.notify = function()
{
for(var key in this.observer)
{
this.observer[key].update(this);
}
}
//客户端
var content = document.getElementById('content');
var ad = document.getElementById('ad');
content.update = function(observer)
{
if(observer.value == 'male')
{
this.style.backgroundColor = 'gray';
}else if(observer.value == 'female')
{
this.style.backgroundColor = 'pink';
}
}
ad.update = function(observer)
{
if(observer.value == 'male')
{
this.innerHTML = '汽车';
}else if(observer.value == 'female')
{
this.innerHTML = '减肥';
}
}
//让content观察select的变化
sel.attach('content', content)
sel.attach('ad', ad);
var study = document.getElementById('study');
study.update = function(observer)
{
if(observer.value == 'male')
{
this.innerHTML = '学习计算机';
}else if(observer.value == 'female')
{
this.innerHTML = '学习美容';
}
}
sel.attach('study', study);
function t1()
{
sel.detach('study', study);
}
function t2()
{
sel.detach('study', study);
}
</script>