zoukankan      html  css  js  c++  java
  • 使用proxy来简单的实现一个观察者

            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";
  • 相关阅读:
    BZOJ2734 [HNOI2012]集合选数
    BZOJ2288:[POJ Challenge]生日礼物
    浅谈堆
    BZOJ1150:[CTSC2007]数据备份
    POJ2442:Sequence
    POJ1442:Black Box
    POJ3784:Running Median
    洛谷【P1090】合并果子&&洛谷【P1334】瑞瑞的木板
    BZOJ1345:[Baltic2007]序列问题
    浅谈栈
  • 原文地址:https://www.cnblogs.com/sorrowx/p/7419558.html
Copyright © 2011-2022 走看看