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

被观察者的状态发生改变，通知观察者调用观察者的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. C++默认参数不能是一个引用

    引用做参数时不能传一个定值(如数字或者const等~~~) somefunc(int& a = 4) -> default argument for ‘int& a’ has t ...

  2. HW7.5

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  3. BNUOJ-29357 Bread Sorting 模拟

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=29357 直接模拟就可以了.. //STATUS:C++_AC_190MS_1884KB # ...

  4. jitsi-meet

    Jitsi Meet在Ubuntu上的快速安装与卸载 1. 进入到终端,切换到root用户 # sudo su 添加相应的代码仓库: # echo 'deb http://download.jitsi ...

  5. hdoj 1229 还是A+B

    还是A+B Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...

  6. [OC Foundation框架 - 22] 集合的内存管理

    A.集合的手动内存管理 NSArray addObject: 加入的元素执行一次retain removeObject: 被删除的元素执行一次release removeAllObjects: 所有元 ...

  7. Modbus调试利器 Modbus Poll

    Modbus Poll是一个非常不错的工具,支持TCP/串口 下载地址:http://pan.baidu.com/share/link?shareid=2880213929&uk=248325 ...

  8. 重看Decorator Pattern，联想到Delegate传递及Flags Enum--欢迎拍砖！

    话说装饰模式(Decorator)的动机是“动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活.[GOF <设计模式>]”.再次学到该模式,有感 ...

  9. .NET自带IOC容器MEF之初体验

    .NET自带IOC容器MEF之初体验   本文主要把MEF作为一种IOC容器进行讲解,.net中可用的IOC容器非常多,如 CastleWindsor,Unity,Autofac,ObjectBuil ...

  10. JavaScript要点 (三) 保留关键字

    在 JavaScript 中,一些标识符是保留关键字,不能用作变量名或函数名. JavaScript 标准 所有的现代浏览器完全支持 ECMAScript 3(ES3,JavaScript 的第三版, ...