总是把这两个当作同一个模式,但其实是不太一样的,现在重温一下。
观察者直接订阅目标,当目标触发事件时,通知观察者进行更新
简单实现
class observer { constructor(name) { this.name = name; } update() { console.log(`${this.name} update`) } } class subject { constructor() { this.subs = []; } add(observer) { this.subs.push(observer); } notify() { this.subs.foreach(item => { item.update(); }); } } const sub = new subject(); const ob1 = new observer('ob1'); const ob2 = new observer('ob2'); // 观察者订阅目标 sub.add(ob1); sub.add(ob2); // 目标触发事件 sub.notify();
发布订阅模式通过一个调度中心进行处理,使得订阅者和发布者分离开来,互不干扰。
简单实现
class event { constructor() { this.lists = new map(); } on(type, fn) { if (!this.lists.get(type)) { this.lists.set(type, []); } this.lists.get(type).push(fn); } emit(type, ...args) { const arr = this.lists.get(type); arr && arr.foreach(fn => { fn.apply(null, args); }); } } const ev = new event(); // 订阅 ev.on('msg', (msg) => console.log(msg)); // 发布 ev.emit('msg', '发布');
其实这两个模式可以说是同一种设计模式的不同实现。
观察者模式是观察者和目标直接进行交互,有耦合性,而发布订阅模式则是通过一个调度中心进行处理,订阅者和发布者互不干扰,进行了解耦。
如对本文有疑问, 点击进行留言回复!!
Android 入门第七讲01-数据存储(数据存储概述,文件存储(raw和asserts目录读写,data/data/包名目录读写,sdcard目录读写),SharedPreferences读写)
vue-axios系列:axios拦截器,配置请求头,配置请求参数
Vuejs 针对 安卓低版本 、ios9.x 不兼容 ES6语法导致失效解决方法
网友评论