精华内容
下载资源
问答
  • 主要介绍了Vue发布订阅模式实现过程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • vue发布订阅模式封装

    2019-11-01 17:21:57
    /* $on("event",fn); $emit("event",parms...) $off("event") 事件的所抛发的函数全部关掉 $off("event",fn) 关掉事件所抛发的发你函数 */ ...const eventList = {};...const $on = (eventName, eventFunction) =&...
    
    /* 
        $on("event",fn);
        $emit("event",parms...)
    
        $off("event") 事件的所抛发的函数全部关掉
        $off("event",fn)  关掉事件所抛发的发你函数
    
    */
    
    
    const eventList = {};
    
    const $on = (eventName, eventFunction) => {
        if (!eventList[eventName]) {
            eventList[eventName] = []
        }
        eventList[eventName].push(eventFunction)
    }
    
    const $emit = (eventName, ...params) => {
        if (eventList[eventName]) {
            let arr = eventList[eventName];
            arr.forEach(eventFunction => {
                eventFunction(...params)
            });
        }
    }
    
    const $off = (eventName, eventFunction) => {
        if (eventList[eventName]) {
           
    
            if (eventFunction) {
                let flag = eventList[eventName].includes(eventFunction);
                if(flag){
                    let index = eventList[eventName].indexOf(eventFunction)
                    eventList[eventName].splice(index, 1);
                }
            } else {
                eventList[eventName].length = 0;
            }
    
    
        }
    }
    
    
    
    $on("sss", fn1);
    $off("sss");
    $emit("sss", 1, 2, 3);
    function fn1(a, b, c) {
        console.log("fn1执行了");
        console.log(a, b)
    }
    
    展开全文
  • 发布 订阅模式 // 事件触发器 class EventEmitter { constructor () { // { 'click': [fn1, fn2], 'change': [fn] } this.subs = Object.create(null) } // 注册事件 $on (eventType, handler) { ...

    发布 订阅模式

      // 事件触发器
        class EventEmitter {
          constructor () {
            // { 'click': [fn1, fn2], 'change': [fn] }
            this.subs = Object.create(null)
          }
    
          // 注册事件
          $on (eventType, handler) {
          	debugger
            this.subs[eventType] = this.subs[eventType] || []
            this.subs[eventType].push(handler)
            debugger
          }
    
          // 触发事件
          $emit (eventType) {
          	debugger
            if (this.subs[eventType]) {
            	debugger
              this.subs[eventType].forEach(handler => {
                handler()
                debugger
              })
            }
          }
        }
    
        // 测试
        let em = new EventEmitter()
        em.$on('click', () => {
          console.log('click1')
        })
        em.$on('click', () => {
          console.log('click2')
        })
        em.$on('fn', ()=> {
        	console.log('fn')
        })
        em.$emit('click')
        em.$emit('fn')
    

    观察者模式

        // 发布者-目标
        class Dep {
          constructor () {
            // 记录所有的订阅者
            this.subs = []
          }
          // 添加订阅者
          addSub (sub) {
            if (sub && sub.update) {
              this.subs.push(sub)
            }
          }
          // 发布通知
          notify () {
            this.subs.forEach(sub => {
              sub.update()
            })
          }
        }
        // 订阅者-观察者
        class Watcher {
          update () {
            console.log('update')
          }
        }
    
        // 测试
        let dep = new Dep()
        let watcher1 = new Watcher()
        let watcher2 = new Watcher()
        
        dep.addSub(watcher1)
        dep.addSub(watcher2)
        
        dep.notify()
    

    两者的区别
    在这里插入图片描述

    展开全文
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> function Dep(){ ... ...
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<script>
    			function Dep(){
    				this.fl = []
    			}
    			Dep.prototype.dingyue = function(watcher){
    				this.fl.push(watcher)
    			}
    			Dep.prototype.fabu = function(){
    				this.fl.forEach(item=>{
    					item.update()
    				})
    			}
    			
    			function Watcher(f){
    				this.f = f
    			}
    			Watcher.prototype.update = function(){
    				this.f()
    			}
    			let watcher = new Watcher(function(){
    				alert(1)
    			})
    			let watcher1 = new Watcher(function(){
    				alert(2)
    			})
    			let dep = new Dep()
    			dep.dingyue(watcher)
    			dep.dingyue(watcher1)
    			dep.fabu()
    			
    		</script>
    	</body>
    </html>
    
    
    展开全文
  • (3)Vue中的事件绑定就是发布订阅模式 (4) 观察者模式中观察者和被观察者是存在关联的。发布订阅模式中订阅者和发布者没有关联,所以观察者模式中包含了发布订阅模式(watcher和deep) 2、数据传递 /** *1....

    1、发布订阅模式

      (1)Vue 中观察者模式 和发布/订阅模式 的区别和场景

      (2)Vue 中响应式数据变化就是典型的观察者模式

      (3)Vue 中的事件绑定就是发布订阅模式

       (4) 观察者模式中 观察者和被观察者是存在关联的。发布订阅模式中 订阅者和发布者没有关联, 所以观察者模式中包含了发布订阅模式 (watcher和deep)



    2、数据传递

    /**

     * 1.vue是单向数据流

     * 2. Vue组件间传值的方式及之间的区别

     * 3.props和emit父组件向子组件传递数据是通过props传递的,子组件传递数据给父组件是通过$emit触发来做到的

     * 4.$parent,$children 获取父子组件的实例

     * 5. $attrs 和$listeners A->B->C。Vue 2.4开始提供了$attrs和$listeners来解决问题

     * 6.父组件中通过provide来提供变量,然后在子组件中通过inject来注入变量。

     * 7.$refs 获取实例

     * 8.eventBus 平级/跨级组件数据传递 这种情况可以使用中央事件总线的方式。

     * 9.Vuex状态管理

    */

    展开全文
  • vue中自定义事件,就是用了发布订阅模式,vm.$on通过自定义事件,事先订阅一件事,vm.$emit通过自定义事件发布消息,vm.$on会接收到。非父子组件数据传递,通常会用到这两个方法: 下边我们先来用js实现发布...
  • 发布订阅模式 $ 定义 基于一个自定义事件通道,收集与之相关的订阅成员,通过发布自定义事件的方式通知各个订阅成员。 $ Vue中的语法 // Vue 自定义事件 let vm = new Vue() // 注册事件(订阅消息) vm.$on('data...
  • vue发布订阅模式

    千次阅读 2020-01-13 10:54:07
    https://www.jianshu.com/p/2ec316ca0f8b
  • 发布订阅模式实现vue组件间通信 前几天遇到个问题,“发布订阅模式实现vue组件间通信”,当时没回答出来,之后通过查询一些资料学习了一下,因此在这里记录一下,也欢迎大家指正,(小白,请求轻喷) window.bus = {...
  • 比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学,可以把他类比于 watch 下面我们看一个例子 var observe={ fnsObj:{}, // 订阅方法 on:function(key,fn){ if(!observe.fnsObj[key]){ ...
  • vue非父子组件传值之发布订阅模式 目前了解的组件传值的几种方式 props 再熟悉不过了 vuex 也比较常用 evenbus 发布订阅 主要说一下发布订阅 Vue.prototype.bus = new Vue(); 其实优化一下,也可以这样 Vue....
  • 结合 Vue 源码谈谈发布-订阅模式

    千次阅读 2018-10-21 10:23:23
    发布订阅模式主要包含哪些内容呢? 发布函数,发布的时候执行相应的回调 订阅函数,添加订阅者,传入发布时要执行的函数,可能会携额外参数 一个缓存订阅者以及订阅者的回调函数的列表 取消订阅(需要分情况讨论) ...
  • 发布/订阅模式 发布/订阅模包含: 发布者 订阅者 信号中心 假设你要买房子,但是你有没有房源信息,那么你会找到谁?你肯定会去问房屋中介,那么这个房屋中介就是一个信号中心。那么这个房子的主人也就是房东是...
  • 发布订阅模式 目标: 解耦, 让各个模块之间没有紧密的联系 现在的处理办法是 属性在更新的 时候 调用 mountComponent 方法. 问题: mountComponent 更新的是什么??? (现在) 全部的页面 -> 当前虚拟 DOM 对应的页面 ...
  • Object.defineProperty发布订阅模式架构详解 1、 Object.defineProperty定义 Object.defineProperty(Object,prop,descriptor) 参数: obj:必需,目标对象 prop:必需,目标对象 需获取或者修改的属性的名字 ...
  • 当然Vue2.0提供了Vuex,但在简单的场景下,可以使用一个空的Vue实例作为中央事件总线。 参考:http://blog.csdn.net/u013034014/article/details/54574989?locationNum=2&amp;fps=1 例子:...
  • vue源码系列05_依赖收集dep.jswatcher.jsdefineReactive() 所谓依赖收集,就是在每个数据渲染更新的时候,给每个数据添加一个watcher监听类,当该数据发生变化时,用一个dep队列来实现收集这些watcher,最后统一渲染...
  • 发布/订阅模式 订阅者 发布者 信号中心 我们假定,存在一个“信号中心”,某个...常见的发布/订阅模式Vue 的自定义事件、node的事件处理机制。 let vm = new Vue() vm.$on('dataChange', () => { console.lo
  • // vue中数据劫持结合发布/订阅模式 class Observer { constructor (value) { this .value = value this .dep = new Dep() this .walk(value) } walk (obj) { const keys = Object ....
  • vue响应式依赖的两种技术: 1.Vue中修改数据,Vue内部是如何监听message数据的...继续上篇个人博客,实现下发布订阅模式发布订阅模式实现的时候有个坑:数组坍陷问题 这里采用es6的新语法封装发布订阅类,使用for...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,243
精华内容 497
关键字:

vue发布订阅模式

vue 订阅