纯前端好久没写了
像事件的监听很多地方都用得到
比如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'
感觉 写了两天后又忘了。。。