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

一、观察者模式(observer)

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

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

列:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
// 目标者(主题) class Subject { constructor() { this.observers = []; // 观察者列表 } // 添加订阅者 add(observer) { this.observers.push(observer); } // 删除订阅者 remove(observer) { const idx = this.observers.findIndex(item => item === observer); if (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); } } // 实例化目标者 const subject = new Subject(); // 实例化两个观察者 const obs1 = new Observer('vue') const obs2 = new Observer('react') // 向目标者添加观察者 subject.add(obs1) subject.add(obs2) subject.notify()

优缺点:
  优点明显:降低耦合,两者都专注于自身功能;
  缺点也很明显:所有观察者都能收到通知,无法过滤筛选;

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

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

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

列:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
// 控制中心 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 的事件监听是“发布订阅模式”:

1234567891011121314
let loginBtn = document.getElementById('#loginBtn'); // 监听回调函数(指定事件) function notifyClick() { console.log('我被点击了'); } // 添加事件监听 loginBtn.addEventListener('click', notifyClick); // 触发点击, 事件中心派发指定事件 loginBtn.click(); // 取消事件监听 loginBtn.removeEventListener('click', notifyClick);

优缺点:
  优点:解耦更好,细粒度更容易掌控;
  缺点:不易阅读,额外对象创建,消耗时间和内存(很多设计模式的通病);

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

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

  1. 观察者模式维护单一事件对应多个依赖该事件的对象关系;
  2. 发布订阅维护多个事件(主题)及依赖各事件(主题)的对象之间的关系;
  3. 观察者模式是目标对象直接触发通知(全部通知),观察对象被迫接收通知。发布订阅模式多了个中间层(事件中心),由其去管理通知广播(只通知订阅对应事件的对象);
  4. 观察者模式对象间依赖关系较强,发布订阅模式中对象之间实现真正的解耦。

转载:js - 观察者模式与订阅发布模式

公共组件库(持续更新)
luoqiangweb开发China
文章21
分类10
标签5