8

JavaScript プロキシを使用して、オブジェクトの配列の変更を検出しようとしています。

問題:削除や挿入などの配列の変更があるたびに、その削除または挿入された項目を取得したいと考えています。

現在のコード

target = [{ id: 1, a: 'a' }, { id: 2, a: 'b' }];
proxy = new Proxy(target, {
    get: function (target, property: string, receiver) {
        if (property === 'pop') {
            console.log('deleted object', target[target.length - 1]);
        }
        console.log('get', property);
        // property is index in this case
        return target[property];
    },
    set: function (target, property, value, receiver) {
        console.log('set', property, 'to', value);
        target[property] = value;
        // you have to return true to accept the changes
        return true;
    }
});

現在の考え:pop()配列から削除された項目を取得するために少し回避策を実行しましたが、配列から最後の項目を削除するため、メソッド に対してのみ機能します。spliceしかし、メソッドまたはpushまたはを使用して変更が行われた場合でも、変更を取得する方法が必要popです。

ありがとう。

[更新] 私が見つけた解決策:

https://github.com/ElliotNB/observable-slim このライブラリを使用して配列の変更を検出しました。配列内のネストされたプロパティの変更も検出できます。これはまさに私が探していたものです。

このライブラリを使用している理由は、プロキシを使用しているためです。

4

1 に答える 1

0

getter で実際のターゲットを公開しないことをお勧めします。cutosom 修飾子をサポートするラッパー関数を作成できます。以下の例をご覧ください。

const target = [
  { id: 1, a: "a" },
  { id: 2, a: "b" },
];
const proxy = new Proxy(target, {
  get: function (target, property, receiver) {
    switch (property) {
      case "push":
      case "pop":
      case "slice":
      case "splice":
        return (...arg) => target[property](...arg);
    }
    throw Error("Not supported yet");
  },
});

proxy.push({ id: 3, a: "c" })
console.log(proxy.pop())
console.log(proxy.slice(1,2))
console.log(proxy.pop())

于 2021-12-12T04:25:28.230 に答える