摘要：看這篇之前，如果沒(méi)有看過(guò)之前的文章，可拉到文章末尾查看之前的文章?；仡櫾谏弦徊轿覀儗?shí)現(xiàn)了一個(gè)簡(jiǎn)易的事件管理的類(lèi)，接下來(lái)我們把它給優(yōu)化下，方便我們的使用。接著我們來(lái)優(yōu)化。

看這篇之前，如果沒(méi)有看過(guò)之前的文章，可拉到文章末尾查看之前的文章。

在上一步我們實(shí)現(xiàn)了一個(gè)簡(jiǎn)易的事件管理的類(lèi)，接下來(lái)我們把它給優(yōu)化下，方便我們的使用。主要優(yōu)化內(nèi)容：

方便為多個(gè)事件添加同一個(gè)函數(shù)

方便為一個(gè)事件添加多個(gè)函數(shù)

有針對(duì)性的取消事件的函數(shù)

第一點(diǎn)和第二點(diǎn)都要修改 $on 函數(shù)，所以我們一起改：

之前的代碼

$on(eventName, fn) {
    let ctx = this;
    if(!ctx._events[eventName]){
        ctx._events[eventName] = []
    }
    ctx._events[eventName].push(fn)
    return ctx
}

優(yōu)化之后的代碼

$on(eventName, fn) {
    let ctx = this
    // 處理事件名是數(shù)組的情況
    if (Array.isArray(eventName)) {
        // 遞歸調(diào)用 $on 函數(shù)
        eventName.forEach(name => this.$on(name, fn))
    } else {
        // 處理處理函數(shù)為數(shù)組的情況
        // 將處理函數(shù)統(tǒng)一成數(shù)組方便添加
        if (!Array.isArray(fn)) {
            fn = [fn]
        }
        if(!ctx._events[eventName]){
            ctx._events[eventName] = []
        }
        ctx._events[eventName].push(fn)
    }
    return ctx
}

很簡(jiǎn)單的優(yōu)化，但卻讓 $on 函數(shù)更加方便的使用。

接著我們來(lái)優(yōu)化 $off 。我們先看看之前的代碼：

$off(eventName) {
    let ctx = this
    const cbs = ctx._events[eventName]
    if (cbs) {
        // 取消置空即可
        ctx._events[eventName] = null
    }
    return ctx
}

我們只做了清空特定事件，其實(shí)我們能做的還有很多，

清空所有事件

清空多個(gè)事件

取消特定事件的特定處理函數(shù)

優(yōu)化的細(xì)節(jié)看代碼中的注釋

$off(eventName, fn) {
    let ctx = this
    // 清空所有事件
    if (!arguments.length) {
        ctx._events = Object.create(null)
        return ctx
    }
    // 清空多個(gè)事件
    if (Array.isArray(eventName)) {
        eventName.forEach(name => this.$off(name, fn))
        return ctx
    }
    // 若沒(méi)有事件對(duì)應(yīng)的函數(shù)列表則不用處理
    const cbs = ctx._events[eventName]
    if (!cbs) {
        return ctx
    }
    // 清空特定事件
    if (!fn) {
        ctx._events[eventName] = null
        return ctx
    }
    // 取消特定事件的特定處理函數(shù)
    if (fn) {
        let cb
        let i = cbs.length
        // 處理一次取消多個(gè)的情況
        if (Array.isArray(fn)) {
            fn.forEach(fnc => this.$off(eventName, fnc))
        }
        while (i--) {
            cb = cbs[i]
            if (cb === fn || cb.fn === fn) {
                cbs.splice(i, 1)
                break
            }
        }
    }
    return ctx
}

ok 優(yōu)化好了，測(cè)試一下：

import {Event} from "./Event";

let eventTest = new Event()

eventTest.$on("eventName1", (e) => {
    console.log("一次添加一個(gè)處理函數(shù)")
    console.log(e)
})

eventTest.$on("eventName2", [(e) => {
    console.log("一次添加多個(gè)處理函數(shù)，第一個(gè)")
    console.log(e)
}, (e) => {
    console.log("一次添加多個(gè)處理函數(shù)，第二個(gè)")
    console.log(e)
}])

eventTest.$on(["eventName3", "eventName4"], (e) => {
    console.log("多個(gè)事件添加同一處理函數(shù)")
    console.log(e)
})

eventTest.$on(["eventName5", "eventName6"], [(e) => {
    console.log("多個(gè)事件添加多個(gè)處理函數(shù)，第一個(gè)")
    console.log(e)
}, (e) => {
    console.log("多個(gè)事件添加多個(gè)處理函數(shù)，第二個(gè)")
    console.log(e)
}])

