@masx200/deep-observe-agent-proxy

deep-observe-agent-proxy

使用 Proxy 实现对 Object 的深度观察,检测跟踪对象深层次的属性的变化的javascript小工具,可以检测到对象本来不存在的属性的添加,和已有属性的修改

安装方法

yarn add https://github.com/masx200/deep-observe-agent-proxy.git

或者

cnpm install  https://github.com/masx200/deep-observe-agent-proxy.git --save

API

interface Callback<T extends object | Function | any[]> {
  (target: T, patharray: Array<string>, newvalue: any, oldvalue: any): void;
}
function observedeepagent<T extends object | Function | any[]>(
  target: T,
  callback: Callback<T>
): T;

更新:新增对于 Set 和 Map 类型的变化监测,

更新:不代理监测 Date 和 Promise和RegExp 类型

使用方法

import deepobserveagent from "@masx200/deep-observe-agent-proxy";
var a = [{ 0: "1111111a" }, 1, true, [{ bbbb: "ekkk" }, 10000]];
function callback(target, patharray, newvalue, oldvalue) {
  console.log({
    target,
    patharray,
    newvalue,
    oldvalue
  });
}
var observable = deepobserveagent(a, callback);
observable.qqqqq = {};
observable.push("11", []);
observable[1] = "hhhhhh";

observable.sort();

observable.reverse();

observable.qqqqq.wwww = 2947992;
observable.bbbbbbbbbb = "qqqqqqqqqaaaa";
Reflect.deleteProperty(observable, "bbbbbbbbbb");

关于 Proxy

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy