<!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. LINUX下PHP开启短标签short_open_tag支持

    LINUX下PHP开启短标签short_open_tag支持 以CENTOS为例: 找到php.ini #find / -name php.ini #/etc/php.ini 编辑php.ini #v ...

  2. linux 配置java 环境

    下载jdk 并解压到 /usr/local/java/ 目录下 地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-down ...

  3. ASP.NET MVC 5 入门教程 (4) View和ViewBag

    文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get-started-view.html 上一节:ASP.NET MVC 5 入门教 ...

  4. 长串英文数字强制折行解决办法css

    overflow: hidden; white-space: normal; word-warp: break-word; word-break: break-all;/*Only work in I ...

  5. 区间DP lightoj 1031

    在此游戏中任意时刻的状态都是原始序列的一段子序列故: 定义d(i, j) : 表示原来序列的第i ~ j个元素组成的子序列,在双方都采取最优策略的情况下,先手得分的最大值. 状态转移时,需要枚举从左边 ...

  6. mysql命令-use

    use命令可以让我们来使用数据库. use命令格式: use <数据库名>; 例如,如果xhkdb数据库存在,尝试存取它: mysql> use xhkdb; 屏幕提示:Databa ...

  7. js-设置焦点

    function CheckForm() { if(document.form1.trainingName.value==""){ alert("培训班名称不能为空!&q ...

  8. 去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景

    去掉chrome(谷歌)浏览器默认的input.textarea的边框(border)和背景(background) 及chrome下不可更改textarea大小 1.使用Chrome的都知道,当鼠标 ...

  9. BIEE11G配置Oracle数据源

    注:数据库发生变化只需要修改视图层 两种方式: (1)       在BIEE自带的Oracle客户端目录下的tnsname.ora文件中配置 把E:\app\Administrator\produc ...

  10. 1.值得推荐的C/C++框架和库 (转)

    值得学习的C语言开源项目 - 1. Webbench Webbench是一个在linux下使用的非常简单的网站压测工具.它使用fork()模拟多个客户端同时访问我们设定的URL,测试网站在压力下工作的 ...