亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

手寫(xiě)一個(gè)EventBus事件處理中心(解讀vue的事件方法)

VPointer / 3522人閱讀

摘要：中的事件相關(guān)的方法扒一扒的源碼，中事件相關(guān)的方法，無(wú)非這幾個(gè)，。通過(guò)方法掛在的原型上，本文就是通過(guò)解讀的源碼，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的事件處理中心類(lèi)。全局定義一個(gè)屬性，存儲(chǔ)事件通過(guò)方法在的原型上掛載方法接下來(lái)，我們來(lái)實(shí)現(xiàn)方法。

vue中的事件相關(guān)的方法

扒一扒Vue的源碼，vue中事件相關(guān)的方法，無(wú)非這幾個(gè)，vm.$on, vm.$off, vm.$once, vm.$emit。通過(guò)eventsMinxin方法掛在Vue的原型上，本文就是通過(guò)解讀vue的源碼，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的事件處理中心類(lèi) EventBus。

首先，我們來(lái)回顧下這幾個(gè)方法的用法：

vm.$on( event, callback )

參數(shù)：

{string | Array} event (數(shù)組只在 2.2.0+ 中支持)

{Function} callback

vm.$once( event, callback )

參數(shù)：

{string} event

{Function} callback

vm.$off( [event, callback] )

參數(shù)：

{string | Array} event (只在 2.2.2+ 支持?jǐn)?shù)組)

{Function} [callback]

vm.$emit( eventName, […args] )

參數(shù)：

{string} eventName

[...args]

觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)。

實(shí)現(xiàn)一個(gè)EventBus

首先，我們先定義一個(gè)全局的類(lèi)EventBus。

function EventCenter() {
    // 全局定義一個(gè)_events屬性，存儲(chǔ)事件
    this._events = Object.create(null);
} 
// 通過(guò)eventMixin方法在EventCenter的原型上掛載方法
eventMixin(EventCenter);

export default EventCenter;

接下來(lái)，我們來(lái)實(shí)現(xiàn)eventMixin方法。

export default function eventMixin(EventCenter) {            
     EventCenter.prototype.on = function(event, fn) {...}
     EventCenter.prototype.off = function(event, fn) {...}
     EventCenter.prototype.once = function(event, fn) {...}
     EventCenter.prototype.once = function(event) {...}
}

ec.on( event, fn ), event值可以為數(shù)組和字符串，fn為事件觸發(fā)時(shí)的回調(diào)函數(shù)

EventCenter.prototyoe.on = function(event, fn) {
    const ec = this;
    if (Array.isArray(event)) {
        for (let i = 0; i < event.length; i++) {
            ec.on(event[i], fn)
        }
    } else {
        (ec._events[event] || (ec._events[event] = [])).push(fn);
    }
}

ec.off( event, fn ), event值可以為數(shù)組和字符串，fn為事件觸發(fā)時(shí)的回調(diào)函數(shù)

EventCenter.prototyoe.on = function(event, fn) {
    const ec = this;
    // 判斷如果不傳參數(shù)， 則移除所有事件
    if (!arguments.length) {
        ec._events = Object.create(null);
    }
    // event為數(shù)組時(shí)，遍歷移除事件
    if (Array.isArray(event)) {
        for(let i = 0; i < event.length; i++) {
            ec.off(event[i], fn);
        }
        return ec;
    }
    const cbs = ec._events[event];
    // 回調(diào)不存在 直接返回
    if (!cbs) {
        return ec;
    }
    // cbs為一個(gè)或者fn不存在，ec._events[event] = null， 直接移除
    if (arguments.length === 1) {
        ec._events[event] = null;
        return ec;
    }
    if (!fn) {
        ec._events[event] = null;
        return ec;
    }
    // 否則，遍歷cbs，移除cbs中為fn的回調(diào)函數(shù)
    let cb；
    let i = cbs.length;
    // 從后向前遍歷，移除當(dāng)前監(jiān)聽(tīng)器時(shí)，不會(huì)影響未遍歷過(guò)的監(jiān)聽(tīng)器的位置。
    while (i--) {
        cb = cbs[i];
        if (cb === fn || cb.fn === fn) {
            cbs.splice(i, 1);
            break;
        }
    }
    return ec;
}

ec.once( event, fn ), event值可以為字符串，fn為事件觸發(fā)時(shí)的回調(diào)函數(shù)

const ec = this;
// 自定義一個(gè)_on方法，先解綁_on, 然后通過(guò)調(diào)用apply方法執(zhí)行fn。
function _on() {
    ec.off(event, _on);
    fn.apply(ec, arguments);
}
// 這句暫時(shí)沒(méi)看懂，等之后查了資料補(bǔ)充
_on.fn = fn;
ec.on(event, _on);
return ec;

