仅记录-事件派发与订阅监听

仅记录
事件派发与订阅监听

// 封装事件订阅
let customEvent = {
    // 自定义事件列
    event: {},
    // 订阅自定义事件
    on: function (eventName, eventFn) {
        if (this.event[eventName]) {
            // 如果定义的事件名称在event对象中不为空，则将对应的函数放入event对象中的自定义事件中
            this.event[eventName].push(eventFn)
        } else {
            // 如果定义的事件名称在event对象中为空，不存在，则创建一个对应的数组，并将函数放入其中
            this.event[eventName] = []
            this.event[eventName].push(eventFn)
        }
    },
    // 派发自定义事件
    emit: function (eventName, eventMsg) {
        if (this.event[eventName]) {
            this.event[eventName].forEach(itemFn => {
                itemFn(eventMsg)
            })
        }
    },
    // 删除自定义事件
    delete: function (eventName, eventFn) {
        if (this.event[eventName]) {
            delete this.event[eventName]
            eventFn()
        }
    }
}


let runFn = function (data) {
    console.log('执行函数runFn！！！', data)
    // 派发自定义Name事件
    customEvent.emit('customEventName', data)
}


// 通过自定义Name订阅
customEvent.on('customEventName', function (eventMsg) { console.log('1.执行顺序1') })
customEvent.on('customEventName', function (eventMsg) { console.log('2.执行顺序2') })
customEvent.on('customEventName', function (eventMsg) { console.log('3.执行顺序4') })
runFn(123)
/**
* 执行函数runFn！！！ 123
* 1.执行顺序1
* 2.执行顺序2
* 3.执行顺序3
*/

console.log('customEvent.event---', customEvent.event)
customEvent.on('customEventName', function (eventMsg) { console.log('4.执行顺序4', eventMsg) })
runFn(456)
/**
*执行函数runFn！！！ 456
*1.执行顺序1
*2.执行顺序2
*3.执行顺序3
*4.执行顺序4 456
*/

let encodeFun = function (data) {
    console.log('输出：' + data)
    customEvent.emit('enCode', data)
}

customEvent.delete('customEventName', function () {
    console.log('已删除')
})
customEvent.on('enCode', function (data) {
    console.log('输出1：', data)
})
console.log('customEvent.event', customEvent.event)
encodeFun(789)