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

被观察者的状态发生改变，通知观察者调用观察者的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. codeforce 609A - USB Flash Drives

    排序水题 #include<iostream> #include<cstdlib> #include<cstdio> #include<algorithm&g ...

  2. SystemParametersInfo

    Python的模块pywin32中的win32gui.SystemParametersInfo()函数 在使用win32con.SPI_SETDESKWALLPAPER设置Wallpaper时,其第二 ...

  3. 空循环比较 for foreach array_map array_walk

    申请一个数组,然后不断的跑空循环,看看执行时间 for循环 foreach (不使用键) foreach(使用键) array_map array_walk 查看效率速度发现很明显 是foreach更 ...

  4. 【Stage3D学习笔记续】真正的3D世界（一）：透视矩阵

    如果各位看官跟着我的学习笔记一路看过来的话,一定会吐槽我的,这都是什么3D啊?从头到尾整个都是在使用GPU绘制一堆2D图像而已,的确,之前我们一直使用正交矩阵利用GPU加速来实现2D世界的展示,算不上 ...

  5. Redis实战

    大约一年多前,公司同事开始使用Redis,不清楚是配置,还是版本的问题,当时的Redis经常在使用一段时间后,连接爆满且不释放.印象中,Redis 2.4.8以下的版本由于设计上的主从库同步问题,就会 ...

  6. 【转】如何在vmware中如何设置ip

    如何在vmware中如何设置ip 1.修改网络接口选hostonly2.虚拟机里安装vmware-tool,对鼠标和图形进行更好地支持.如果你在图形界面下,首先要切换到文本模式.右键点击桌面,打开一个 ...

  7. MySQL to Redis

    [TOC] 简介 使用mysql2redis可以非常便捷的将mysql中的数据导出到redis中去, 通常是需要一个select语句即可实现. 软件安装 // 安装apr + apr-util $ w ...

  8. MST最小生成树及克鲁斯卡尔(Kruskal)算法

    最小生成树MST,英文名如何拼写已忘,应该是min spaning tree吧.假设一个无向连通图有n个节点,那么它的生成树就是包括这n个节点的无环连通图,无环即形成树.最小生成树是对边上权重的考虑, ...

  9. [React Native] Create a component using ScrollView

    To show a list of unchanging data in React Native you can use the scroll view component. In this les ...

  10. android学习日记16--GridView(网格视图)

    一.GridView 1.简述 GridView按照行列来显示图片或文本的一种视图,排列其实有点类似TableLayout布局, 不过和TableLayout还是差别很大的,倒比较像二维的ListVi ...