看這篇之前，假如沒有看過之前的文章，可拉到文章末端檢察之前的文章。

回憶

在上一步我們完成了一個淺易的事宜治理的類，接下來我們把它給優化下，輕易我們的運用。重要優化內容：

1. 輕易為多個事宜增加統一個函數
2. 輕易為一個事宜增加多個函數
3. 有針對性的作廢事宜的函數

第一點和第二點都要修正 $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
}

我們只做了清空特定事宜，實在我們能做的另有許多，

1. 清空一切事宜
2. 清空多個事宜
3. 作廢特定事宜的特定處置懲罰函數

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

$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 下，敬請期待。

點擊檢察相干代碼

系列文章地點

1. VUE – MVVM – part1 – defineProperty
2. VUE – MVVM – part2 – Dep
3. VUE – MVVM – part3 – Watcher
4. VUE – MVVM – part4 – 優化Watcher
5. VUE – MVVM – part5 – Observe
6. VUE – MVVM – part6 – Array
7. VUE – MVVM – part7 – Event
8. VUE – MVVM – part8 – 優化Event
9. VUE – MVVM – part9 – Vue
10. VUE – MVVM – part10 – Computed
11. VUE – MVVM – part11 – Extend
12. VUE – MVVM – part12 – props
13. VUE – MVVM – part13 – inject & 總結