javascript - 如何删除在发布/订阅数据存储中注册的回调？

Question

请参阅我已实现的以下简单的发布/订阅类型数据存储:

class DataStore {
    constructor() {
        this.store = {};
        this.callbacks = {};
    }

    getState(key) {
        return this.store[key];
    }

    setState(key, value) {
        this.store[key] = value;
        this.callbacks[key].forEach( callback => {
            callback(this.store[key]);
        });
    }

    onChange(key, callback) {
        this.callbacks[key] = this.callbacks.key || [];
        this.callbacks[key].push(callback);
    }
}

我正在尝试弄清楚如何为此类实现 removeCallback 方法，但我并没有真正取得任何进展。我可以在 callbacks 上调用 filter 并使用 !== 找到确切的函数并将其删除，即:

removeCallback(key, callback) {
    this.callbacks[key].filter( cb => cb !== callback );
}

——但这种方法依赖于保存回调，而我不会。见下文:

store.onChange('someValue', val => { /* do something with val */ });
store.removeCallback('someValue', ???);

由于传递给 onChange 的函数实际上是匿名的，我如何识别它？

Answer 1

removeCallback 的调用者需要具有唯一标识回调的内容。最简单的方法是首先将回调存储在变量中:

const cb = val => { /* do something with val */ };
store.onChange('someValue', cb);
store.removeCallback('someValue', cb);

另请注意，.filter 不会改变现有数组 - 您需要将 .filter 的结果分配给 this.callbacks[key] :

removeCallback(key, callback) {
  this.callbacks[key] = this.callbacks[key].filter( cb => cb !== callback );
}

您可能也想改变

this.callbacks[key] = this.callbacks.key || [];

至

this.callbacks[key] = this.callbacks[key] || [];
                                    ^^^^^

或者，您可以使用 Set 来代替，从而不再需要 .filter 和迭代:

onChange(key, callback) {
  this.callbacks[key] = this.callbacks[key] || new Set();
  this.callbacks[key].add(callback);
}
removeCallback(key, callback) {
  this.callbacks[key].delete(callback);
}

如果你想稍微简洁一点，你可以让 onChange 返回传递的回调:

const cb = store.onChange('someValue', (val) => { ... });

与

onChange(key, callback) {
  this.callbacks[key] = this.callbacks[key] || new Set();
  this.callbacks[key].add(callback);
  return callback;
}