问：观察者模式和发布订阅模式的有什么区别？
答：https://juejin.im/post/5a14e9...
Google一下，相信都会有满屏的结果告诉你什么是发布订阅模式，但还是希望自己通过一些例子融入去实现.
概念理解：
① - 创建一个对象subscribers存储所有订阅者与其fn.
② - 调用添加订阅者函数时入参有(key,fn)，将其存储到subscribers.
subscribers[key].push(fn);③ - 调用发布订阅信息函数时再根据入参key，找到subscribers中对应的订阅者并调用该数组下的所有fn.
④ - 取消订阅很简单，根据key在subscribers找到对应的订阅者删除即可.
一、Just Do It
实现功能：
- 输入订阅者名称点击添加订阅者，已订阅用户列表添加一名订阅者，并附带取消订阅按钮
- 输入发布内容，点击发布给所有订阅者，用户列表所有订阅者接收显示一条新内容
- 输入发布内容，点击发布给指定订阅者，指定的订阅者接收显示一条新内容
- 点击取消订阅，删除对应订阅者信息
二、实现发布订阅Class
① - 添加订阅调用subscribe，以key为键名存储订阅者，fn为值存储回调函数.
② - 发布调用publish根据key找到对应的订阅者并调用其回调函数.
③ - key等于all则发布给所有订阅者
④ - 取消订阅调用cancelSubscribe，根据key删除对应订阅者
<font color="orange">--- Code Example ---</font>
class SubscribePublish { subs = {}; //存储订阅者 // 添加订阅 subscribe(key, fn) { if (!this.subs[key]) this.subs[key] = []; this.subs[key].push(fn) console.log(key,'-----添加订阅-----'); } // 发布订阅消息 publish(key,params) { // 1.发布给所有订阅者 if(key === 'all'){ let allKey = Object.keys(this.subs); allKey.forEach(key=>{ this.runCallback(this.subs[key],params); }) return; } // 2.发布给指定订阅者 this.runCallback(this.subs[key],params); console.log(key,'-----发布订阅消息-----'); } // 执行订阅函数 runCallback(subs,params){ if (!Array.isArray(subs) || subs.length <= 0) return false; let len = subs.length; while (len--) { subs[len].call(this, params); } } // 取消订阅 cancelSubscribe(key){ if(this.subs[key]){ delete this.subs[key]; } console.log(this.subs,'-----取消订阅-----'); } }三、功能实现阐述
// 实例化发布订阅Classconst subEvent = new SubscribePublish();3.1 点击添加订阅
① - 获取input输入的订阅者名称，创建一个li+button标签 Dom元素并添加class以订阅者名称作为类名. (button=取消订阅按钮 & li=已订阅用户列表item)
② - 调用subEvent.subscribe(key,fn)添加订阅者，入参key=input输入的订阅者名称 & fn=发布时调用的回调函数.
③ - 通过fn回调获取到公众号发布的内容，创建一个p标签dom元素显示发布内容.
3.2 点击给（所有|指定）订阅者发布
① - 发布订阅只需要获取公众号发布的内容，点击时区分指定|所有调用subEvent.publish(key,content)，publish会根据key值触发对应订阅者的回调函数.
② - 入参说明：
- key=all 发布订阅信息给所有订阅者
- key=name 发布给name订阅者
- content 要发布的内容
3.3 点击取消订阅
① - 3.1的时候，在添加订阅者时已经创建了一个button按钮，那么在创建的时候就已经添加了click事件监听.
② - 当点击取消订阅的时候，调用subEvent.cancelSubscribe(key)删除对应订阅者并根据订阅者名称查找对应class类名的li标签将其Dom节点删除.
☺-End-☺
完整代码URL：
https://github.com/SmallFish-...
本文完 - 感谢阅读.