了解一下Vue - [Vue是怎么通过Event Bus实现组件通讯的]

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

写在前面:本文为个人在日常工作和学习中的一些总结,便于后来查漏补缺,非权威性资料,请带着自己的思考^-^。

Vue的组件通讯场景

  1. 父子组件通讯,使用props or 回调函数
  2. 状态较多、复杂,项目比较繁杂, 使用vuex or mobx 等状态管理工具
  3. 非父子组件,使用Event Bus

Event Bus使用的简单回顾

在日常开发中有关Event Bus我们是怎么用的呢?

// Vue instance
export default new Vue()

// component A
...
import EventBus from 'Vue instance'

...
methods: {
    fn() {}
},
created() {
    EventBus.$on('test', fn)
}
...

component B
import EventBus from 'Vue instance'
...
methods: {
    handleSomething() {
        EventBus.$emit('test', /* some params */)
    }
}
...

下面循着这个使用形式,尝试去实现一下

基本功能

Event Bus的基本功能无非是发布订阅模式的一种应用

class Event {
    constructor() {
        this._events = new Map();
    }
    $on(type, fn) {
        let handlers = [fn]
        if (this._events.has(type)) {
           handlers = this._events.get(type).concat(handlers)
        }
        this._events.set(type, handlers)
    }
    $emit(type, ...args) {
        const fns = this._events.get(type)
        if (!fns) return
        for(let i = 0; i < fns.length; i++) {
            fns[i].apply(this, args)
        }
    }
}

一个简单的发布/订阅类,测试一下

function testFn(a) {
    console.log(a)
}

const emitter = new Event()
emitter.$on('test', testFn) // 订阅'test'事件
emitter.$emit('test', 'cont') // 发布'test'事件

结果打印 'cont', 表明已经正常工作

多个监听者呢?

function testFn1(a) {
    console.log('1' + a)
}

function testFn2(a) {
    console.log('2' + a)
}

emitter.$on('test', testFn1)
emitter.$on('test1', testFn2)
emitter.$emit('test', '1')
emitter.$emit('test1', '2')

结果也可以正常运行

至此,表明该事件类可以支持多个事件监听,也可以支持一个事件多个监听者函数

移除监听者函数

接下来更新一下需求: Event类允许移除之前添加的某一个监听者

class Event{
    constructor() {
        ...
    }
    
    ...
    
    $off(type, fn) {
        if (this._events.has(type)) {
            if (!fn) { // 如果没有指定监听者函数,我们认为想要移除所有的type事件的监听者函数
                this._events.delete(type)
            } else { // 移除事件的fn监听者函数
                const handlers = this._events.get(type)
                const position = handlers.findIndex(_ => _ === fn)
                handlers.splice(position, 1)
                this._events.set(type, handlers)
            }
        }
    }
}

之前我们在'test'事件中绑定了2个监听者函数testFn 和 testFn1,现在试着解除一个testFn1

emitter.$off('test', testFn1)
emitter.$emit('test', 'z')

发现现在就只执行了testFn这个监听者函数
注: 匿名函数作为监听者函数是不能被移除的

只监听一次的情况

某些场景,我们希望对某个事件的触发只做出一次响应,此时可以通过包装监听者函数,当监听者函数在执行后便进行$off操作,解绑事件

...
$once(type, fn) {
    const me = this
    function on(...args) {
        me.$off(type, on)
        fn.apply(me, args)
    }
    this.$on(type, on)
}
...

一点问题

在现有代码的基础上如果这样会怎么样呢?

function fn(a) {
    console.log(a)
}
emitter.$on('ev', fn)
emitter.$on('ev', fn)

结果是fn函数会被执行2次,也就是说现在同一个事件,相同的监听者函数可以重复进行添加
这是不是问题呢? 视场景而定吧。。。

最终完整代码

class Event {
    constructor() {
        this._events = new Map();
    }
    $on(type, fn) {
        let handlers = [fn]
        if (this._events.has(type)) {
           handlers = this._events.get(type).concat(handlers)
        }
        this._events.set(type, handlers)
    }
    $off(type, fn) {
        if (this._events.has(type)) {
            if (!fn) { // 如果没有指定监听者函数,我们认为想要移除所有的type事件的监听者函数
                this._events.delete(type)
            } else { // 移除事件的fn监听者函数
                const handlers = this._events.get(type)
                const position = handlers.findIndex(_ => _ === fn)
                handlers.splice(position, 1)
                this._events.set(type, handlers)
            }
        }
    }
    $once(type, fn) {
        const me = this
        function on(...args) {
            me.$off(type, on)
            fn.apply(me, args)
        }
        this.$on(type, on)
    }
    $emit(type, ...args) {
        const fns = this._events.get(type)
        if (!fns) return
        for(let i = 0; i < fns.length; i++) {
            fns[i].apply(this, args)
        }
    }
}

总结

其实Vue中的Event Bus就是发布/订阅模式的一个应用

THE END

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看