栗子來源(非本人):https://github.com/sindresorhus/on-change
on-change是一個可以監(jiān)聽對象或者數(shù)組內(nèi)部變化的小工具,主要使用proxy來實現(xiàn)冰啃。以下是核心代碼:
// onChange 即要進行的監(jiān)聽操作
module.exports = (object, onChange) => {
const handler = {
get(target, property, receiver) {
try {
return new Proxy(target[property], handler);
} catch (err) {
return Reflect.get(target, property, receiver);
}
},
defineProperty(target, property, descriptor) {
onChange();
return Reflect.defineProperty(target, property, descriptor);
},
deleteProperty(target, property) {
onChange();
return Reflect.deleteProperty(target, property);
}
};
return new Proxy(object, handler);
};
get
defineProperty
defineProperty,上面代碼可以對數(shù)組進行操作就是因為用了proxy协屡,具體的實現(xiàn)在get
方法费尽,每一層返回一個proxy,需要注意的是在監(jiān)聽操作這里依然使用的是 es5的 defineProperty 方法瑞佩。