8

を含むProxyカスタマイズされたクラスで使用したい. ES6以降でしか使えないので、代替実装はないのだろうか。ObservableListArrayProxy

私の要件は、オブザーバーが変更されると（通知されるのではなく）更新されることですObservableList。これにより、オブザーバーは常に何らかのフィルタリングまたはマッピング方法でオブザーバブルと一致します。

var activities = new ObservableList(['reading', 'swimming']);
var sAct = activities.filter(function(v) {
  return v[0] === 's';
});
// expect sAct.list to be ['swimming']
var meAct = activities.map(function(v) {
  return 'I am ' + v;
});
// expect meAct.list to be ['I am reading', 'I am swimming']

activities.list.push('smiling');
console.log(sAct.list, meAct.list);
// expect sAct.list to be ['swimming', 'smiling']
// expect meAct.list to be ['I am reading', 'I am swimming', 'I am smiling']

activities.list[1] = 'snoopying';
console.log(sAct.list, meAct.list);
// expect sAct.list to be ['swimming', 'snoopying']
// expect meAct.list to be ['I am reading', 'I am snoopying', 'I am smiling']

プロキシを使用した私の実装は、https: //jsfiddle.net/ovilia/tLmbptr0/3/ で入手できます。

4

3 に答える 3

2

使用済みdefineProperty。

正確にはあなたが望むものではありません。「リアクティブ配列」を実装しました。しかし、私はそれがおそらくあなたの問題でうまくいくと思います。

悪い部分:

  1. ターゲット上で大量のゲッター/セッターを定義しました。
  2. 定義されていないインデクサーへのアクセスは反応しません。
  3. update()が最適化されます。

良い部分:

  1. ES5 フレンドリー。
  2. インデクサーが必要ない場合、使用set(i, val)/get(i)はリアクティブになります。

https://jsfiddle.net/jimnox/jrtq40p7/2/

于 2016-06-03T19:00:05.223 に答える
0

プロキシの使用は厳しい要件ですか? 予測不可能で見つけにくい副作用が発生する可能性があるため、一般的なプログラミングタスクにはプロキシをお勧めしません.

可能な限り変更可能な状態を避けて、データと関数を維持してそれを変換すると、保守しやすい単純なコードになると思います。

var activities = ['reading', 'swimming'];

var sfilter = function(activities){
    return activities.filter(function(v){
        return v[0] === 's';
    });
};

console.log(sfilter(activities));

var memap = function(activities){
    return activities.map(function(v){
        return 'I am ' + v;
    });
};

console.log(memap(activities));

activities.push('smiling');
console.log(sfilter(activities));
console.log(memap(activities));

// Yes, I know this doesn't work in quite the same way,
// but you're asking for trouble here since in your
// code you're appending to one list, but overwriting
// an element in the other.
activities[1] = 'snoopying';
console.log(sfilter(activities));
console.log(memap(activities));

信頼できる唯一の情報源に固執し、それを観察してください。コピーごとに、状態の複雑さが増しています。これにより、コードのデバッグ、テスト、および拡張が困難になります。

于 2016-06-07T21:22:40.663 に答える