资讯专栏INFORMATION COLUMN

自己简单写的 事件订阅机制

luck / 1244人阅读

我写的 简易的事件订触发。

    export  const Event = function () {
       // 类型
       this.typeList = {}
    }
    Event.prototype.on = function ({type, fn}){
        if (this.typeList.hasOwnProperty(type)) {
            this.typeList[type].push(fn)
        } else {
            this.typeList[type] = []
            this.typeList[type].push(fn)
        }
    }
    Event.prototype.off = function({type, fn})  {
       if (this.typeList.hasOwnProperty(type)) {
             let list = this.typeList[type]
          let index = list.indexOf(fn)
          if (index !== -1 ) {
                 list.splice(index, 1)
          }
          
       } else {
            console.warn("not has this type")
       }
    }
    Event.prototype.once = function ({type, fn}) {
       const fixFn = (value) => {
            fn.call(this, value)
            this.off({type, fn: fixFn})
       }
       this.on({type, fn: fixFn})
    }
    Event.prototype.trigger = function (type, value, context){
        context = context ? context : null    
        if (this.typeList.hasOwnProperty(type)) {
            this.typeList[type].forEach(fn => {
                fn.call(context, value)
            })
        }
    }

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93087.html

相关文章

  • Node 之 Event 模块

    摘要:为什么把叫做集合而不能称为严格意义上的对象,来看这个集合的构造函数可以见得,是与处于同一层级的而非是继承自,所以说由实例出来的对象更加的纯净,并没有诸如等方法,更像是一个集合。 写在前面 事件的编程方式具有轻量级、松耦合、只关注事务点等优势,在浏览器端,有着自己的一套DOM事件机制,其中含包括这诸如事件冒泡,事件捕获等;然而Node的事件机制没有事件冒泡等,其原理就是设计模式中的观察者...

    mrli2016 评论0 收藏0
  • JavaScript 工作原理之九-网页消息推送通知机制

    摘要:推送通知这一功能在移动端已经非常普遍。消息推送和通知消息推送和通知是两个不同的接口。消息通知网络应用中的服务工作线程或者脚本进行操作向用户显示消息通知。是消息推送服务之一。可以从对象的属性值获得处理消息推送的请求地址。 原文请查阅这里,略有删减,本文采用知识共享署名 4.0 国际许可协议共享,BY Troland。 本系列持续更新中,Github 地址请查阅这里。 这是 JavaScr...

    joyqi 评论0 收藏0
  • Redux入门0x101: 简介及`redux`简单实现

    摘要:在我看来它们的关系不会比共用开头更深了,所以我就重新开了一个头,但其实是基于前面写的资源中文文档英文文档官方视频学习历程当初为了学习,看了许多的材料,中途曾经放弃两次,但是最后还是勇敢的拿起了它,现在终于勉强弄懂。 0x000 概述 这一章开始讲redux,其实是承接前面的react,但其实作为一个框架来说,redux和react并没有太多的关系,本身是独立存在的。在我看来它们的关系不...

    ssshooter 评论0 收藏0
  • 微服务框架lagom

    摘要:在这种情况下,每一个微服务定义一个限界上下文,类似于领域驱动的限界上下文。设计你的微服务系统的响应式微服务架构这本书对于微服务系统架构很有帮助。 1.Lagom概念介绍 lagom框架包含一系列的可以支持我们从开发到部署的库以及开发环境: >在开发阶段,可以通过一个简单的命令构建我们的项目,启动所有你的服务,并且可以支持所有的lagom基础设置层。当你修改了代码,logom是有热加载的...

    Michael_Lin 评论0 收藏0

发表评论

0条评论

luck

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<