摘要：看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。回顧在上一步我們實現了一個簡易的事件管理的類，接下來我們把它給優化下，方便我們的使用。接著我們來優化。

看這篇之前，如果沒有看過之前的文章，可拉到文章末尾查看之前的文章。

在上一步我們實現了一個簡易的事件管理的類，接下來我們把它給優化下，方便我們的使用。主要優化內容：

方便為多個事件添加同一個函數

方便為一個事件添加多個函數

有針對性的取消事件的函數

第一點和第二點都要修改 $on 函數，所以我們一起改：

之前的代碼

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

優化之后的代碼

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

很簡單的優化，但卻讓 $on 函數更加方便的使用。

接著我們來優化 $off 。我們先看看之前的代碼：

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

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

清空所有事件

清空多個事件

取消特定事件的特定處理函數

優化的細節看代碼中的注釋

$off(eventName, fn) {
    let ctx = this
    // 清空所有事件
    if (!arguments.length) {
        ctx._events = Object.create(null)
        return ctx
    }
    // 清空多個事件
    if (Array.isArray(eventName)) {
        eventName.forEach(name => this.$off(name, fn))
        return ctx
    }
    // 若沒有事件對應的函數列表則不用處理
    const cbs = ctx._events[eventName]
    if (!cbs) {
        return ctx
    }
    // 清空特定事件
    if (!fn) {
        ctx._events[eventName] = null
        return ctx
    }
    // 取消特定事件的特定處理函數
    if (fn) {
        let cb
        let i = cbs.length
        // 處理一次取消多個的情況
        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 優化好了，測試一下：

import {Event} from "./Event";

let eventTest = new Event()

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

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

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

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

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

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

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

eventTest.$off()
eventTest.$emit("eventName1", "傳入參數1")
// 無輸出
eventTest.$emit("eventName2", "傳入參數2")
// 無輸出
eventTest.$emit("eventName3", "傳入參數3")
// 無輸出
eventTest.$emit("eventName4", "傳入參數4")
// 無輸出
eventTest.$emit("eventName5", "傳入參數5")
// 無輸出
eventTest.$emit("eventName6", "傳入參數6")
// 無輸出
console.log("------------------------------")

這兩節吧，事件介紹了下，一個健壯的事件的類也編寫好了，接下來我們把這 8 步實現的內容集合到一個對象下，也就是 Vue 下，敬請期待。

點擊查看相關代碼

VUE - MVVM - part1 - defineProperty

VUE - MVVM - part2 - Dep

VUE - MVVM - part3 - Watcher

VUE - MVVM - part4 - 優化Watcher

VUE - MVVM - part5 - Observe

VUE - MVVM - part6 - Array

VUE - MVVM - part7 - Event

VUE - MVVM - part8 - 優化Event

VUE - MVVM - part9 - Vue

VUE - MVVM - part10 - Computed

VUE - MVVM - part11 - Extend

VUE - MVVM - part12 - props

VUE - MVVM - part13 - inject & 總結