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

事宜是什麼？

在規範瀏覽器中，我們常常運用：addEventListener 來為一個 DOM 增加一個事宜（click、mousemove、tap等）。

在我看來，一個事宜是一種行動（或狀況），當發作這類行動（或狀況）時，我們要去做的事，比方本日下雨了，那我就得去找傘；鬧鐘響了，那我就得起床等等。

仔細看這些狀況，歸結到代碼中，不過就是一個行動（或狀況）的稱號，和一些列的行動，而在 js 中行動就是 function，一系列的行動就是一個函數的鳩合。

完成

如上所說，我們把事宜籠統成一個類

類下屬性 & 要領

• _events 一個對象 {key: eventName, value: Array<Function,Function…>}
• $on(eventName, func) 增加詳細事宜的處置懲罰函數
• $off(eventName) 作廢事宜處置懲罰函數
• $emit(eventName, data1, data2, …) 用於觸發事宜
• $once(eventName, func) 設置僅觸發一次的事宜

ok 依據我們的設想，在來看這個完成好的 Event 類

let uid = 0

export class Event {
    constructor() {
        this.id = ++uid
        this._events = {}
    }

    $on(eventName, fn) {
        let ctx = this;
        // 若 _events 對象下無對應事宜名，則新建一個數組，然後將處置懲罰函數推入數組
        if(!ctx._events[eventName]){
            ctx._events[eventName] = []
        }
        ctx._events[eventName].push(fn)
        return ctx
    }

    $once(eventName, fn) {
        let ctx = this

        function on() {
            // 先作廢，然後觸發，確保僅觸發一次
            ctx.$off(eventName, on)
            fn.apply(ctx, arguments)
        }

        on.fn = fn
        ctx.$on(eventName, on)
        return object
    }

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

    $emit(eventName, ...args) {
        let ctx = this
        let cbs = ctx._events[eventName]
        if (cbs) {
            cbs.forEach(func => func.apply(ctx, args))
        }
        return ctx
    }

}

一個簡樸的事宜治理的類便完成好了，讓我們來測試一下：

import {Event} from "./Event";

let eventTest = new Event()

eventTest.$on('testEvent', function (event) {
    console.log('測試事宜增加，傳入參數為' + event)
})

eventTest.$emit('testEvent', '事宜觸發勝利')
// 測試事宜增加，傳入參數為事宜觸發勝利

eventTest.$emit('testEvent', '事宜再次觸發勝利')
// 測試事宜增加，傳入參數為事宜再次觸發勝利

eventTest.$off('testEvent')

eventTest.$emit('testEvent', '事宜作廢，不會有輸出')
// 無輸出

eventTest.$once('testOnce', function (event) {
    console.log('事宜僅僅觸發一次，傳入參數為' + event)
})

eventTest.$emit('testOnce', '事宜觸發勝利')
// 事宜僅僅觸發一次，傳入參數為事宜觸發勝利

eventTest.$emit('testOnce', '事宜作廢，不會有輸出')
// 無輸出

ok 一個淺易的事宜治理完成了，因為這節內容與上幾節關係不大，所以這裏再次說下測試代碼的運轉體式格局：

1. node 環境 8.11.1 往上，不然不能夠支撐 import 語法
2. 為了不轉碼支撐 import 語法，文件後綴為 .mjs
3. 進入到 test.mjs 地點目次命令行運轉：node --experimental-modules test.mjs 即可

點擊檢察相干代碼

系列文章地點

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 & 總結