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']

我使用代理的实现可在 https://jsfiddle.net/ovilia/tLmbptr0/3/

Answer 1

defineProperty使用。

不完全符合您想要的。 我刚刚实现了一个"反应式阵列"。 但我认为它可能适用于您的问题。

坏部分：

1. 在目标上定义了大量的吸气手/二传手。
2. 访问未定义的索引器将不是被动的。
3. update()有待优化。

好的零件：

1. ES5 友好。
2. 如果不需要索引器，则 USE set(i, val)/get(i) 将是反应性的。

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

Answer 2

正如问题中所描述的，我只需要ObservableList包含Array，而不是像吉姆在他复杂的答案中所做的那样扩展它。令人惊讶的是，我发现这可以通过包装原始Array操作轻松实现。

一个限制是索引操作在我的实现中不是被动的，因为我未能找到捕获索引操作的正确方法。如果您有更好的主意，欢迎告诉我！鑫达

下面是完整的实现。

export class ObservableList {
  list: Array<any>;
  private _observer: Array<ObserverList>;
  constructor(list?: Array<any>) {
    this.list = list || [];
    this._initList();
    this._initMethods();
    this._observer = [];
  }
  notify(): void {
    for (let o of this._observer) {
      o.update();
    }
  }
  private _initList(): void {
    var that = this;
    var operations = ['push', 'pop', 'shift', 'unshift', 'splice',
      'sort', 'reverse'];
    for (let operation of operations) {
      this.list[operation] = function() {
        var res = Array.prototype[operation].apply(that.list, arguments);
        that.notify();
        return res;
      }
    }
  }
  private _initMethods(): void {
    var that = this;
    var methods = ['filter', 'map'];
    for (let method of methods) {
      this[method] = (formatter: Function): ObserverList => {
        var observer = new ObserverList(that, formatter, method);
        this._observer.push(observer);
        return observer;
      }
    }
  }
}
export class ObserverList {
  public list: Array<any>;
  constructor(public observable: ObservableList, 
              public formatter: Function, 
              public method: string) {
    this.list = [];
    this.update();
  }
  update(): void {
    var list = [];
    var master = this.observable.list;
    for (var i = 0, len = master.length; i < len; ++i) {
      if (this.method === 'filter') {
        if (this.formatter(master[i])) {
          list.push(master[i]);
        }
      } else if (this.method === 'map') {
        list.push(this.formatter(master[i]));
      } else {
        console.error('Illegal method ' + this.method + '.');
      }
    }
    this.list = list;
  }
}

Answer 3

使用代理是一个硬性要求吗？我不推荐代理一般编程任务，因为您最终可能会遇到不可预测和难以发现的副作用。

如果你坚持数据和函数来转换它，避免可变在可能的情况下，我认为您最终会得到更简单的代码更易于维护。

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));

坚持单一的真相来源并观察这一点。对于每个副本，您都会增加状态复杂性。这将使调试、测试和扩展代码变得困难。