前幾天在網上查閱了一些資料,並且自己嘗試著手寫了一下訂閱釋出模式。

其實可以發現訂閱釋出模式和自定義事件類似（但不同），原理是我們先定義一個事件型別並給一個callback，在後續執行這個callback。

var Works = (function () {
    function Works() {
        this.handlers = {}
        this.a = 'a'
        this.b = 'b'
        this.c = 'c'
    }

    Works.prototype = {
        constructor: Works,
        work: function (type, a, b, c) {
            this.a = a
            this.b = b
            this.c = c
            this.run(type)
        },
        run: function (type) {
            if (this.handlers[type] instanceof Array) {
                var handlers = this.handlers[type];
                // 遍歷這個型別任務中所有的方法,並逐個執行
                for (let i = 0; i < handlers.length; i++) {
                    handlers[i](this.a, this.b, this.c)
                }
            }
        },
        addListener: function (type, handler) {
            if (typeof this.handlers[type] == 'undefined') {
                this.handlers[type] = []
            }
            this.handlers[type].push(handler)
        },
        removeListener: function (type, handler) {
            if (!this.handlers[type]) return;
            var handlers = this.handlers[type]
            // 不傳入handler,則解綁所有方法
            if (!handler) {
                handlers = []
            } else {
                // 遍歷所有方法,找到相同並刪除方法
                for (let i = 0; i < handlers.length; i++) {
                    if (handler === handlers[i]) {
                        handlers.splice(i, 1)
                    }
                }
            }
        }
    }
    return Works
})()

var work = new Works();

work.addListener('base', function (a, b, c) {
    console.log(a, b, c)
})
work.addListener('sum', function (a, b, c) {
    console.log(a, b, c)
})

work.work('base', 'e', 'f', 'g');    // e f g
work.work('sum', 'ab', 'cd', 'ef');    // ab cd ef