5. JavaScript 设计模式(观察者模式)
来源:互联网 发布:淘宝优质家具卖家 编辑:程序博客网 时间:2024/04/25 14:52
观察者模式是什么东东呢?我先用生活的例子,简单说明一下吧。
① 报社的业务就是出版报纸
② A、B、C三个人想某个报社订阅了报纸,只要他们有新的报纸出版,就会给这三个用户送报纸。只要他们三个一直是这个报社的订户,就会一直收到新的报纸。
③ 当这三个人,其中一个不再想看报纸的时候,取消订阅,他们就不会收到报纸。
④ 只要报社还在运营,就会一直有人向他们订阅报纸或取消报纸。
出版者 + 订阅者 = 观察者模式
观察者模式:定义一个对象之间的一对多依赖,这样一来,当一个对象改变状态时,他的所有依赖者都会收到通知并自动更新。
其实无论是我那个报社的例子,还是概念。都简单的说明了,观察者模式就是主体一变,对他的依赖就会收到改变的消息。
那代码怎么实现呢?
以下例子不是本人所写,来自:http://www.cnblogs.com/TomXu/archive/2012/03/02/2355128.html
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
如果熟悉 Java api 的人就知道 Java.util 里面其实有观察者模式的包。
观察者实现 Observer 接口,重写 update 方法。
被观察者者继承 Observable 类,调用 setChanged() 和 notifyObservers() 方法。
在这里,我用 js 参考这两个类封装一了个公共的接口。
- Observable 类
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- Observer 接口,因为 javascript 没有接口,所以这里还是使用类
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 调用
这里我使用了 Head First 的例子,气象站。只要气象站测试到温度,湿度的改变,所有的显示气象的公告板都要收到数据,并发生改变。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
运行结果
要点(摘自 Head First)
① 观察者模式定义了对象之间一对多的关系
② 主题(也就是观察者)用一个共同的接口来更新观察者
③ 观察者之间和被观察者之间用松耦合方式结合,被观察者不知道观察者的细节,只知道观察者实现了观察这的接口
④ 使用此模式时,可从被观察者中推或者拉数据。
⑤ 有多个观察者时,不可以依赖特定的通知顺序。
- 5. JavaScript 设计模式(观察者模式)
- 5. JavaScript 设计模式(观察者模式)
- javascript设计模式-----观察者模式
- JavaScript设计模式--观察者模式
- javascript设计模式 观察者模式
- javascript设计模式(二) 代理模式 观察者模式
- javascript设计模式之观察者模式(行为模式)
- Javascript设计模式-07-观察者模式(发布订阅模式)
- javascript设计模式之Observer(观察者)模式
- Javascript设计模式之观察者模式
- JavaScript学习之设计模式->观察者模式
- JavaScript设计模式之观察者模式
- 设计模式(观察者模式)
- 设计模式,行为模式(观察者模式)
- 设计模式--观察者(监听)设计模式
- 设计模式(一)观察者设计模式
- 设计模式--观察者(监听)设计模式
- 模式设计:观察者模式
- Specular IBL
- js 取当前时间前几天
- Android之自定义EditText光标和下划线颜色
- Python廖雪峰实战web开发(Day12-编写日志列表页)
- 将Python的默认字符改为utf-8
- 5. JavaScript 设计模式(观察者模式)
- 快速了解class文件内容
- webservice cxf+spring maven项目
- oracle加快查询速度
- 指针的大小是谁决定的
- Java枚举实现单例模式
- android中的懒加载机制
- mysql 索引
- 三维坐标系变换