var obv = (function() { var cache = new Map(); var observe = function (proxy, fn) { if (!cache.has(proxy)) { cache.set(proxy, []); }; cache.get(proxy).push(fn); }; var observData = function(obj) { return new Proxy(obj, { set: function(target, key, value, receiver) { var old = target[key]; if (old !== value) { var result = Reflect.set(target, key, value, receiver); var arr = cache.get(receiver); arr && arr.forEach(function(observer) { return observer.call(target, key, value, old); }); return result; }; } }); }; return { observe: observe, observData: observData }; }());
使用姿势:
1.使用
obv.observData
监听一个数组或者一个对象;
2.然后使用
obv.observe
来监听回调函数,第一个参数就是Proxy的实例,第二个参书就是其对应的回调
var person = obv.observData({ name: '徐志伟', age: 26 }); var pp = obv.observData({ personality: '哈哈', abc: '去屎' }); var dd = obv.observData([1, 2, 3, 4]); function print(key, value, old) { console.log(key, value, old); }; function print2(key, value, old) { console.log(key, value, old); }; obv.observe(dd, print); obv.observe(dd, print2); // person.name = '徐志伟1'; // pp.personality = '斤斤计较军军军军'; dd[0] = "111";