<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>面向对象之观察者模式</title>

</head>

<style type="text/css">

       .word{

             width:500px;

             height: 150px;

             border:1px solid #333;

             margin-top:20px;

       }

</style>

<body>

       <h1>用观察者模式来切换</h1>

       <select name=""  id="">

           <option value="default">默认风格</option>

           <option value="male">男士风格</option>

           <option value="female">女士风格</option>

       </select>

       <input type="button" name="" value="观察动作栏" onclick="t1();">

       <input type="button" name="" value="不观察动作栏" onclick="t2();">

          <div class="word" id="content">内容</div>

          <div class="word" id="ad">广告</div>

          <div class="word" id="study">动作</div>

</body>

<script type="text/javascript">

        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);

            }

        }

        //客户端

       var content= document.getElementById('content');

         content.update=function(observee){

              if(observee.value=='male'){

                  this.style.backgroundColor='gray';

              }else if(observee.value=='female'){

                  this.style.backgroundColor='pink';

              }

        }

        var ad= document.getElementById('ad');

         ad.update=function(observee){

              if(observee.value=='male'){

                  this.innerHTML='汽车';

              }else if(observee.value=='female'){

                  this.innerHTML='化妆品';

              }

        }

        //让content观察select的变化

        sel.attach('content',content);

        sel.attach('ad',ad);

        //耦合度低

        var study=document.getElementById('study');

        study.update=function(observee){

            if(observee.value=='male'){

                  this.innerHTML='学习计算机';

            }else if(observee.value=='female'){

                 this.innerHTML='学习美容';

            }

        }

        sel.attach('study',study);

        function t1(){

            sel.attach('study',study);

        }

        function t2(){

           sel.detach('study');

        }

</script>

</html>

js实现观察者模式的更多相关文章

  1. js设计模式-观察者模式

    定义: 观察者模式又叫发布订阅模式,它定义了对象间的一种一对多的依赖关系.观察者模式让两个对象松耦合地联系在一起,虽然不太清楚彼此的细节,但这不影响他们之间的互相通信. 思路 定义一个对象,在对象中实 ...

  2. 谈谈JS的观察者模式（自定义事件）

    呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象 ...

  3. JS设计模式——观察者模式（通俗易懂）

    Observer模式的概念 Observer模式是行为模式之一,它的作用是当一个对象的状态发生变化时,能够自动通知其他关联对象,自动刷新对象状态. Observer模式提供给关联对象一种同步通信的手段 ...

  4. js 设计模式——观察者模式

    观察者模式 定义 观察者模式(又被称为发布-订阅(Publish/Subscribe)模式,属于行为型模式的一种,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状 ...

  5. js 之观察者模式

    观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自 ...

  6. 我理解的 js 的观察者模式 Observable

    我第一次看 四人帮 写的<设计模式>时一头雾水,现在也是,或许其是针对专业的程序员学习使用的. 通过对Ext / Backbone 源码的学习,可总结如下: 模式 - 就是对解决某一类特定 ...

  7. js的观察者模式

    观察者模式(发布-订阅模式):它定义对象间一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知.由主体和观察者组成,主体负责发布事件,同时观察者通过订阅这些事件来观察该主体 ...

  8. js之观察者模式

    观察者模式: 大体上是, 1.松耦合的代码: 2.一对多的关系: 3.主体状态变化时,所有依赖被通知: 4.主体和观察者互不知晓. 基本上,满足上面四点的,就可以算是观察者模式了.来看一个demo, ...

  9. js实现观察者模式风格替换

    如下图,我们看到两种风格:在选择男士时,页面颜色为黑色:在选择女士时,页面颜色为粉红色. 主要可以分为两类: 下拉框 ---> 被观察者 div ---> 观察者 面向过程实现风格替换: ...

随机推荐

  1. 【CSS3】 线性渐变

    参考地址:http://www.w3cplus.com/css3/new-css3-linear-gradient.html background-image: linear-gradient(to ...

  2. 给菜单加个优雅的unselect事件

    先上图,说场景 假设默认选中的是item1,我现在选中item3了,有时候需要对item1做一些别的处理.常见的做法是,切换选中状态前找到当前选中(item1),或者每次选中后选中的项记录在中间变量. ...

  3. 关于web前端的学习路线

    第一阶段: HTML+CSS:HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  4. [转]SSM框架——详细整合教程（Spring+SpringMVC+MyBatis）

    原文地址:http://blog.csdn.net/zhshulin/article/details/37956105#comments 使用SSM(Spring.SpringMVC和Mybatis) ...

  5. swift 学习（三）（面向对象基础）

    面向对象的基本特征包括:封装,继承,多态 在swift中,类,结构,枚举都具有面向对象特性 但结构和枚举的实例不称为对象,因为结构和枚举不是彻底的面向对象类型,比如他们不能继承. 结构体 struct ...

  6. 解决npm install缓慢

    http://npm.taobao.org/ 使用淘宝提供的cnpm替代npm

  7. win10 google浏览器设置

    在浏览器地址栏中输入命令: chrome://flags/ 撤销:chrome设置了禁止此页弹出提示框 chrome://settings/contentExceptions#popups

  8. Servlet、Filter和Listener

    Java Servlet是与平台无关的服务器端组件,运行于Servlet容器中(如Tomcat),Servlet容器负责Servlet和客户端的通信以及调用Servlet的方法,Servlet和客户端 ...

  9. 扩展easyUI tab控件，添加加载遮罩效果

    项目里要用HighChart显示图表,如果返回的数量量太多,生成图表是一个很耗时的过程.tab控件又没有显示遮罩的设置(至少本菜是没有找到), Google了一下,根据另一个兄台写的方法,拿来改造了一 ...

  10. 如何提高redmine的访问速度

    刚开始使用redmine时 方法一: 可以采用nginx+passenger的方式来驱动redmine提升访问速度,但是在新建问题或更新问题时变得非常慢,这是因为在新建问题和更新问题时会发送邮件,而且 ...