这是我参与8月更文挑战的第28天，活动详情查看：8月更文挑战
观察者模式
- 观察者模式，通常也被叫做 发布-订阅模式 或者 消息模式
- 英文名称叫做 Observer
- 官方解释： 当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新，解决了主体对象与观察者之间功能的耦合，即一个对象状态改变给其他对象通知的问题
- 听起来很迷糊，但是其实没有很难
一个例子
- 当你想去书店买书，但是恰巧今天你要买的书没有了
- 我们又不能总在书店等着，就把我们的手机留给店员
- 当你需要的书到了的时候，他会打电话通知你，你去买了就好了
- 你买到数了以后，就告诉他，我买到了，那么以后再来了书就不会通知你了
addEventListener
- 上面的例子可能还不是很明确
- 但是 addEventListener 是一个我们都用过的东西
- 这个东西其实就是一个标准的 观察者模式
btn.addEventListener('click', function () { console.log('btn 被点击了') })
-
- 上面这个就是有一个 无形的观察者 再观察着 btn 的一举一动
- 当这个 btn 被点击的时候，就会执行 对应的函数
- 我们也可以多绑定几个函数
- 说白了： 观察者模式就是我们自己实现一个 addEventListener 的功能
-
- 只不过 addEventListaner 只有固定的一些事件，而且只能给 dom 元素绑定
- 而我们自己写的可以随便绑定一个事件名称，自己选择触发时机而已
书写代码
- 首先我们分析功能
-
- 我们要有一个观察者（这里抽象为一个对象 {}）
- 需要有一个属性，存放消息的盒子（把你绑定的所有事件放在里面）
- 需要一个 on 方法，用于添加事件
- 需要一个 emit 方法，用于发布事件（触发）
- 需要一个 off 方法，把已经添加的方法取消
const observer = {
message: {},
on: function () {},
emit: function () {},
off: function () {}
}
-
- 我们把它写成一个构造函数的形式
class Observer {
constructor () {
this.message = {}
}
on () {}
emit () {}
off () {}
}
-
- 现在，一个观察者的雏形就出来了
- 接下来完善方法就可以了
ON
- 先来写 ON 方法
- 添加一个事件
- 我们的 on 方法需要接受 两个参数
-
- 事件类型
- 事件处理函数
class Observer {
constructor () {
this.message = {}
}
on (type, fn) {
// 判断消息盒子里面有没有设置事件类型
if (!this.message[type]) {
// 证明消息盒子里面没有这个事件类型
// 那么我们直接添加进去
// 并且让他的值是一个数组，再数组里面放上事件处理函数
this.message[type] = [fn] } else {
// 证明消息盒子里面有这个事件类型
// 那么我们直接向数组里面追加事件处理函数就行了
this.message[type].push(fn)
}
}
emit () {}
off () {}
}
