<!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. Oracle sql develpoer

    Oracle SQL Developer是针对Oracle数据库的交互式开发环境(IDE)     Oracle SQL Developer简化了Oracle数据库的开发和管理. SQL Develo ...

  2. Win7宽带一键创建

    简化创建宽带连接步骤,为简便而生. 不断分享,不断进步. 免费下载:                  http://yunpan.cn/cmZesi2jpJk9E  访问密码 9444

  3. 54-locate 简明笔记

    在mlocate数据库中搜索条目 locate [option] pattern 参数 pattern 是locate需要搜索的文件名或者正则表达式 选项 -i              忽略大小写 ...

  4. [cross domain] four approachs to cross domain in javascript

    four approachs can cross domain in javascript 1.jsonp 2.document.domain(only in frame and they have ...

  5. js打字机效果实现

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>打 ...

  6. html5 css3中的一些笔记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title> ...

  7. Dubbo系列(2)_RPC介绍

    一.本文目的         主要介绍RPC的一些概念和应用. 二.为什么要介绍RPC    DUBBO是一个分布式服务框架,致力于提供高性能和透明化的RPC远程服务调用方案,是阿里巴巴SOA服务化治 ...

  8. CodeForces 450B 矩阵

    A - Jzzhu and Sequences Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...

  9. 51nod 1007 正整数分组

    将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 2 4分为1组,3 5分为1组,两组和相差1,是所有方案中相差最少的.   Input 第1行:一个数N,N为正整数的数量 ...

  10. awk 筛选特定长度的序列

    awk '/^>/ {printf("\n%s\t",$0);next;} {printf("%s",$0);} END {printf("\n ...