事件订阅监听

纯前端好久没写了

像事件的监听很多地方都用得到

比如vue $eventBus，react 使用的 model， node中的 emitter

其原理这里不多说

下面使用proxy写一个属性监听例子

众所周知Proxy没有prototype所以不能被继承(被继承的条件是这个类有Construct和prototype)

所以 这里写个过度函数

/**
 * 手写一个事件监听 代替 emiter
 * @param {*} data 
 * @returns 
 */

function dataWatch(data) {
    let list = []
    data.addEventListener = function(key, fn) {
        list.push({
            key: key,
            fn: fn
        })
    }
    data.removeEventListener = function(key, fn) {
        if(key && fn) {
            list =  list.filter(e => !(key === e.key && e.fn === fn))
        } else if(key) {
            list =  list.filter(e => key !== e.key)
        }
    }
    const pro  = new Proxy(data, {
        get: function (target, propKey) {
            return target[propKey]
        },
        set: function (target, propKey, value) {
            list.forEach(obj => {
                obj.key === propKey ? obj.fn() : ''
            })
        }
    })
    return pro
}

const obj = dataWatch({
    name: '跃焱邵隼' 
    //这里不能再有 addEventListener, removeEventListener 属性或方法
})

const fn = () => {
    console.log(111111)
}
obj.addEventListener('name', fn)
obj.addEventListener('name', () => {
    console.log(22222)
})
obj.name = 'wellyyss'

obj.removeEventListener('name',fn)

obj.name = 'wellyyss'

感觉 写了两天后又忘了。。。