<!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. No goals have been specified for this build

    在pom.xml文件中build后面加上<defaultGoal>compile</defaultGoal>

  2. redis+Keepalived主从热备秒级切换

    一 简介 安装使用centos 5.10 Master 192.168.235.135 Slave 192.168.235.152 Vip 192.168.235.200 编译环境 yum -y in ...

  3. parse date receiving from mvc jsonresult

    if we received data like this: ,"Date":"\/Date(1410969600000)\/", we can parse i ...

  4. Web.config自定义节点configSections

    1.为什么需要自定义节点 为了增加应用程序的可移植性,通常网站需要配置一些自定义的节点,例如:文件上传的路径等,再深入的应用,可以定义工厂方法需要创建的类. 2.configSections使用方法 ...

  5. 100722B

    在stack里套set,然后每次根据他的操作,在set里操作,把括号hash,插入,输出set的size-1 #include<iostream> #include<set> ...

  6. sql-insert一条语句执行多条数据插入

    有三种方法: .InSert Into <表名>(列名) Select <列名> From <源表名> 如: INSERT INTO TongXunLu (姓名,地 ...

  7. Activity的四种launchMode

    来源:http://blog.csdn.net/liuhe688/article/details/6754323/ 我们今天要讲的是Activity的四种launchMode. launchMode在 ...

  8. 【POJ 3062】Party（2-SAT、tarjan）

    2-SAT的入门题. a,a',b,b'分别表示两对夫妇,如果a,b有矛盾,那么a要来,就只能来b',b要来,就只能来a'.于是建了两条边(a,b'),(b,a'). 用tarjan强连通分量缩点染色 ...

  9. bootstrap的基本模板

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  10. ——YC，你学到了吗？——学到了学到了

    又是周末了,想着开始我的每周一切(每周做一次从切图到静态网页布局的练习)任务吧,无意间看了看别人的页面,发现--我去,这个动画挺有意思的啊,怎么实现的?然后翻代码+搜索,啊,原来是插件啊~给我的也用上 ...