实现一个事件总线(vue.prototype.$bus)?

news/2024/7/19 14:29:45 标签: 设计模式, js

img

本质就是一个订阅发布模式的实现。

  • 维护一个cache数组,即订阅者数组
  • 实现on函数,即增加订阅者
  • 实现off函数,即取消订阅
  • 实现emit函数,即发布消息,通知订阅中心有更新
js">class EventBus {
    constructor() {
        this.cache = {};
    }
    on(name, fn) {
        if (this.cache[name]) {
            this.cache[name].push(fn);
        } else {
            this.cache[name] = [fn];
        }
    }
    off(name, fn) {
        const tasks = this.cache[name];
        if (tasks) {
            const index = tasks.findIndex((f) =>
                f === fn || f.callback === fn
            )
            if (index >= 0) {
                tasks.splice(index, 1);
            }
        }
    }

    emit(name) {
        if (this.cache[name]) {
            // 创建副本,如果回调函数内继续注册相同事件,会造成死循环
            const tasks = this.cache[name].slice()
            for (let fn of tasks) {
                fn();
            }
        }
    }

    emit(name, once = false) {
        if (this.cache[name]) {
            // 创建副本,如果回调函数内继续注册相同事件,会造成死循环
            const tasks = this.cache[name].slice()
            for (let fn of tasks) {
                fn();
            }

            if (once) {
                delete this.cache[name]
            }
        }
    }
}


const eventBus = new EventBus()
const task1 = () => { console.log('task1'); }
const task2 = () => { console.log('task2'); }
eventBus.on('task', task1)
eventBus.on('task', task2)

setTimeout(() => {
    eventBus.emit('task')
  }, 1000)

更多详情可以看我博客的另一篇笔记:《设计模式之观察者模式——Js实现》


http://www.niftyadmin.cn/n/555208.html

相关文章

项目使用sqlite

1.sqlite语法学习 官网:https://www.sqlite.org/index.html 菜鸟教程:https://www.runoob.com/sqlite/sqlite-tutorial.html 2.sqlite的封装 module.exports {DBName: name,DBPath: c/path,/*** 打开数据库*/openDB: function() { // 打开数据库retu…

margin为负值怎么解释?

文章目录前言margin四值顺序margin表现margin为负值1.margin-left,margin-right为负值元素本身没有宽度元素本身有宽度2.margin-top为负值3.margin-bottom为负值前言 margin设置为负值往往用于实现双飞翼布局、圣杯布局中。我本人对这些布局实现的原理还有点懵,故整…

Java的AOP介绍

1.概念 AOP是Aspect Oriented Programming的缩写,意思是面向方面编程,与OOP(Object Oriented Programming)面向对象编程对等,都是一种编程思想。从OOP角度分析,我们关注业务的处理逻辑,是属于纵向的行为,从…

一文带你彻底弄懂BFC(块级格式上下文)

文章目录BFC的布局规则形成BFC的条件BFC的作用BFC特性详解特性一特性二特性三特性四特性五特性六BFC应用场景自适应两栏布局清除浮动margin重叠先说说FC,FC的含义就是Fomatting Context。它是CSS2.1规范中的一个概念。它是页面中的一块渲染 区域,并且有一…

项目引入阿里图标库

1.上传图标 这一步一般由UI设计师完成,阿里巴巴图标库官网:https://www.iconfont.cn/ 注意:以后每次上传完新的图标,网站上的内容都要更新,然后重新下载文件覆盖 2.下载到本地 本地在common文件夹下新建icon文件…

团队作业(二):项目选题

博客链接http://www.cnblogs.com/yikesaiing/p/9034177.html 码云链接转载于:https://www.cnblogs.com/yikesaiing/p/9033987.html

原生JS实现拖拽

文章目录思路注意要点进阶实现回放拖拽轨迹实现倒放拖拽轨迹实现效果完整代码思路 被拖拽的元素eDrag要使用绝对定位,脱离文档流才可以移动。 鼠标点击:isDragged(当前eDrag是否被拖拽的标识)设置为true,a 获取当前鼠…

uni-app横屏设置

1.官网全局设置 https://uniapp.dcloud.io/collocation/pages?idglobalstyle "globalStyle": {"pageOrientation": "auto" }2.某个页面横竖屏设置 在manifest.json中添加配置: "orientation" : [// 竖屏正方向"p…