您的位置：首页 > 编程语言 > PHP开发

PHP设计模式之JS实现观察者模式

2016-04-06 22:42 846 查看

观察者模式 Observer

实现目标：变换select框来变动内容区和广告区

一般思路

1:判断选中的值

2:顺序下来,根据值,修改内容区域

3:再修改广告区域.

if(v == '男') {
内容区背景变灰
广告区内容变成男人话题
} else if(v == '女'){
内容区背景变粉
广告区内容变成女人话题
}

那么问题有哪些：

1:让你选择时引起3个区域的变化,是否要修改if/elseif部分

2:如果选择女性样式,但不要变粉,现在流行变紫色,是否又要修改if elseif部分?

问题在于: 控制逻辑与被操作对象耦合严重.

这是就需要观察者模式

js实现观察者模式

我们让div对象观察select的变化,select变化,就会通知到这两个对象。并引起这2个对象的变化,实现观察者模式。

下边是解决效果

select对象负责attach,detach,notifyObservers,与具体的对象变化解耦。

1.index.html

<body>
<select name='' id="">
<option value='male'>男士风格</option>
<option value='female'>女士风格</option>
</select>
<input type='button' value="观察学习区" onclick="t1();">
<input type='button' value="不再观察学习区" onclick="t2();">
<div id='content'>我是内容</div>
<div id='ad'>我是广告</div>
<div id='study'>我是学习区</div>
</body>

2.index.html中js部分

<script>
//获取对象
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.onchange = sel.notify = function(){
for(var key in this.observers){
this.observers[key].update(this);//去调用对象的update方法
}
}

//客户端
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='减肥';
}
}
//确定谁来监视变化
sel.attach('content',content);
sel.attach('ad',ad);

study = document.getElementById('study');
sel.attach('study',study);//默认为观察学习区
study.update = function(observer){
if(observer.value=='male'){
this.innerHTML='学习计算机';
}else if(observer.value=='female'){
this.innerHTML='学习减肥';
}
}
//增加学习区的观察
function t1(){
sel.attach('study',study);
}
//取消学习区的观察
function t2(){
sel.detach('study');
}
</script>

总结：

当有另一个观察对象加入的时候直接添加一个就好

降低了主题对象和观察者对象的耦合度

好的设计模式不会直接进入你的代码中，而是进入你的大脑中

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： php 设计模式

相关文章推荐

新的分享

章节导航