javascript - JavaScript 代理的替代品

Question

我想在名为 ObservableList 的自定义类上使用 Proxy，它包含一个 Array。由于 Proxy 是 ES6 之后才有的，不知道有没有其他的实现方式。

我的要求是在 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']

我的 Proxy 实现可以在 https://jsfiddle.net/ovilia/tLmbptr0/3/ 找到。

Answer 1

使用defineProperty。

不完全符合您的要求。我刚刚实现了一个“ react 阵列”。但我认为它可能会解决您的问题。

不好的部分:

1. 在目标上定义了大量的 getter/setter。
2. 访问 undefined index 器将不是响应式(Reactive)的。
3. update()待优化。

好的部分:

1. ES5 友好。
2. 如果不需要索引器，使用 set(i, val)/get(i) 将是响应式(Reactive)的。

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