使用Proxy对象检测Javascript数组中的更改

前端之家收集整理的这篇文章主要介绍了使用Proxy对象检测Javascript数组中的更改前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Javascript中观察数组的变化是相对微不足道的.

我使用的一种方法是这样的:

// subscribe to add,update,delete,and splice changes
Array.observe(viewHelpFiles,function(changes) {
  // handle changes... in this case,we'll just log them 
  changes.forEach(function(change) {
    console.log(Object.keys(change).reduce(function(p,c) {
      if (c !== "object" && c in change) {
        p.push(c + ": " + JSON.stringify(change[c]));
      }
      return p;
    },[]).join(","));
  });
});

不过最近我读过Array.observe已经被弃用了,我们应该使用proxy object instead.

我们如何检测数组代理对象的变化?我找不到任何有兴趣阐述的例子吗?

解决方法

从我可以从 MDN page读取的内容,您可以创建一个通用处理程序,您可以以全局方式处理对象的更改.

在某种意义上说,你写一个拦截器,每次从数组中获取一个值或设置一个值时,它将进行干预.然后,您可以编写自己的逻辑来跟随更改.

var arrayChangeHandler = {
  get: function(target,property) {
    console.log('getting ' + property + ' for ' + target);
    // property is index in this case
    return target[property];
  },set: function(target,property,value,receiver) {
    console.log('setting ' + property + ' for ' + target + ' with value ' + value);
    target[property] = value;
    // you have to return true to accept the changes
    return true;
  }
};

var arrayToObserve = new Proxy([],arrayChangeHandler);

arrayToObserve.push('Test');
console.log(arrayToObserve[0]);

然后输出

getting push for 
getting length for 
setting 0 for  with value Test 
setting length for Test with value 1
getting 0 for Test
Test

您可以观察到,即使获取推送功能,它也使用get方法,因此您可以在此情况下立即观察完整的对象

猜你在找的JavaScript相关文章