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

被观察者的状态发生改变，通知观察者调用观察者的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. Petshop学习第一天

    1.PetShop的体系架构: 2.分层设计的目的: 分散关注.松散耦合.逻辑复用.标准定义 3.一些不明白的地方: item和product是什么关系??? Model类库中的Linq To Sql ...

  2. 【数论】Baby Step Giant Step

    被数论怒虐了一天 心力憔悴啊 感觉脑细胞已经快消耗殆尽了>_< 但是今天还是会了很多之前觉得特别神的东西 比如BSGS 之前听了两遍 好像都因为听得睡着了没听懂-.- 今天终于硬着头皮学会 ...

  3. HTTP协议理解与应用总结

    总结了自己在实际工作场景中遇到的与http协议相关的一些内容的理解. Request & Response Request格式 <request-line> 比如:GET /api ...

  4. OpenCV2.4.6与vs2008配置问题

    刚刚学习Opencv,发现配置的时候蛮复杂的,特此记下以备后续. 我的opencv安装在D:\OpenCV\opencv 1.设置环境变量 首先说一下环境配置,看到很多网上说的是根据系统的位数来判断, ...

  5. hdoj 3790 最短路径问题

    最短路径问题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...

  6. RC522天线匹配参数【worldsing笔记】

    图为Device读卡器的参数值 EMC电路对读写距离影响不大:                   L3 和L4 固定为2.2uH:                  C11和C12也是固定值,如果P ...

  7. 解决IE6不支持fixed

    /* IE6 是不支持position:fixed的,解决如下*/.right-bar{ _position:absolute;_top:expression(eval(document.docume ...

  8. C++学习笔记（十五）：异常

    C++之父Bjarne Stroustrup在<The C++ Programming Language>中讲到:一个库的作者可以检测出发生了运行时错误,但一般不知道怎样去处理它们(因为和 ...

  9. Oracle- PL/SQL DEV工具的使用收集

    1.工具---首选项---用户界面---编辑器----定制关键词 里面可以选择关键字是否大写 2.美化代码段,点击菜单edit,然后pl/sql beautifer,快捷键:PL/SQL Develo ...

  10. （转）java读取数据库表信息，子段

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sq ...