首页 / 设计模式 / PHP设计模式之JS实现观察者模式c观察者模式android观察者模式ios观察者模

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了PHP设计模式之JS实现观察者模式c观察者模式android观察者模式ios观察者模，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2610字，纯文字阅读大概需要4分钟。

内容图文

观察者模式 Observer
PHP设计模式之JS实现观察者模式c观察者模式android观察者模式ios观察者模 - 文章图片

实现目标：变换select框来变动内容区和广告区
一般思路
1:判断选中的值
2:顺序下来,根据值,修改内容区域
3:再修改广告区域.

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

那么问题有哪些：
1:让你选择时引起3个区域的变化,是否要修改if/elseif部分
2:如果选择女性样式,但不要变粉,现在流行变紫色,是否又要修改if elseif部分?
问题在于: 控制逻辑与被操作对象耦合严重.

这是就需要观察者模式
js实现观察者模式

我们让div对象观察select的变化,select变化,就会通知到这两个对象。并引起这2个对象的变化,实现观察者模式。
PHP设计模式之JS实现观察者模式c观察者模式android观察者模式ios观察者模 - 文章图片

下边是解决效果
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>

总结：

  1. 当有另一个观察对象加入的时候直接添加一个就好
  2. 降低了主题对象和观察者对象的耦合度
  3. 好的设计模式不会直接进入你的代码中，而是进入你的大脑中
').addClass('pre-numbering').hide(); $(this).addClass('has-numbering').parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($('
  • ').text(i)); }; $numbering.fadeIn(1700); }); });

    以上就介绍了PHP设计模式之JS实现观察者模式，包括了观察者模式,设计模式方面的内容，希望对PHP教程有兴趣的朋友有所帮助。

    内容总结

    以上是互联网集市为您收集整理的PHP设计模式之JS实现观察者模式c观察者模式android观察者模式ios观察者模全部内容，希望文章能够帮你解决PHP设计模式之JS实现观察者模式c观察者模式android观察者模式ios观察者模所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

    内容备注

    版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

    内容手机端

    扫描二维码推送至手机访问。

    本文链接：https://qyyshop.com/info/158293.html

    来源：【匿名】