Open lance10030 opened 6 years ago
提个小小的bug,fns = []
并不能清除所有事件的订阅,需要用this.cache[key] = []
来清除所有事件的callback。
//如果没有传入fn,那么就是取消所有该事件的订阅
if(!fn){
fns=[]
}else {
fns.forEach((item,index)=>{
if(item===fn){
fns.splice(index,1)
}
})
}
结合
Vue
源码谈谈发布-订阅模式最近的工作学习中接触到了发布-订阅模式。该思想编程中的应用也是很广泛的, 例如在
Vue
中也大量使用了该设计模式,所以会结合Vue的源码和大家谈谈自己粗浅的理解.发布订阅模式主要包含哪些内容呢?
这么看下来,其实就像
JavaScript
中的事件模型,我们在DOM节点上绑定事件函数,触发的时候执行就是应用了发布-订阅模式.我们先按照上面的内容自己实现一个
Observer
对象如下:为什么会使用发布订阅模式呢? 它的优点在于:
发布-订阅模式在
Vue
中的应用Vue
的实例方法中的应用:(当前版本:2.5.16)Vue
中还实现了vm.$once
(监听一次);以及vm.$off
(取消订阅) ,大家可以在同一文件中看一下是如何实现的.Vue
数据更新机制中的应用工作中小应用举例
redux
进行状态管理.但是在不同的组件(不限于父子组件)之间,存在相关联的异步操作.所以在wepy对象上挂载了一个本文最开始实现的Observer对象.作为部分组件之间通信的总线机制:要注意的点
当然,发布-订阅模式也是有缺点的.
当然设计模式的存在是帮助我们解决特定场景的问题的,学会在正确的场景中使用才是最重要的.
广而告之
本文发布于薄荷前端周刊,欢迎Watch & Star ★,转载请注明出处。
欢迎讨论,点个赞再走吧 。◕‿◕。 ~