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

被观察者的状态发生改变，通知观察者调用观察者的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. empty(trim($str))报错原因

    最近写程序的时候发现一个这样的问题,一个if判断如下: [php] if (!empty(trim($ch_url))) { ... } [/php] 执行程序报出如下错误: [code] Fatal ...

  2. BNUOJ-26475 Cookie Selection 堆,线段树等

    题目链接:http://www.bnuoj.com/bnuoj/problem_show.php?pid=26475 题意:每次输入一个操作,如果是数字,那么放入一个容器中,如果是#号,取出当前容器中 ...

  3. Django ORM 中的批量操作

    Django ORM 中的批量操作 在Hibenate中,通过批量提交SQL操作,部分地实现了数据库的批量操作.但在Django的ORM中的批量操作却要完美得多,真是一个惊喜. 数据模型定义 首先,定 ...

  4. nyoj 975 关于521

    关于521 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 Acm队的流年对数学的研究不是很透彻,但是固执的他还是想一头扎进去. 浏览网页的流年忽然看到了网上有人用玫 ...

  5. iOS开发之详解正则表达式

    本文由Charles翻自raywenderlich原文:NSRegularExpression Tutorial: Getting Started更新提示:本教程被James Frost更新到了iOS ...

  6. 转载有个小孩跟我说LINQ(重点讲述Linq中GroupBy的原理及用法)

    转载原出处: http://www.cnblogs.com/AaronYang/archive/2013/04/02/2994635.html 小孩LINQ系列导航:(一)(二)(三)(四)(五)(六 ...

  7. MYSQL- 创建和删除临时表

    临时表可能是非常有用的,在某些情况下,保持临时数据.最重要的是应该知道的临时表是,他们将当前的客户(www.111cn.net)端会话终止时被删除 当你创建临时表的时候,你可以使用temporary关 ...

  8. Spider Studio 数据挖掘集成开发环境

    (最新版本: 2.7.12.1) 传统的多线程蜘蛛程序虽然采集速度快, 但是明明不需要所有内容, 却胡子眉毛一把抓, 将整个网页都下载下来当作一个文本进行处理. 由于网页内容参差不齐, 所以抓取质量常 ...

  9. Python标准库：内置函数reversed(seq)

    本函数是返回序列seq的反向訪问的迭代子. 样例: #reversed() for i in reversed([2, 3, 4, 5]): print(i, end = ',') 结果输出例如以下: ...

  10. LetterView实现载入全国各地城市

    近期更具eoe论坛上的letteView案例(   eoe)自己做了一个LetterView载入全国城市的案例,欢迎大家互相学习和交流, 相对于eoe那个案例稍微修改了一下,利用json存储全国城市数 ...