ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue 发布订阅模式、Vue中自定义事件的实现机制

2021-08-06 21:05:34  阅读:196  来源: 互联网

标签:订阅 Vue subs 自定义 事件处理 eventType 事件


发布订阅模式和观察者模式

发布/订阅模式

  • 发布/订阅模式

    • 订阅者
    • 发布者
    • 信号中心

    我们假定,存在一个“信号中心”,某个任务执行完成,就向信号中心“发布”(publish)一个信号,其他任务可以向信号中心“订阅”(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式”(publish-subscribe patten)
    Vue中的自定义事件、Node中的事件机制都是基于发布/订阅模式的。

  • Vue的自定义事件
    ·- 通过$on注册事件,在特定的时间通过$emit触发事件

let vm = new Vue()
vm.$on('dataChange', () => {
 console.log('dataChange')
})
vm.$on('dataChange', () => {
 console.log('dataChange1')
})
vm.$emit('dataChange')
  • 兄弟组件通信过程
// eventBus.js
// 事件中心
let eventHub = new Vue()
// ComponentA.vue
// 发布者
addTodo: function () {
 // 发布消息(事件)
 eventHub.$emit('add-todo', { text: this.newTodoText })
 this.newTodoText = ''
}
// ComponentB.vue
// 订阅者
created: function () {
 // 订阅消息(事件)
 eventHub.$on('add-todo', this.addTodo)
}

模拟 Vue 自定义事件的实现

  • 分析$on内部是如何工作的:

$on仅仅是用来注册事件,事件处理函数还没有执行,所以在vm里面需要定义一个内部的变量来存储注册的事件名称以及事件处理函数。注册事件的时候可以给注册多个事件名称,也可以给同一个事件注册多个事件处理函数。存储事件的时候,要记录所有的事件名称以及对应的处理函数,也就是键值对的形式,所以vm内部定义的这个变量是对象的形式。
这个对象应该长这样,暂且称之为事件存储对象:{ 'click': [fn1, fn2], 'change': [fn] }
键:事件名称,值:一个数组,存储事件对应的所有事件处理函数

  • $emit内部是如何工作的:

$emit用来触发事件,它有一个参数,这个参数就是事件名称,在 $emit内部会通过事件名称,到上述vm里定义的事件存储对象里面找对象的属性,获取到对象的事件处理函数,然后依次执行。

为了简化过程这里不考虑事件处理函数具有参数的情况

  • 实现代码
<!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>Document</title>
</head>

<body>
    <script>
        // 事件触发器
        class EventEmitter {
            constructor() {
                // { eventType: [ handler1, handler2 ] } => { 'click': [fn1, fn2], 'change': [fn] }
                // Object.create方式创建对象,接收一个参数用来设置对象的原型,传Null 这里的对象不需要原型(可以提升性能)
                this.subs = Object.create(null);
            }
            // 注册事件 - 订阅通知
            $on(eventType, handler) {
                // 往subs对象里存储事件名称和事件处理函数
                this.subs[eventType] = this.subs[eventType] || []
                this.subs[eventType].push(handler)
            }
            // 触发事件 - 发布通知
            $emit(eventType) {
                /**
                 * 根据事件名称,到subs对象中找是否有这个事件,即是否注册了这个事件
                 * 如果有,则遍历事件处理函数的数组,依次执行事件处理函数
                 * 如果没有,则什么都不去要做
                 * */
                if (this.subs[eventType]) {
                    this.subs[eventType].forEach(handler => {
                        handler()
                    })
                }
            }
        }
        // 测试
        var bus = new EventEmitter()
        // 注册事件
        bus.$on('click', function () {
            console.log('click')
        })
        bus.$on('click', function () {
            console.log('click1')
        })
        // 触发事件
        bus.$emit('click')
    </script>
</body>

</html>

在这里插入图片描述

总结

上面的代码是模拟Vue中自定义事件的实现机制,并没有体现发布者和订阅者,只体现了事件中心,发布者/订阅者可以通过Vue兄弟组件船只的方式来体会

标签:订阅,Vue,subs,自定义,事件处理,eventType,事件
来源: https://blog.csdn.net/qq_39357822/article/details/119427328

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有