自定义事件收发器--EventBus

首先,我们先想想一个事件收发器需要有什么样的功能? 简单来说需要以下三个功能:

1、注册事件监听功能 

2、移除事件监听功能

3、触发事件功能


我们先自定义一个事件收发器对象EventBus:

1、包含_event属性,用来存储事件与对应的处理函数;

2、包含$on和$once方法用来注册事件监听

3、包含$remove方法用来移除事件监听

4、包含$emit方法用来触发事件

var EventBs = {

    _event: {},

    $on: function(event, fn){},

    $once: function(event, fn){},

    $off: function(event, fn){},

    $emit: function(){event}

}


我们先来说说$on的实现逻辑:

/**

   * event是自定义事件名

   * fn是对应的处理函数

   */

$on: function(event, fn){

    // 一个事件可以同时绑定多个处理函数

    this._event[event] = this._event[event]  || []

    this._event[event].push(fn)

}


我们再说说$once方法,$once的作用是只绑定一次,第二次触发事件不会再执行处理函数。

/**

    * 先调用$on绑定事件处理函数handler,然后在handler里面调用$off方法移除事件监听

    * event是自定义事件名   

    * fn是对应的处理函数   

    */

$once: function(event, fn){   

    var _this = this

    function on () {

        // 移除监听,然后再执行回调函数。这样就实现了只触发一次的功能

        _this.$off(event, on)

        fn.apply(_this, arguments)

    }

    this.$on(event, on)

}


既然$once里面说到了$off方法,我们就来说说$off方法:

/**     

    * event是自定义事件名       

    * fn是对应的处理函数      

    */

$off: function(event, fn){

    var _this = this

    // 如果不传入任何参数,解绑所有事件

    if (!arguments.length) {

        this._events = {}

    }

    // 解绑指定事件的所有处理函数 

    if (!fn) {

        this._events[event] = null

    }

    var cbs = this._events[event]

    // 遍历删除对应处理函数

    var cb

    var i = cbs.length

    while (i--) {

        cb = cbs[i]

        if (cb === fn) {

            cbs.splice(i, 1)

            break

        }

    }

}


最后我们来看一下事件触发函数$emit:

$emit: function(event){   

    var cbs = this._events[event]

    // toArray理解为自定义的一个数组话方法(将类数组对象转化为数组的方法)

    const args = toArray(arguments, 1)

    for (var i = 0, l = cbs.length; i < l; i++) {

        cbs[i].apply(vm, args)

    }

}

到此为止,我们已经实现了一个比较简单的事件收发器,重要是理解这个实现思维。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,907评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,546评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,705评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,624评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,940评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,371评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,672评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,396评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,069评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,350评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,876评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,243评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,847评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,004评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,755评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,378评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,266评论 2 259

推荐阅读更多精彩内容