1.什么是发布订阅模式

发布订阅模式定义了一种一对多的依赖关系，让多个订阅者对象同时监听某一个主题对象。这个主题对象在自身状态变化时，会通知所有订阅者对象，使它们能够自动更新自己的状态。（盗用一张图）

现实生活中有很多类似的例子，比如我最近在网上看上一双鞋子，联系到卖家后，这双鞋已经卖光了，于是问卖家什么时候有货，卖家告诉我，要等一个星期后才有货，可以收藏店铺，等有货的时候再通知，所以我收藏了此店铺，但与此同时，其他人等也喜欢这双鞋，也收藏了该店铺；等来货的时候就依次会通知他们。这就是简单的发布订阅。

指定发布者
给发布者添加一个缓存列表，用于存放回调函数以便通知订阅者
最后发布消息的时候，发布者遍历缓存列表，依次触发里面存放的订阅者回调函数

2.实现简单的发布订阅

先从dom绑定事件来说，一般一个事件绑定一个回调函数，但是也可以绑定多个回调函数。只不过方式不同,第二种就可以绑定多个。

dom.οnclick=function(){}
dom.addEventListener('click',()=>{})

实现简单的发布订阅

// 增加dep对象 用来收集依赖和触发依赖
const dep = {map: Object.create(null),// 收集collect(dataProp, updateFn) {if (!this.map[dataProp]) {this.map[dataProp] = []}this.map[dataProp].push(updateFn)},// 触发trigger(dataProp) {this.map[dataProp] && this.map[dataProp].forEach(updateFn => {updateFn()})}
}

3.收集更新函数

用于更新dom的更新函数集中起来

 // 编译函数function compile() {let app = document.getElementById('app')// 1.拿到app下所有的子元素const nodes = app.childNodes   //  [text, input, text]//2.遍历所有的子元素nodes.forEach(node => {// nodeType为1为元素节点if (node.nodeType === 1) {const attrs = node.attributes// 遍历所有的attrubites找到 v-modelArray.from(attrs).forEach(attr => {const dirName = attr.nodeNameconst dataProp = attr.nodeValueconsole.log(dirName, dataProp)if (dirName === 'v-text') {console.log(`更新了${dirName}指令,需要更新的属性为${dataProp}`)node.innerText = data[dataProp]// 收集更新函数dep.collect(dataProp, () => {node.innerText = data[dataProp]})}})}})}

4.触发更新函数

当属性变化时，通过属性找到对应的更新函数列表

function defineReactive(data, key, value) {Object.defineProperty(data, key, {get() {return value},set(newValue) {// 更新视图if (newValue === value) returnvalue = newValue// 再次编译要放到新值已经变化之后只更新当前的keydep.trigger(key)}})
}

5.总结

这是在vue框架之下的发布订阅，其原理中提到了几个专业名词

observe 对象指的是把数据处理成响应式的对象
watcher 指的其实就是数据变化之后的更新函数 (vue中的watcher有两种，一种是用来更新视图的watcher，一种是通过watch配置项声明的watcher)
dep 指的就是使用发布订阅实现的收集更新函数和触发更新函数的对象

发布订阅模式的本质是解决一对多的问题，在vue中实现数据变化之后的精准更新。

vue作者编程功力之深厚，运用之巧妙，令人叹服！！！！！！

前端Vue之发布订阅模式相关推荐

从发布-订阅模式到Vue响应系统
概念发布-订阅模式又称为观察者模式,它定义的是一种一对多的依赖关系,当一个状态发生改变的时候,所有以来这个状态的对象都会得到通知. 生活中的发布-订阅模式上面事发布-订阅模式的一个比较正式的解释, ...
发布订阅模式仿写Vue事件监听手写js实现
Vue组件中,可以使用 $emit,$on,$off 分别来分发.监听.取消监听事件实现组件通信,比较方便: 最近空闲时间手撸代码实现了发布订阅模式,可以进行组件通信. 话不多说,直接上代码 /*** ...
vue 发布订阅模式
vue 发布订阅模式为什么要使用发布订阅模式 vue 中数据反映到视图中的方式主要是采取声明式渲染+模板编译声明式渲染: 例如v-mdoe等指令的形式渲染模板编译原理: 简单来讲就是获取app下 ...
深入Vue原理_全面剖析发布订阅模式
文章目录发布订阅模式优化优化思路思考理解发布订阅模式(自定义事件) 收集更新函数触发更新函数 6.5 总结总结写在最后本期推荐欢迎各位小伙伴们! 为大家推荐一款刷题神奇哦点击链接访问 ...
Vue响应式原理探究之“发布-订阅”模式
前言在面试题中经常会出现与"发布订阅"模式相关的题目,比如考察我们对Vue响应式的理解,也会有题目直接考验我们对"发布订阅"模式或者观察者模式的理解,甚至还会 ...
vue发布订阅模式,发布订阅模型
1.什么是发布订阅模式 (又叫做观察者模式) 他定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于他的对象都将得到通知. 2.发布订阅模型 1.发布者会给订阅者提供一个方法以便 ...
发布订阅模式-前端设计模式
首先理解发布和订阅利用报刊的场景小时候,家里人有看报刊的习惯, 会和联系送报刊的人告诉他,我需要什么类型的报刊. - 这个可以被称为订阅接着报刊到了,送报刊的人,会把报刊送到我家.-这属于发 ...
Javascript设计模式之发布-订阅模式
简介发布-订阅模式又叫做观察者模式,他定义了一种一对多的依赖关系,即当一个对象的状态发生改变的时候,所有依赖他的对象都会得到通知. 回忆曾经作为一名前端开发人员,给DOM节点绑定事件可是再频繁不过 ...
发布订阅模式，在工作中它的能量超乎你的想象
不同的语言-相同的模式最近在看设计模式的知识,而且在工作当中,做一些打点需求的时候,正好直接利用了发布订阅模式去实现的,这让我对发布订阅这种设计模式更加的感兴趣了,于是借此机会也和大家说说这个好东东 ...

前端Vue之发布订阅模式