观察者模式和发布订阅模式(续)

两年前写过一篇关于消息发布订阅的文章,当时是结合了实际的应用场景。看起来不够抽象,概括。今天试图抽象话的再去写一下自己的理解。

此文续上篇发布 订阅 消息系统(一),可点击查看,取名改为观察者和发布订阅模式。

什么是观察者模式?

观察者模式(Observer Pattern)定义了一种当对象之间存在一对多的关系时的一种行为模式。比如当一个对象被修改时,则会通知它的依赖对象并自动更新状态。它主要解决了一个对象状态改变给其他对象通知的问题,并且考虑到易用和低耦合度,保证高度的协作性。

比如一个应用的实例:军训时,教官(目标对象)的状态发生改变,发出“立正”的口令,则所有的学生(观察者对象)此时得到通知,状态随之更新,做出"立正“的动作响应。

一个极简的观察者模式代码案例

该案例的特征:

  • 一个目标者对象 Subject,拥有方法:添加 / 删除 / 通知 Observer;
  • 多个观察者对象 Observer,拥有方法:接收 Subject 状态变更通知并处理;
  • 目标对象 Subject 状态变更时,通知所有 Observer。
//发布者
class Subject {
	constructor() {
		this.observers = []
	}
	add(observer) {
		this.observers.push(observer)
	}
	delete(observer) {
		let idx = this.observers.findIndex( item => item === observer);
		idx > -1 && this.observers.splice(idx, 1)
	}
	notify() {
		for(let observer of this.observers) {
			observer.update()
		}
	}		
}

//观察者
class Observer {
	constructor(name) {
		this.name= name
	}
	update() {
		console.log(`我是${this.name},我立正了`)
	}
}
// 实例化目标者
let subject = new Subject();

// 实例化两个观察者
let obs1 = new Observer('刘德华');
let obs2 = new Observer('吴彦祖');

// 向目标者添加观察者
subject.add(obs1);
subject.add(obs2);

// 目标者通知更新
subject.notify();
//打印结果
//我是刘德华,我立正了
//我是吴彦祖,我立正了

上面代码可以添加、删除观察者,当然你可以定制自己需求的功能函数。

当然这种模式是存在一些不足的,比如:

  • 一个目标者有很多观察者的话,将所有通知者都通知到会花费不少时间
  • 若目标者和观察者之间存在循环依赖的话,目标发生变化,观察者变化,进而又影响目标者,处理不好,很容易导致系统崩溃。
  • 目标者通知更新的话,所有观察者都接收到了通知。比如上面教官说立正,刘同学和吴同学都是进行相应,做出立正的动作。但实际情况是,教官可能只是指定刘同学 立正,只需刘同学做出响应更新而已。

什么是发布订阅模式?

发布订阅模式: 订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Topic),当发布者(Publisher)发布该事件(Publish topic)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码。

一个极简的发布订阅模式案例

var pubsub = {
	//事件调度中心
    topics: {},
    //注册事件到调度中心
    subscribe(topic, fn) {
        this.topics[topic] = this.topics[topic] || []
        this.topics[topic].push(fn)
    },
    //将事件发布到调度中心
    publish(topic, ...args) {
        if (!this.topics[topic]) return
        for (let fn of this.topics[topic]) {
            fn(...args)
        }
    },
    //解绑到调度中心的事件
    unsubScribe(topic, fn) {
        let fnList = this.topics[topic]
        if (!fnList) return
        //若不传入指定的要取消的订阅的方法(fn),则清除所有topic下的订阅
        if (!fn) {
            fnList && (fnList.length == 0)
        } else {
            fnList.forEach((item, index) => {
                if (item == fn) {
                    fnList.splice(index, 1)
                }
            })
        }
    }
}

//注册eat事件
pubsub.subscribe('eat', time => {
    console.log(`now is ${time},time to eat lunch`);
})

//注册work事件
pubsub.subscribe('work', time => {
    console.log(`now is ${time},time to work`);
})

//发布work,eat事件
pubsub.publish('work', '8:30 AM') //now is 8:30 AM,time to work
pubsub.publish('eat', '12:30 AM') //now is 12:30 AM,time to eat lunch

//取消eat事件的订阅
pubsub.unsubScribe('eat')

发布订阅模式与观察者模式的不同,在于第三者的出现:事件中心(topic)的出现。目标对象并不直接通知观察者,而是通过事件中心来派发事件。订阅者只关心自己订阅事件以此来响应变化。

就像上文说的那样,DOM的监听事件其实也是该模式的应用。比如jQuery的onclick事件,one()只触发一次响应事件,off()解除绑定事件(类比上面代码的unsubScribe事件)

借用一张图表示如下:

在这里插入图片描述

观察者模式是不是发布订阅模式

借用一个同学的总结

网上关于这个问题的回答,出现了两极分化,有认为发布订阅模式就是观察者模式的,也有认为观察者模式和发布订阅模式是真不一样的。

其实我不知道发布订阅模式是不是观察者模式,就像我不知道辨别模式的关键是设计意图还是设计结构(理念),虽然《JavaScript设计模式与开发实践》一书中说了分辨模式的关键是意图而不是结构

如果以结构来分辨模式,发布订阅模式相比观察者模式多了一个中间件订阅器,所以发布订阅模式是不同于观察者模式的;如果以意图来分辨模式,他们都是实现了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新,那么他们就是同一种模式,发布订阅模式是在观察者模式的基础上做的优化升级。

不过,不管他们是不是同一个设计模式,他们的实现方式确实有差别,我们在使用的时候应该根据场景来判断选择哪个。


此文没有长篇大论,力争以最简的话语表述我所理解的内容。其中借鉴了以下三位的同学的一些理解。如果看完还是云里雾里,可以去看下他们的文章,写的很不错。

发布订阅模式与观察者模式 https://segmentfault.com/a/1190000018706349 作者:hfhan

重学JS(九)—— 观察者模式和发布/订阅模式真不一样:https://www.jianshu.com/p/f0f22398d25d 作者:闪闪发光的狼

JavaScript 设计模式(六):观察者模式与发布订阅模式 https://segmentfault.com/a/1190000019722065 作者: 以乐之名

发布了38 篇原创文章 · 获赞 39 · 访问量 8万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览