<!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. Collection中Set集合在应用中常见的方法和注意点

    Set集合 : 元素无序的,元素不允许重复.      ---->HashSet  : 存值方式使用哈希表来存值的.                   原理 :  如果HashSet中存放对象 ...

  2. 开发错误记录5-Failed to sync Gradle project ‘HideTitleDemo’

    今天用Android Studio2.0创建的项目,到Android Studio1.5打开,直接报错: 意思就是内存空间不够,要在gradle.properties 文件中进行内存设置,因为是从高版 ...

  3. 【BZOJ 4569】【SCOI 2016】萌萌哒

    http://www.lydsy.com/JudgeOnline/problem.php?id=4569 用ST表表示所有区间,根据ST表中表示的区间长度种一棵nlogn的树,类似线段树,每个节点的左 ...

  4. liunx下tomcat启动 Cannot find ./catalina.sh

    执行启动tomcat命令./startup.sh 提示 Cannot find ./catalina.sh The file is absent or does not have execute pe ...

  5. mysql-拼接字段concat，concat_ws函数

    Mysql的查询结果行字段拼接,可以用下面两个函数实现: 1. concat函数 mysql') from test ; +---------------------+ ') | +--------- ...

  6. js window.open 打开新窗体 参数设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 转JAVA2

    1.List遍历时删除的几种方式比较 1.1.会报错的删除方式: (1)在Iterator遍历时使用list删除 Iterator<String> it = list.iterator() ...

  8. mybatis下报错：元素类型为 "mapper" 的内容必须匹配 "(cache-ref|cache|resultMap*|parameterMap

    今天使用别人的代码报错,但是有时又不报错原来是配置文件的顺序要遵守 注意 "必须匹配" 四个字, 其意味着顺序很重要, 必须要一致, 试试将 resultMap 中各元素的顺序修改 ...

  9. Android studio：Groovy 与 Gradle 基础【三】

    转载:http://www.apkbus.com/forum.php?mod=viewthread&tid=255064&extra=page%3D2%26filter%3Dautho ...

  10. [bzoj3694]最短路

    Description 给出一个$n$个点$m$条边的无向图,$n$个点的编号从$1-n$,定义源点为$1$. 定义最短路树如下:从源点$1$经过边集$T$到任意一点$i$有且仅有一条路径,且这条路径 ...