ec.emit( event, ...args ), event值可以為字符串，...args為調(diào)用時(shí)的傳參

EventCenter.prototype.emit = function(event) {
    const ec = this;
    let cbs = ec._events[event];
    if (cbs) {
        // 拿到傳參
        const args = Array.from(arguments).slice(1);
        for(let i = 0; i < cbs.length; i++) {
            try {
                cbs[i].apply(ec, args);
            } catch(e) {
                new Error("error");
            }
        }
    }
    return ec;
}

至此，一個(gè)簡(jiǎn)單的事件中心就完成了。

參考： vue源碼 core/instance/events.js

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/106400.html

相關(guān)文章

  • vue中8種組件通信方式, 值得收藏!

    摘要：一父組件通過(guò)的方式向子組件傳遞數(shù)據(jù)，而通過(guò)子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會(huì)失效并警告。 之前寫(xiě)了一篇關(guān)于vue面試總結(jié)的文章, 有不少網(wǎng)友提出組件之間通信方式還有很多, 這篇文章便是專(zhuān)門(mén)總結(jié)組件之間通信的 vue是數(shù)據(jù)驅(qū)動(dòng)視圖更新的框架, 所以對(duì)于vue來(lái)說(shuō)組件間的數(shù)據(jù)通信非常重要，那么組件之間如何進(jìn)行數(shù)據(jù)通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

    BicycleWarrior 評(píng)論0 收藏0

  • 「Vue實(shí)踐」武裝你的前端項(xiàng)目

    摘要：所有的高階抽象組件是通過(guò)定義選項(xiàng)來(lái)聲明的。所以一般在生命周期或者中，需要用實(shí)例的方法清除可當(dāng)你有多個(gè)時(shí)，就需要重復(fù)性勞動(dòng)銷(xiāo)毀這件事兒。更多的配置請(qǐng)看雙端開(kāi)啟開(kāi)啟壓縮的好處是什么可以減小文件體積，傳輸速度更快。本文目錄 接口模塊處理 Vue組件動(dòng)態(tài)注冊(cè) 頁(yè)面性能調(diào)試：Hiper Vue高階組件封裝 性能優(yōu)化：eventBus封裝 webpack插件：真香 本文項(xiàng)目基于Vue-Cli3，想知...

    曹金海 評(píng)論0 收藏0

  • vue非父子組件通信中eventbus被多次觸發(fā)（vue中使用eventbus踩過(guò)的坑）

    摘要：主要是看這是從上個(gè)頁(yè)面?zhèn)鱽?lái)的數(shù)據(jù)這一行數(shù)據(jù)的輸出次數(shù)情況來(lái)判斷事件觸發(fā)次數(shù)?？偨Y(jié)所以，如果想要用來(lái)進(jìn)行頁(yè)面組件之間的數(shù)據(jù)傳遞，需要注意亮點(diǎn)，組件事件應(yīng)在生命周期內(nèi)。其次，組件內(nèi)的記得要銷(xiāo)毀。 轉(zhuǎn)載于簡(jiǎn)書(shū) 原文鏈接：https://www.jianshu.com/p/fde...一開(kāi)始的需求是這樣子的，我為了實(shí)現(xiàn)兩個(gè)頁(yè)面組件之間的數(shù)據(jù)傳遞，假設(shè)我有頁(yè)面A，點(diǎn)擊頁(yè)面A上的某一個(gè)按鈕之后，頁(yè)...

    CHENGKANG 評(píng)論0 收藏0

  • vue數(shù)據(jù)傳遞--我有特殊的實(shí)現(xiàn)技巧

    摘要：同時(shí)有一種特殊的實(shí)現(xiàn)方案。組件之間傳值有這么幾種數(shù)據(jù)傳遞方式，和特殊的。在所有實(shí)例中使用其進(jìn)行數(shù)據(jù)的通信。雙多方使用同名事件進(jìn)行溝通。數(shù)據(jù)非長(zhǎng)效數(shù)據(jù)，無(wú)法保存，只在后生效。這樣約定的好處是，我們能夠記錄所有中發(fā)生的改變。 前言 最近碰到了比較多的關(guān)于vue的eventBus的問(wèn)題，之前定技術(shù)選型的時(shí)候也被問(wèn)到了，vuex和eventBus的使用范圍。所以簡(jiǎn)單的寫(xiě)一下。同時(shí)有一種特殊的實(shí)...

    xiaoxiaozi 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<