20190322 JavaScript中Proxy的一個小應用

兩個對象咋比較？參數變沒變？何時更新？
今天早上坐車的時候忽然想到proxy能夠攔截，~~~ O(∩_∩)O哈哈~ ~~~

const initState = {
  a: 1,
}

const observer = (initState={}) => {
  let timer = null;
  let getStateCallback = ()=>{};

  const raf = setTimeout;
  const cancelRaf = clearTimeout;

  const proxy = new Proxy(initState, {
    set: function(target, key, value, receiver) {
      if (value === target[key]) {
        console.log('-----do not update----');
      } else {
        console.log('-----update----');
        target[key] = value;
        cancelRaf(timer)
        timer = raf(function(){
          getStateCallback(target);
          cancelRaf(timer)
        },4);
      }
      return true;
    },
  });
  
  const setState = newState => {
    Object.assign(proxy,{...newState})
  };

  const getState = cb => {
    getStateCallback = cb;
  }

  return {
    getState,
    setState,
  }
}

const proxy = observer(initState);

proxy.setState({
  a:1,
});

proxy.getState(v=>{
  console.log(v);
});
複製代碼