vue 发布订阅模式

为什么要使用发布订阅模式

vue 中数据反映到视图中的方式主要是采取声明式渲染+模板编译
声明式渲染： 例如v-mdoe等指令的形式渲染
模板编译原理：
简单来讲就是获取app下所有的childNodes
通过循环找到符合的元素节点，node.nodeType === 1
拿到所有元素节点的attributes属性，遍历attributes
其中包括了两个关键属性nodeName、nodeValue
其中nodeName 就是指令：例如v-mode， nodeValue就是v-mode绑定的值如 v-mode=“name” 中的name
nodeValue刚好就是data被绑定对象的key，如此 node.innerText = data[arrt.nodeValue] 就建立了连接。
以上有个缺点：多个标签都是用v-mode就会导致，暴力更新的问题，就是不管值有没有改变，统一都更新。
代码

 <div id="app"><!-- <input id="input" v-mode="inputVal" /> --><span v-mode="inputVal"></span> <br /><span v-mode="inputVal"></span> <br /><span v-mode="inputVal"></span> <br /><span v-mode="inputVal"></span><br /><span v-mode="age"></span><br /></div>let data = {inputVal: 'vue发布订阅模式',age: 15,}// 数据代理const proxyReative = (data) => {observe(data)return new Proxy(data, {get(target, key) {return target[key]},set(target, key, newVal) {if (target[key] === newVal) returntarget[key] = newVal// 执行更新compile()},})}const observe = (data) => {Object.keys(data).forEach((key) => {if (typeof data[key] === 'object') {data[key] = proxyReative(data[key])}})}const vm = proxyReative(data)// 模板编译const compile = () => {const appRef = document.getElementById('app')const childNodes = appRef.childNodeschildNodes.forEach((node) => {// 1 元素节点     3 文本节点if (node.nodeType === 1) {const arrts = node.attributesArray.from(arrts).forEach((arrt) => {if (arrt.nodeName === 'v-mode') {// 初次渲染赋值node.innerText = data[arrt.nodeValue]}})}})}

问题展示

虽然我们只是更新了age的值但由于元素绑定的都是v-mode下面代码会执行，所以都会执行更新操作

if (arrt.nodeName === 'v-mode') {// 初次渲染赋值node.innerText = data[arrt.nodeValue]}

解决暴力更新的问题 — 发布订阅模式

发布订阅模式的核心就是一对多的关系，一个发布者发起事件，所有的订阅者都会执行。
利用这个特性，给每一个v-mode在进行细化，只有v-mode且v-mode=“age”的才进行更新操作
代码

// 发布订阅模式const Dep = {map: {},// 收集事件 eventName:inputVal或者age// 形成的结构 /**map:age: [ƒ]inputVal: Array(4)0: () => {…}1: () => {…}2: () => {…}3: () => {…}*/collect(eventName, callback) {if (!this.map[eventName]) this.map[eventName] = []this.map[eventName].push(callback)},// 触发事件 只有key 对应的才触发回调事件trigger(nodeName) {this.map[nodeName].forEach((callback) => {callback()})},}console.log(Dep)

最终结果

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>发布订阅模式</title></head><body><div id="app"><span v-mode="inputVal"></span> <br /><span v-mode="inputVal"></span> <br /><span v-mode="inputVal"></span> <br /><span v-mode="inputVal"></span><br /><span v-mode="age"></span><br /></div></body><script>/*关键就是一个一对多的关系 */let data = {inputVal: 'vue发布订阅模式',age: 15,}// 数据代理const proxyReative = (data) => {observe(data)return new Proxy(data, {get(target, key) {return target[key]},set(target, key, newVal) {if (target[key] === newVal) returntarget[key] = newVal// compile()// 执行更新Dep.trigger(key)},})}const observe = (data) => {Object.keys(data).forEach((key) => {if (typeof data[key] === 'object') {data[key] = proxyReative(data[key])}})}const vm = proxyReative(data)// 发布订阅模式const Dep = {map: {},collect(eventName, callback) {if (!this.map[eventName]) this.map[eventName] = []this.map[eventName].push(callback)},trigger(nodeName) {this.map[nodeName].forEach((callback) => {callback()})},}console.log(Dep)// 模板编译const compile = () => {const appRef = document.getElementById('app')// const inputRef = document.getElementById('input')const childNodes = appRef.childNodeschildNodes.forEach((node) => {// 1 元素节点     3 文本节点if (node.nodeType === 1) {const arrts = node.attributesArray.from(arrts).forEach((arrt) => {if (arrt.nodeName === 'v-mode') {// 初次渲染赋值node.innerText = data[arrt.nodeValue]// 后续更新赋值 收集更新函数Dep.collect(arrt.nodeValue, () => {console.log('更新了', arrt.nodeValue)node.innerText = data[arrt.nodeValue]})}})}})}compile()</script>
</html>

vue 发布订阅模式相关推荐

vue发布订阅模式,发布订阅模型
1.什么是发布订阅模式 (又叫做观察者模式) 他定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于他的对象都将得到通知. 2.发布订阅模型 1.发布者会给订阅者提供一个方法以便 ...
发布订阅模式仿写Vue事件监听手写js实现
Vue组件中,可以使用 $emit,$on,$off 分别来分发.监听.取消监听事件实现组件通信,比较方便: 最近空闲时间手撸代码实现了发布订阅模式,可以进行组件通信. 话不多说,直接上代码 /*** ...
从发布-订阅模式到Vue响应系统
概念发布-订阅模式又称为观察者模式,它定义的是一种一对多的依赖关系,当一个状态发生改变的时候,所有以来这个状态的对象都会得到通知. 生活中的发布-订阅模式上面事发布-订阅模式的一个比较正式的解释, ...
前端Vue之发布订阅模式
目录 1.什么是发布订阅模式 2.实现简单的发布订阅 3.收集更新函数 4.触发更新函数 5.总结一个响应式数据可能会有多个视图部分都需要依赖,也就是响应式数据变化之后,需要执行的更新函数可能不止一 ...
深入Vue原理_全面剖析发布订阅模式
文章目录发布订阅模式优化优化思路思考理解发布订阅模式(自定义事件) 收集更新函数触发更新函数 6.5 总结总结写在最后本期推荐欢迎各位小伙伴们! 为大家推荐一款刷题神奇哦点击链接访问 ...
Vue响应式原理探究之“发布-订阅”模式
前言在面试题中经常会出现与"发布订阅"模式相关的题目,比如考察我们对Vue响应式的理解,也会有题目直接考验我们对"发布订阅"模式或者观察者模式的理解,甚至还会 ...
JavaScript 发布-订阅模式
发布-订阅模式,看似陌生,其实不然.工作中经常会用到,例如 Node.js EventEmitter 中的 on 和 emit 方法:Vue 中的 $on 和 $emit 方法.他们都使用了发布-订阅 ...
JavaScript中发布/订阅模式的理解
订阅发布模式的介绍发布订阅模式,它定义了一种一对多的关系,可以使多个观察者对象对一个主题对象进行监听,当这个主题对象发生改变时,依赖的所有对象都会被通知到. 在生活中我们常常遇到这样一种情况,我们在 ...
设计模式-发布订阅模式
这段时间在看vue的双向绑定原理,知道了vue的核心三大件:Observer, Complie, Watcher. Observer用于监听属性的变化,如有变动就通知 Watcher. Compile ...

vue 发布订阅模式

vue 发布订阅模式

为什么要使用发布订阅模式

问题展示

解决暴力更新的问题 — 发布订阅模式

最终结果

完整代码

vue 发布订阅模式相关推荐

最新文章

热门文章