发布订阅模式仿写Vue事件监听手写js实现

「爱情、让人受尽委屈。」 2022-11-18 15:50 126阅读 0赞

Vue组件中，可以使用 `$emit`，`$on`，`$off` 分别来分发、监听、取消监听事件实现组件通信，比较方便；

最近空闲时间手撸代码实现了发布订阅模式，可以进行组件通信。

话不多说，直接上代码

/**
     * Created by laichengliang on 2021/04/13.
     */
    
    const center = {}
    
    // 事件监听
    center.on = (eventName, callback) => {
      if (!center[eventName]) center[eventName] = []
      // 保存回调函数
      center[eventName].push(callback)
    }
    
    // 事件触发
    center.emit = (eventName, params) => {
      // 取出对应事件的回调函数
      const callbackArr = center[eventName]
      // 一一调用每一个回调事件
      callbackArr.map(callback => callback(params))
    }
    
    // 事件移除
    center.off = (eventName, callback) => {
      // 情况1：只传eventName，移除所有事件
      // 情况2：传eventName和callback
      if (!callback) {
        center[eventName] = null
      } else {
        const callbackArr = center[eventName]
        // 删除指定的callback回调
        const result = callbackArr.filter(callbackItem => callback !== callbackItem)
        // 重新赋值
        center[eventName] = result
      }
    }
    
    export default center

发表评论取消回复

表情：

评论列表（有 0 条评论，126人围观）

还没有评论，来说两句吧...

相关阅读

相关 js仿写日历

项目需求，页面展示当前月的日历，每天的框里面放上用电量，可以按月查询，日历展示如下： ![在这里插入图片描述][20200514171354586.png] ![在这里插

骑猪看日落/ 2023年03月12日 09:10/ 0 赞/ 133 阅读

相关 JS手写instanceof实现方式

// 使用方式 function Car(color) { this.color = color this.sayColor

桃扇骨/ 2022年12月27日 08:18/ 0 赞/ 205 阅读

相关手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - Vue.js 基础回顾

Vue.js 基础回顾阶段内容 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

柔光的暖阳◎/ 2022年12月27日 04:40/ 0 赞/ 139 阅读

相关发布订阅模式仿写Vue事件监听手写js实现

Vue组件中，可以使用 `$emit`，`$on`，`$off` 分别来分发、监听、取消监听事件实现组件通信，比较方便；最近空闲时间手撸代码实现了发布订阅模式，可以进行组件

「爱情、让人受尽委屈。」/ 2022年11月18日 15:50/ 0 赞/ 127 阅读

相关 JS设计模式:发布订阅模式

发布订阅模式 // 发布订阅模式 // 灵感来源于 DOM2级事件绑定 // 可以给元素的事件行为，绑定多个不同的方法[事件池机制] //

落日映苍穹つ/ 2022年11月06日 12:50/ 0 赞/ 198 阅读

相关 JS 手写 apply( )

JS 手写 apply( ) <!DOCTYPE html> <html lang="en"> <head>

妖狐艹你老母/ 2022年10月31日 12:23/ 0 赞/ 223 阅读

相关 js 发布-订阅者模式

/ 发布-订阅模式 bw 2020/07/29 / const Event = { regsiter:{},

た入场券/ 2022年10月31日 10:57/ 0 赞/ 185 阅读

相关 js 发布订阅模式应用场景自己手写一个简易的发布订阅模块

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

矫情吗；*/ 2022年10月04日 15:46/ 0 赞/ 206 阅读

相关手写JS实现Promise

Promise是一个管理异步编程的方案，它是一个构造函数，每次使用可用new创建实例；它有三种状态：pending、fulfilled和rejected，这三种状态不会受...

朱雀/ 2020年05月10日 16:26/ 0 赞/ 944 阅读

相关手写JS实现Promise

Promise是一个管理异步编程的方案，它是一个构造函数，每次使用可用new创建实例；它有三种状态：pending、fulfilled和rejected，这三种状态不会受...

朱雀/ 2020年05月07日 09:18/ 0 赞/ 900 阅读