eventTest.$emit("eventName1", "傳入?yún)?shù)1")
// 一次添加一個(gè)處理函數(shù)
// 傳入?yún)?shù)1
eventTest.$emit("eventName2", "傳入?yún)?shù)2")
// 一次添加多個(gè)處理函數(shù)，第一個(gè)
// 傳入?yún)?shù)2
// 一次添加多個(gè)處理函數(shù)，第二個(gè)
// 傳入?yún)?shù)2
eventTest.$emit("eventName3", "傳入?yún)?shù)3")
// 多個(gè)事件添加同一處理函數(shù)
// 傳入?yún)?shù)3
eventTest.$emit("eventName4", "傳入?yún)?shù)4")
// 多個(gè)事件添加同一處理函數(shù)
// 傳入?yún)?shù)4
eventTest.$emit("eventName5", "傳入?yún)?shù)5")
// 多個(gè)事件添加多個(gè)處理函數(shù)，第一個(gè)
// 傳入?yún)?shù)5
// 多個(gè)事件添加多個(gè)處理函數(shù)，第二個(gè)
// 傳入?yún)?shù)5
eventTest.$emit("eventName6", "傳入?yún)?shù)6")
// 多個(gè)事件添加多個(gè)處理函數(shù)，第一個(gè)
// 傳入?yún)?shù)6
// 多個(gè)事件添加多個(gè)處理函數(shù)，第二個(gè)
// 傳入?yún)?shù)6
console.log("------------------------------")

eventTest.$off("eventName1")
eventTest.$off(["eventName2", "eventName3"])

eventTest.$emit("eventName1", "傳入?yún)?shù)1")
// 無(wú)輸出
eventTest.$emit("eventName2", "傳入?yún)?shù)2")
// 無(wú)輸出
eventTest.$emit("eventName3", "傳入?yún)?shù)3")
// 無(wú)輸出
eventTest.$emit("eventName4", "傳入?yún)?shù)4")
// 多個(gè)事件添加同一處理函數(shù)
// 傳入?yún)?shù)4
eventTest.$emit("eventName5", "傳入?yún)?shù)5")
// 多個(gè)事件添加多個(gè)處理函數(shù)，第一個(gè)
// 傳入?yún)?shù)5
// 多個(gè)事件添加多個(gè)處理函數(shù)，第二個(gè)
// 傳入?yún)?shù)5
eventTest.$emit("eventName6", "傳入?yún)?shù)6")
// 多個(gè)事件添加多個(gè)處理函數(shù)，第一個(gè)
// 傳入?yún)?shù)6
// 多個(gè)事件添加多個(gè)處理函數(shù)，第二個(gè)
// 傳入?yún)?shù)6
console.log("------------------------------")

eventTest.$off()
eventTest.$emit("eventName1", "傳入?yún)?shù)1")
// 無(wú)輸出
eventTest.$emit("eventName2", "傳入?yún)?shù)2")
// 無(wú)輸出
eventTest.$emit("eventName3", "傳入?yún)?shù)3")
// 無(wú)輸出
eventTest.$emit("eventName4", "傳入?yún)?shù)4")
// 無(wú)輸出
eventTest.$emit("eventName5", "傳入?yún)?shù)5")
// 無(wú)輸出
eventTest.$emit("eventName6", "傳入?yún)?shù)6")
// 無(wú)輸出
console.log("------------------------------")

這兩節(jié)吧，事件介紹了下，一個(gè)健壯的事件的類(lèi)也編寫(xiě)好了，接下來(lái)我們把這 8 步實(shí)現(xiàn)的內(nèi)容集合到一個(gè)對(duì)象下，也就是 Vue 下，敬請(qǐng)期待。

點(diǎn)擊查看相關(guān)代碼

VUE - MVVM - part1 - defineProperty

VUE - MVVM - part2 - Dep

VUE - MVVM - part3 - Watcher

VUE - MVVM - part4 - 優(yōu)化Watcher

VUE - MVVM - part5 - Observe

VUE - MVVM - part6 - Array

VUE - MVVM - part7 - Event

VUE - MVVM - part8 - 優(yōu)化Event

VUE - MVVM - part9 - Vue

VUE - MVVM - part10 - Computed

VUE - MVVM - part11 - Extend

VUE - MVVM - part12 - props

VUE - MVVM - part13 - inject & 總結(jié)