js – 观察者模式与订阅发布模式

一、观察者模式(observer)

观察者模式:定义了对象间一种一对多的依赖关系,当目标对象 Subject 的状态发生改变时,所有依赖它的对象 Observer 都会得到通知。

这种模式的实质就是我们可以对某个对象的状态进行观察,并且在发生改变时得到通知(以进一步做出相应的行为)。vue的数据变化侦测,就是使用观察者模式进行依赖收集和数据监听的

例:

// 目标者

class Subject {

constructor() {

this. observers = []; // 观察者列表

}

// 添加订阅者

add(observer) {

this.observers.push(observer);

}

// 删除...

remove(observer) {

let idx = this.observers.findIndex(item => item === observer);

idx > -1 && this.observers.splice(idx, 1);

}

// 通知

notify() {

for(let o of this.observers) {

o.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();

优缺点:

优点明显:降低耦合,两者都专注于自身功能;

缺点也很明显:所有观察者都能收到通知,无法过滤筛选;

二、发布订阅模式(Publisher && Subscriber)

发布订阅模式:基于一个事件(主题)通道,希望接收通知的对象 Subscriber 通过自定义事件订阅主题,被激活事件的对象 Publisher 通过发布主题事件的方式通知各个订阅该主题的 Subscriber 对象。

发布订阅模式与观察者模式的不同,“第三者” (事件中心)出现。目标对象并不直接通知观察者,而是通过事件中心来派发通知。

例:

// 控制中心

let pubSub = {

list: {},

// 订阅

subscribe: function(key, fn) {

if (!this.list[key]) this.list[key] = [];

this.list[key].push(fn);

},

//取消订阅

unsubscribe: function(key, fn) {

let fnList = this.list[key];

if (!fnList) return false;

if (!fn) { // 不传入指定的方法,清空所用 key 下的订阅

fnList && (fnList.length = 0);

} else {

fnList.forEach((item, index) => {

item === fn && fnList.splice(index, 1);

});

}

},

// 发布

publish: function(key, ...args) {

for (let fn of this.list[key]) fn.call(this, ...args);

}

}

// 订阅

pubSub.subscribe('onwork', time => {

console.log(`上班了:${time}`);

})

pubSub.subscribe('offwork', time => {

console.log(`下班了:${time}`);

})

pubSub.subscribe('launch', time => {

console.log(`吃饭了:${time}`);

})

pubSub.subscribe('onwork', work => {

console.log(`上班了:${work}`);

})

// 发布

pubSub.publish('offwork', '18:00:00');

pubSub.publish('launch', '12:00:00');

// 取消订阅

pubSub.unsubscribe('onwork');

其实,严格来讲 DOM 的事件监听是“发布订阅模式”:

let loginBtn = document.getElementById('#loginBtn');

// 监听回调函数(指定事件)

function notifyClick() {

console.log('我被点击了');

}

// 添加事件监听

loginBtn.addEventListener('click', notifyClick);

// 触发点击, 事件中心派发指定事件

loginBtn.click();

// 取消事件监听

loginBtn.removeEventListener('click', notifyClick);

优缺点:

优点:解耦更好,细粒度更容易掌控;

缺点:不易阅读,额外对象创建,消耗时间和内存(很多设计模式的通病)

三、两种模式的关联和区别

发布订阅模式更灵活,是进阶版的观察者模式,指定对应分发。

观察者模式维护单一事件对应多个依赖该事件的对象关系;

发布订阅维护多个事件(主题)及依赖各事件(主题)的对象之间的关系;

观察者模式是目标对象直接触发通知(全部通知),观察对象被迫接收通知。发布订阅模式多了个中间层(事件中心),由其去管理通知广播(只通知订阅对应事件的对象);

观察者模式对象间依赖关系较强,发布订阅模式中对象之间实现真正的解耦。

1、本站所有资源来源于用户上传和网络,版权争议与本站无关,版权归原创者所有,如有侵权请邮件联系我们!
2、分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3、不得使用于非法商业用途,商用请购买正版,不得违反国家法律。否则后果自负!
4、本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5、如有链接无法下载、失效或广告,请联系管理员处理!
6、本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7、不保证所有资源都完整可用,不排除存在加密、BUG、需要授权或者残缺的可能,由于资源的特殊性,下载后一律不予退货!
8、本文来自炫客网搜集整理,如有侵权请联系管理员删除,转载请注明出处:https://www.xuankewang.com/2706.html

联系我们

173-662-005

在线咨询: QQ交谈

邮件:woowuo@126.com

工作时间:周一至周五,10:30-18:30,节假日休息

关注微信