【Vue原理】Event - 源碼版之自定義事件

yunhao 發(fā)布于2019-08-23 18:36 / 830人閱讀

摘要：寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟專(zhuān)注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于版本如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊下面鏈接或者拉到下面關(guān)注公眾號(hào)也可以吧原理源碼版之自定義事件的自定義事件

寫(xiě)文章不容易，點(diǎn)個(gè)贊唄兄弟
專(zhuān)注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧
研究基于 Vue版本 【2.5.17】

如果你覺(jué)得排版難看，請(qǐng)點(diǎn)擊 下面鏈接 或者拉到下面關(guān)注公眾號(hào)也可以吧

【Vue原理】Event - 源碼版之自定義事件

Vue 的自定義事件很簡(jiǎn)單，就是使用觀察者模式進(jìn)行事件的監(jiān)聽(tīng)和分發(fā)

Vue 封裝的這個(gè)觀察者模式，可以說(shuō)是很完善了，這個(gè)可以獨(dú)立抽取出來(lái)的在其他項(xiàng)目中使用的代碼，只需要做一點(diǎn)點(diǎn)改動(dòng)，把事件存儲(chǔ)器換個(gè)地方（Vue 放在了實(shí)例上）

我經(jīng)常在項(xiàng)目中使用，就是為了解耦或者解決一些異步的問(wèn)題

今天來(lái)詳細(xì)探索 Vue 的自定義事件

首先，Vue 的事件存儲(chǔ)器放在那里？

沒(méi)錯(cuò)，放在 vm._events 中

你看，比如你這樣監(jiān)聽(tīng)事件

看到實(shí)例上保存了你的事件

1、事件存儲(chǔ)器

vm._events

看下這個(gè)事件存儲(chǔ)器在哪里生成的

首先，實(shí)例在初始化的時(shí)候，給實(shí)例增加一個(gè)事件存儲(chǔ)器 _events

Vue.prototype._init = function(options) {

    initEvents(vm);    

    //...初始化選項(xiàng)數(shù)據(jù)，解析模板，掛載dom等

}

function initEvents(vm) {
    vm._events = Object.create(null);
}

以后，所有這個(gè)實(shí)例監(jiān)聽(tīng)的事件，就都存在這里了

那么，接下來(lái)就來(lái)看自定義事件的源碼了

下面的源碼比較不太屬于 Vue 的內(nèi)容，比較獨(dú)立，很實(shí)用，相信大家也都看得懂，這里主要起一個(gè)記錄的作用

下面會(huì)有四個(gè)函數(shù)

綁定事件，$on

一次性綁定事件，$once

觸發(fā)事件，$emit

解綁事件，$off

2、$on

注冊(cè)事件，接收事件名和回調(diào)，很清楚了，都能看得懂

Vue.prototype.$on = function(event, fn) {    

    var vm = this;   

    if (Array.isArray(event)) {        

        for (var i = 0,l = event.length; i < l; i++) {            
            this.$on(event[i], fn);
        }
    } 
    else { 
        (vm._events[event] || (vm._events[event] = [])).push(fn);

    }    

    // 為了鏈?zhǔn)秸{(diào)用
    return vm
};

3、$once

單次注冊(cè)。只監(jiān)聽(tīng)一次，觸發(fā)之后馬上銷(xiāo)毀

它妙就妙在，把回調(diào)包裝了一下，在回調(diào)執(zhí)行時(shí)，先解綁事件，再調(diào)用原回調(diào)

Vue.prototype.$once = function(event, fn) {  

    var vm = this;     

    function on() {

        vm.$off(event, on);
        fn.apply(vm, arguments);
    }

    on.fn = fn;
    vm.$on(event, on);      

   
    // 為了鏈?zhǔn)秸{(diào)用
    return vm
};

4、$emit

觸發(fā)事件，接收事件名，然后拿到原本設(shè)置的回調(diào)，遍歷調(diào)用

