观察者模式存在观察者和被观察者

被观察者的状态发生改变，通知观察者调用观察者的update方法，观察者的update方法对被观察者的状态进行检测，做出相应的操作

被观察者存在接口attach,detach,notify

观察者模式作用：将操作转化为通知

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>观察者模式</title>

<style type="text/css">

div{

    border:1px solid green;

    color:gray;

}

</style>

</head>

<body>

    <select name="guancha">

        <option value="jingdian">经典模式</option>

        <option value="huali">华丽模式</option>

    </select>

    <div id="content">

        现在是默认内容.

    </div>

    <input id="btn1" type="button" value="别监控默认区域了">

    <input id="btn2" type="button" value="继续默认区域了">

<script type="text/javascript">

//被观察者：select

//观察者：content

var osel=document.getElementsByTagName("select")[0];

var ocon=document.getElementById("content");

//将所有的观察者都注册在被观察者身上

osel.observers={};

//注册方法

osel.attach=function(key,observer){

    this.observers[key]=observer;

}

//注销方法

osel.detach=function (key){

    delete this.observers[key];

}

//通知所有观察者，调用他们的update方法//在select改变时通知所有被观察者

osel.onchange=osel.notify=function(){

    for(var key in this.observers){

        this.observers[key].update(this);

    }

}

//定义ocon的update方法

ocon.update=function(observer){

    if(observer.value=="jingdian"){

        this.style.background="#FF9E4A";

    }else if(observer.value=="huali"){

        this.style.background="red";

    }

}

//向被观察者当中注册

osel.attach("ocon",ocon);

var obtn1=document.getElementById("btn1");

var obtn2=document.getElementById("btn2");

obtn1.onclick=function(){

    osel.detach("ocon");

}

obtn2.onclick=function(){

    osel.attach("ocon",ocon);

}

</script>

</body>

</html>

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

  1. js - 观察者模式与订阅发布模式

    零.序言 转载&参考: 1.JavaScript 设计模式系列 - 观察者模式 2.JavaScript 设计模式(六):观察者模式与发布订阅模式 一.观察者模式(observer) 概要: ...

  2. 浅谈js观察者模式

    观察者模式又叫发布订阅模式,它可以让多个观察者对象同时监听某一个主题对象,即在一个事件发生时,不同的对象迅速对其进行相应.就比如当又人闯红灯,不同的人对这件事迅速发起响应,当然这个比喻不太恰当,不过在 ...

  3. js观察者模式与Model

    目的 观察者模式是常见的设计模式,可以被应用到MV*框架的Model上,来实现对数据变化的监听. 基本概念 观察者模式是一种常见的设计模式.被观察者可以被订阅(subscribe),并在状态发生改变时 ...

  4. js观察者模式学习

    function Events(){ var obj = {}; this.on=function(key,fn){ var stack; stack = obj[key] || (obj[key] ...

  5. JS 观察者模式

    Events = function() { var listen, log, obj, one, remove, trigger, __this; obj = {}; __this = this; l ...

  6. 收藏的js学习小例子

    1.js模拟java里的Map function Map(){ var obj = {} ; this.put = function(key , value){ obj[key] = value ; ...

  7. 微信小程序开发中的二三事之网易云信IMSDK DEMO

    本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...

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

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

  9. PureMVC(JS版）源码解析（一）：观察者模式解析

          假设一种情景,在程序开发中,我们需要在某些数据变化时,其他的类做出相应,例如在游戏中,升级一件装备,会触发玩家金币数量改变,背包数据改变和冷却队列数据改变等等.我们不可能设置setInte ...

随机推荐

  1. tomcat memory leak

    Struts + Hibernate做项目,重新部署项目会出现Memory Leak严重报错.虽然不影响使用,但还是有风险.经实验发现是Hibernate的session没有关闭.....粗心....

  2. nyoj 236 心急的C小加

    心急的C小加 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 C小加有一些木棒,它们的长度和质量都已经知道,需要一个机器处理这些木棒,机器开启的时候需要耗费一个单位的 ...

  3. 转载总结一些关于Google chart api的知识

    <script type="text/javascript">      google.setOnLoadCallback(drawChartLine);      f ...

  4. DES 算法的 C++ 与 JAVA 互相加解密

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  5. 利用sqlmap和burpsuite绕过csrf token进行SQL注入 (转)

    问题:post方式的注入验证时遇到了csrf token的阻止,原因是csrf是一次性的,失效导致无法测试. 解决方案:Sqlmap配合burpsuite,以下为详细过程,参照国外牛人的blog(不过 ...

  6. C++ 变量初始化规则

    1.定义变量的时候,如果没有初始化,它的值是什么呢? 它的值取决于变量的类型和变量定义的位置. 2.考虑基本类型的变量,定义时没有初始化.如果定义在方法外部,初始化为0,如果定义在方法内部,不被初始化 ...

  7. C#-datagridview右键选中行

    在datagridview中有时需要在右键点击某行的时候就选中它,那么我们只需要在datagridview的CellMonseDown事件中添加如下代码就行: && e.ColumnI ...

  8. Oracl数据库管理方面的资料(查询sga,查看oracle数据库名称sid,查看oracle数据库名称，查看表空间，修改表空间名称)

    显示Oracle sga相关信息: SQL> show sga Total System Global Area 105978600 bytes Fixed Size 453352 bytes ...

  9. spring关于“transactionAttributes”的相关配置

    spring关于"transactionAttributes"的相关配置 <bean id="baseTransactionProxy" class=&q ...

  10. 理解class.forName()

    使用jdbc方式连接数据库时会使用一句代码Class.forName(String className).这句话是什么意思呢?首先说一点Class.forName(String className)这 ...