Design Pattern: Observer Pattern
1. Brief
一直对Observer Pattern和Pub/Sub Pattern有所混淆,下面打算通过这两篇Blog来梳理这两种模式。若有纰漏请大家指正。
2. Use Case
首先我们来面对一个老到跌渣的故事,并以从未听说过Observer Pattern为前提。
假设要设计一个新闻订阅系统,新闻分为商业、体育和八卦3种,而查收终端有PC、移动终端等,后续还不断增加新闻种类和查收终端。
需求如上,下面我们根据OOD的方式来构建概念模型。
新闻 <- 分类新闻
终端 <- 分类终端
然后构造实体模型
// 新闻相关实体模型
class NewsType{
constructor(){}
}
class BusinessNewsType extends NewsType{}
class SportNewsType extends NewsType{}
class EntertaintmentNewsType extends NewsType{}
// 终端相关实体模型
class Term{
getNews(news){}
}
class PCTerm extend Term{}
class MobileTerm extend Term{}
接着我们关联已有经验——现实生活中的送报服务,发现用户A、用户B均订阅了A报的X早报,那么每天早上报纸刚印刷出来就会马上送到用户A和B那了。突然多了家订报有米送的Y早报,用户A和用户C跑去订阅,用户B直接就退了X早报,这时X早报为留住老用户就推送“老客户免费赠送半年X晚报”,于是用户A取消了退订的想法。
很明显 新闻订阅系统 就是线下业务直挪到线上的做法,通过分析线下业务流程我们可以找到设计方案。线下业务流程如下:
订阅:用户到报社订阅
退订:用户到报社退订
分发报纸:报社向所有订阅者分发报纸
按这思路构建 新闻订阅系统 的原型:
class NewsType{
constructor(){
this.subs = []
}
/* 订阅
* @param {Term} term - 终端
* @returns {Boolean}
*/
sub(term){
// 排除
for(let _sub of this.subs)
if(_sub === term) return false
return Boolean(this.subs.push(term))
}
/* 退订
* @param {Term} term - 终端
* @return {Boolean}
*/
unsub(term){
for(let i = 0, sub; sub = subs[i]; ++i)
if(sub === term) return Boolean(this.subs.splice(i, 1))
}
/*
* 分发新闻
*/
notify(news){
for(let sub of this.subs) sub.getNews(news)
}
}
class BusinessNewsType extends NewsType{
pubNews(title, content){
var news = {title: title, content: content}
super.notify(news)
}
}
// definition of SportNewsType.......
class PCTerm extends Term{
getNews(news){
alert(news.title + ';' + news.content)
}
}
class MobileTerm extends Term{
getNews(news){
console.log(news.title + ';' + news.content)
}
}
// 主程序则作为 新闻中心 与 用户交互的场所
var businessNewsType = new BusinessNewsType()
var sportNewsType = new SportNewsType()
var pcTerm = new PCTerm()
var mobileTerm = new MobileTerm()
businessNewsType.sub(pcTerm)
businessNewsType.sub(mobileTerm)
sportNewsType.sub(mobileTerm)
上述原型基本勾勒出新闻订阅系统中对象及其关联的方式,我们就可以在这之上再细化和优化了。而从上述是原型我们不难发现 新闻 与 终端 均可独立开发,然后在主程序中做关联即可。新闻类型 和 终端类型的增删并不会对其他已有的新闻类型和终端类型有影响,除了在主程序中增删关联外。
现在我们作个简单的分析总结:
1. 不稳定因素(新闻类型 和 终端类型)解耦 -> 最小化不稳定因素所影响的范围(范围越小,后期改动越少);
2. 关联规则接口/契约化 -> 固化关联规则 和 关联发生的形式 便于后期维护。
这些是我面对未知问题的分析、解构方法,希望和大家一起探讨更美好的方法。
3. What Is Observer Pattern?
Observer Pattern(观察者模式),狭义上是指Observer/Subscriber关注Observable/Subject的状态,并根据Observable/Subject的状态作出响应。广义上是指Observer/Subscriber关注Observable/Subject的状态或行为或两者兼备,并作出响应。
Roles
Observable/Subject(被观察者):定义被观察者的公共状态和行为
ConcreteObservable(具体的被观察者):定义具体的被观察者的状态和行为
Observer(观察者):定义观察者的公共状态和行为
ConcreteObserver(具体的观察者):定义具体的观察者的状态和行为
Two Methods: Push & Pull
上面第2节中的实现是由Observable/Subject来维护Observer组,那是不是只能这样呢?答案是否定的。它只是Push方式的实现,我们还可以采用Pull方式呢!
Push Model:推方式,也就是由Observable/Subject主动发起与Observer/Subscriber通信,并将自身的所有信息推给Observer/Subscriber,即使大部分信息最后都没用上。
pros: 1. 观察者实时响应被观察者的状态变化和行为状况;
cons: 1. 观察者被硬塞一些被观察者的无效信息;2. 被观察者状态变化频密,导致观察者忙于响应,消耗资源。
Pull Model:拉方式,也就是由主动Observer/Subscriber发起与Observable/Subject通信,并根据自身需要从Observable/Subject上拉去有效信息。一般通过定时器或特定事件触发执行。
pros: 1. 观察者可按需从被观察者处提取有效信息;2. 自主控制通信节奏,以免被状态频密变化的被观察者牵着鼻子走;
cons: 1. 获取被观察者状态变化上存在滞后甚至丢失的情况。
下面是Pull Model的实现方式
// Pull Model implementation
class FooNewsType{
constructor(){
this.news = []
}
addNews(title, content){
this.news.push({title: title, content: content, timestamp:(+new Date())})
}
}
class PCTerm{
constructor(){
this.subjects = []
this.newsTiles = []
this.lastPullDate = 0
}
subTo(newsType){
this.subjects.push(newType)
}
unsubFrom(newsType){
for(let i = 0, n; n = this.subjects[i]; ++i)
if(n === newsType) return this.subjects.splice(i, 1)
}
// 拉数据
pull(){
for(let sub of this.subjects)
for(let news of sub.news)
if(news.timestamp > this.lastPullDate)
this.newsTiles .push(news.title)
}
}
// 主程序
var businessNewsType = new BusinessNewsType()
var pcTerm = new PCTerm()
pcTerm.subTo(businessNewsType)
businessNewsType .addNews('Say Hi', 'Hello World!')
// 其他代码........
pcTerm.pull()
Improvement of Push Model
针对Push Model所带来的问题1,我们可以通过增强sub函数来解决
// definition
sub(term, aspect){
this.subs.push({term: term, aspect: aspect})
}
notify(news){
for(let sub of this.subs)
sub.term.getNews(sub.aspect && sub.aspect(news) || news)
}
// usage
new BusinessNewsType()
.sub(new PCTerm()
, (news)=>{ return news.title })
针对问题2,我们可以通过 定时推送通知 + 溢出通知 的方式解决,不过具体还是看业务需求咯
constructor(interval = 100, ceiling = 5){
this.ceiling = ceiling
this.timer = setInterval(()=>{
if (!this.pools.length || !this.subs.length) return
for(let sub of this.subs)
for(let n of news)
sub.term.getNews(sub.aspect && sub.aspect(n) || n)
}, interval)
}
notify(news){
this.pools.push(news)
if (this.pools.length < this.ceiling) return
var news = this.pools.splice(0, this.pools.length)
for(let sub of this.subs)
for(let n of news)
sub.term.getNews(sub.aspect && sub.aspect(n) || n)
}
Specific Implementation Problems —— Making sure Subject state is self-consistent before notification
就是确保Subject状态变化完成后,再通知Subscriber。反例如下:
notify(news){
for(let sub of this.subs)
sub.term.getNews(sub.aspect && sub.aspect(news) || news)
// 发生在通知观察者之后
news.title = 'changed'
}
相当于为每次Subject状态的整体变化打个版本号,然后将属于该版本的Subject状态发送给Subscriber,之后的状态变化就属于下一个版本了。
4. Diff Between Observer Pattern and Pub/Sub Pattern
两者区别主要体现在以下2点
1. 耦合度
Observer Pattern: Subscriber 和 Subject 两者感知对方的存在,但不受对方的具体实现 和 数目 所限制 => 弱依赖。关联规则内置在Subscriber 或 Subject中。
Pub/Sub Pattern: Publisher 和 Subscriber 两者相互间毫无存在感,通过Message Broker关联两种角色,并且将关联规则藏进Message Broker中。
2. 影响范围
Observer Pattern作为Design Pattern存在,而Pub/Sub Pattern则作为Architecture Pattern存在,明显Observer Pattern的影响范围较小。也就是说在采用Pub/Sub Pattern时,需要更谨慎。
5. We Used Observer Pattern Already
其实我们现在用到很多框架、类库均采用了Observer Pattern,如MVC和Event Mechanism等。
MVC中M(odel)作为观察者,而V(iew)作为被观察者;
而Event Mechanism则是更为典型的Observer Pattern,C#在语法层面(event关键字),而Java通过内置类库对其提供支持。
6. Conclusion
洋洋洒洒写了这么多,若有纰漏请大家指正,谢谢!
7. Thanks
http://wiki.jikexueyuan.com/project/javascript-design-patterns/observer-pattern.html
http://www.joezimjs.com/javascript/javascript-design-patterns-observer/
http://www.oodesign.com/observer-pattern.html
- MyBatis两张表字段名相同产生的问题
- mongo 3.0 备份和还原数据库 ,及too many positional arguments错误
- AngularJs HTTP响应拦截器实现登陆、权限校验
- C# 读写App.config配置文件的方法
- Golang语言社区--Go语言基础第四节类型
- Golang语言社区--go语言编写Web程序
- Golang语言社区--Go语言基础第五节流程控制
- (14)不同基因坐标转换-生信菜鸟团博客2周年精选文章集
- (15)基因组各种版本对应关系-生信菜鸟团博客2周年精选文章集
- go 并发处理脚本
- 生信菜鸟团博客2周年精选文章集(4)NCBI数据库的几个探索
- PHP 的前世今生
- 【直播】我的基因组49:Y染色体的SNV不能用常规流程来找?
- 【直播】我的基因组46:SNV突变(96种)频谱的制作
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Docker 入门到实战教程(十三)Docker Compose
- 解决IDEA2020.1版本的lombok插件问题
- 工具系列 | 视频监控RTSP转HLS解决方案
- Redis系列 |(一)六种基本数据结构
- 工具系列 | Jenkins 构建伟大,无所不能
- 工具系列 | H5自定义视频播放器实现
- 前端系列 |原生JS和jQuery循环遍历函数
- 工具系列 | H5如何实现人脸识别
- 形式化分析工具(六):HLPSL Tutorial(Example3)
- CODING DevOps + Nginx-ingress 实现自动化灰度发布
- TF入门04-TF实现Word2Vec
- TF入门03-实现线性回归&逻辑回归
- TF入门02-TensorFlow Ops
- 前端|利用Verify插件实现前端图像验证码
- 3分钟短文 | PHP位运算和逻辑运算,一个符号写两遍这么简单?