Vue.prototype.$emit = function(event) {  

    var vm = this;    

    var _events= event.toLowerCase();    

    var cbs = vm._events[_events]; 

    if (cbs) {

        cbs = cbs.length > 1 ? toArray(cbs) : cbs;        
        var args = toArray(arguments, 1);        

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

          cbs[i].apply(vm, args);
        }

    }    

    // 為了鏈?zhǔn)秸{(diào)用
    return vm
};

5、$off

取消監(jiān)聽(tīng)事件或者移除監(jiān)聽(tīng)回調(diào)

接收事件名和綁定時(shí)的事件回調(diào)

很簡(jiǎn)單的啦

Vue.prototype.$off = function(event, fn) {   

    var vm = this;    

    if (!arguments.length) {

        vm._events = Object.create(null);        

        return vm
    }    

    // 遞歸調(diào)用
    if (Array.isArray(event)) {        

        for (var i = 0, l = event.length; i < l; i++) { 
           this.$off(event[i], fn);
        }        
        return vm
    } 

    var cbs = vm._events[event];    

    if (!cbs) return vm    

    if (!fn) {

        vm._events[event] = null;        

        return vm

    }    

    // 去掉特定的函數(shù)
    if (fn) {        

        var cb;        

        var len = cbs.length;     

        // 遍歷移除相應(yīng)回調(diào)
        while (len--) {

            cb = cbs[len];            

            if (cb === fn || cb.fn === fn) {

                cbs.splice(len, 1);                

                break

            }
        }
    }    

    // 為了鏈?zhǔn)秸{(diào)用
    return vm
};

GPU云服務(wù)器云服務(wù)器自定義事件 js 自定義觸發(fā)事件 event事件 js vue源碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/105514.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

yunhao

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

IOFLOOD：$999/月/2*E5-2680v4/128GB內(nèi)存/216TB硬盤(pán)/不限流量/10

閱讀 2897·2021-10-13 09:48
I2S總線

閱讀 3940·2021-10-13 09:39
虛擬主機(jī)有什么作用-虛擬主機(jī)有什么用？

閱讀 3687·2021-09-22 16:04
HaloCloud：日本軟銀vps,512MB內(nèi)存/20GB空間/500GB流量/100Mbps端口

閱讀 1924·2021-09-03 10:48
MOACK：韓國(guó)服務(wù)器/雙E5-2450L/8GB內(nèi)存/1T硬盤(pán)/10M不限流量/$59.00/月

閱讀 916·2021-08-03 14:04
四個(gè)最詭異的 CSS 特性

閱讀 2417·2019-08-29 15:18
mpvue的自定義組件中運(yùn)行$emit函數(shù)時(shí)輸入框光標(biāo)抖動(dòng)的解決辦法

閱讀 3478·2019-08-26 12:19
用bootstrap file input 上傳圖片

閱讀 2934·2019-08-26 12:08

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【Vue原理】Event - 源碼版之自定義事件

相關(guān)文章

**【Vue原理】Event - 源碼版之綁定組件自定義事件**

**【Vue原理】Compile - 源碼版之 generate 拼接綁定的事件**

**【Vue原理】Event - 白話版**

**【Vue原理】Event - 源碼版之綁定組件DOM事件**

**【Vue原理】Event - 源碼版之綁定標(biāo)簽DOM事件**

發(fā)表評(píng)論

0條評(píng)論

yunhao

男|高級(jí)講師

TA的文章

IOFLOOD：$999/月/2*E5-2680v4/128GB內(nèi)存/216TB硬盤(pán)/不限流量/10

I2S總線

虛擬主機(jī)有什么作用-虛擬主機(jī)有什么用？

HaloCloud：日本軟銀vps,512MB內(nèi)存/20GB空間/500GB流量/100Mbps端口

MOACK：韓國(guó)服務(wù)器/雙E5-2450L/8GB內(nèi)存/1T硬盤(pán)/10M不限流量/$59.00/月

四個(gè)最詭異的 CSS 特性

mpvue的自定義組件中運(yùn)行$emit函數(shù)時(shí)輸入框光標(biāo)抖動(dòng)的解決辦法

用bootstrap file input 上傳圖片

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【Vue原理】Event - 源碼版 之 自定義事件

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【Vue原理】Event - 源碼版之自定義事件