js观察者模式
观察者模式存在观察者和被观察者
被观察者的状态发生改变，通知观察者调用观察者的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观察者模式的更多相关文章
- js - 观察者模式与订阅发布模式
零.序言 转载&参考: 1.JavaScript 设计模式系列 - 观察者模式 2.JavaScript 设计模式(六):观察者模式与发布订阅模式 一.观察者模式(observer) 概要: ...
- 浅谈js观察者模式
观察者模式又叫发布订阅模式,它可以让多个观察者对象同时监听某一个主题对象,即在一个事件发生时,不同的对象迅速对其进行相应.就比如当又人闯红灯,不同的人对这件事迅速发起响应,当然这个比喻不太恰当,不过在 ...
- js观察者模式与Model
目的 观察者模式是常见的设计模式,可以被应用到MV*框架的Model上,来实现对数据变化的监听. 基本概念 观察者模式是一种常见的设计模式.被观察者可以被订阅(subscribe),并在状态发生改变时 ...
- js观察者模式学习
function Events(){ var obj = {}; this.on=function(key,fn){ var stack; stack = obj[key] || (obj[key] ...
- JS 观察者模式
Events = function() { var listen, log, obj, one, remove, trigger, __this; obj = {}; __this = this; l ...
- 收藏的js学习小例子
1.js模拟java里的Map function Map(){ var obj = {} ; this.put = function(key , value){ obj[key] = value ; ...
- 微信小程序开发中的二三事之网易云信IMSDK DEMO
本文由作者邹永胜授权网易云社区发布. 简介 为了更好的展示我们即时通讯SDK强悍的能力,网易云信IM SDK微信小程序DEMO的开发就提上了日程.用产品的话说就是: 云信 IM 小程序 SDK 的能力 ...
- 谈谈JS的观察者模式（自定义事件）
呼呼...前不久参加了一个笔试,里面有一到JS编程题,当时看着题目就蒙圈...后来研究了一下,原来就是所谓的观察者模式.就记下来...^_^ 题目 [附加题] 请实现下面的自定义事件 Event 对象 ...
- PureMVC(JS版）源码解析（一）：观察者模式解析
假设一种情景,在程序开发中,我们需要在某些数据变化时,其他的类做出相应,例如在游戏中,升级一件装备,会触发玩家金币数量改变,背包数据改变和冷却队列数据改变等等.我们不可能设置setInte ...
随机推荐
- 2.2CUDA-Memory(存储)和bank-conflict
在CUDA基本概念介绍有简单介绍CUDA memory.这里详细介绍: 每一个线程拥有自己的私有存储器,每一个线程块拥有一块共享存储器(Shared memory):最后,grid中所有的线程都可以访 ...
- 常用Raspberry Pi周边传感器的使用教程
在Raspberry Pi 的使用和开发过程中,你可能时常需要一些硬件和传感器等来支持你的开发工作,例如,加入一个超声波测距的模块来让你的Raspberry Pi具备测距功能,加入一个测温模块以实现测 ...
- POJ3666-Making the Grade（左偏树 or DP）
左偏树 炒鸡棒的论文<左偏树的特点及其应用> 虽然题目要求比论文多了一个条件,但是……只需要求非递减就可以AC……数据好弱…… 虽然还没想明白为什么,但是应该觉得应该是这样——求非递减用大 ...
- Delphi XE5 安卓手机要求
1 ARMv7 的 CPU v6 的肯定不支持. 2 黑屏是因为你的手机 CPU 不支持 NEON 特性.或者是 T2 海思 CPU .这 2 个不支持. 3 系统版本 2.3.3 到 2.3.9 ...
- Keil MDK 无法设置断点【worldsing】
要解决一个问题就怕不知道怎么搜索,或是别人没有遇到过: 同样碰到Keil MDK Debug调试无法设置断点问题,首先来问百度,GOOGLE,一下是我搜索到的结果: 1.keil 不能设置断点,每 ...
- 只允许input框输入数字，输入其他的键的时候，直接不显示的方法
function numInteger(){ if((event.keyCode>=48 && event.keyCode<=57) || (event.keyCode& ...
- android侧滑菜单笔记
一.SlidingPaneLayout v4包下的控件,使用简单,功能简洁.官方文档明确说明该控件只能左侧滑动.使用如下: <android.support.v4.widget.SlidingP ...
- 关于写blog这件事
事实上一直是挺喜欢写blog的.可是近期在写blog这件事上遇到或者開始思考一些问题了. 首先,写blog的动机.对于这个问题,我从自己的理解上得出下面几个原因: 写blog是对自己学到知识的一种总 ...
- js 如何把JSON格式的字符串转换为JSON对象
直接用eval函数.例:var str1 = '{ "url": "www.51qdq.com", "name": "js&quo ...
- iOS开发——新特性OC篇&Swift 2.0新特性
Swift 2.0新特性 转眼间,Swift已经一岁多了,这门新鲜.语法时尚.类型安全.执行速度更快的语言已经渐渐的深入广大开发者的心.我同样也是非常喜爱这门新的编程语言. 今年6月,一年一度 ...