观察者模式 observer
实现目标：变换select框来变动内容区和广告区
一般思路
1:判断选中的值
2:顺序下来,根据值,修改内容区域
3:再修改广告区域.
if(v == '男') { 内容区背景变灰 广告区内容变成男人话题}elseif(v == '女'){ 内容区背景变粉 广告区内容变成女人话题}
那么问题有哪些：
1:让你选择时引起3个区域的变化,是否要修改if/elseif部分
2:如果选择女性样式,但不要变粉,现在流行变紫色,是否又要修改if elseif部分?
问题在于: 控制逻辑与被操作对象耦合严重.
这是就需要观察者模式
js实现观察者模式
我们让div对象观察select的变化,select变化,就会通知到这两个对象。并引起这2个对象的变化,实现观察者模式。
下边是解决效果
select对象负责attach,detach,notifyobservers,与具体的对象变化解耦。
1.index.html
body>selectname=''id=>optionvalue='male'>男士风格option>optionvalue='female'>女士风格option>select>inputtype='button'value=观察学习区onclick=t1();>inputtype='button'value=不再观察学习区onclick=t2();>divid='content'>我是内容div>divid='ad'>我是广告div>divid='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){deletethis.observers[key]; } //通知 sel.onchange = sel.notify = function(){for(var key inthis.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'; }elseif(observer.value=='female'){ this.style.backgroundcolor='pink'; } } //广告区变化效果 ad.update = function(observer){if(observer.value=='male'){ this.innerhtml='汽车'; }elseif(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='学习计算机'; }elseif(observer.value=='female'){ this.innerhtml='学习减肥'; } } //增加学习区的观察functiont1(){ sel.attach('study',study); } //取消学习区的观察functiont2(){ sel.detach('study'); }script>
总结：
当有另一个观察对象加入的时候直接添加一个就好 降低了主题对象和观察者对象的耦合度好的设计模式不会直接进入你的代码中，而是进入你的大脑中').addclass('pre-numbering').hide(); $(this).addclass('has-numbering').parent().append($numbering); for (i = 1; i ').text(i)); }; $numbering.fadein(1700); }); }); 以上就介绍了php设计模式之js实现观察者模式，包括了观察者模式,设计模式方面的内容，希望对php教程有兴趣的朋友有所帮助。