首页 > 解决方案 > 在 Node/raw ES6 中,我如何从父类发出事件并从它们各自的构造函数触发子类中的事件?

问题描述

我目前正在研究 exercism.io 的“JS track - react 项目”(不是那种反应)。练习是制作对彼此的行为做出反应的类。我不确定继承是否是最好的选择,但我觉得它与我将得到的一样接近。(PS这是我在这里的第一篇文章,在决定在这里问我的第一个问题之前我尝试了很多地方。('PPS')=>'你好':)

`class InputCell extends EventEmitter {
  constructor(value) {
    super(value);
    this.value = value;
  }

  setValue(value) {
    this.value = value;

    // I'm assuming this emitter doesn't leave the scope of the object it creates?
    this.emit('cellChange');
  }
}

class ComputeCell extends InputCell {
  constructor(cells, compute) {
    super(cells, compute);
    this.value = compute(cells);

    // super wasn't my first choice, but 'this' didn't work either
    super.on('cellChange', () => compute(cells));
  }
}`

编辑-我很抱歉,这是我运行的失败测试。

`  test('compute cells update value when inputs are changed', () => {
    const inputCell = new InputCell(1);

    const computeCell = new ComputeCell(
      [inputCell], inputs => inputs[0].value + 1
    );

    inputCell.setValue(3);

    expect(computeCell.value).toEqual(4);
  });

`

标签: javascriptclassecmascript-6event-handling

解决方案


@TJ Allen:我坚持做同样的练习,但我找到了解决方案页面:https ://exercism.io/tracks/javascript/exercises/react/solutions

看了一些,但我发现这个解释很简单,足以让我理解(特别是对于您发布的测试用例):

export class InputCell {
  constructor(value) { // test 1: accepts input
    this.value = value;
  }

  setValue(value) {
    this.value = value; // test 2: allows input  value to be set
  }
}

export class ComputeCell {
  constructor(inputCells, func) { // test 3: allows setting compute cells
    this.inputs = inputCells;
    this.func = func;
  }

  get value() {
    return this.func(this.inputs); // test 5: compute cells update value when inputs are changed
  }
}

对于其他 exercism.io 用户,请注意我遗漏了测试 4 的评论: 计算单元以正确的顺序接受输入,因为它与此处提出的问题不太相关。

编辑:就个人而言,我认为特定测试 5 案例的措辞含糊不清。

“输入更改时计算单元格更新值”

哪些输入和在哪里?听起来它要求您使用某种事件侦听器,以便内部的值InputCell自动触发内部的值ComputeCell进行更改——bc 我也这么认为。

但是看看测试,我认为他们实际上要求的是:如果你InputCell用一个数字初始化一个新实例并将该实例作为参数传递来创建一个新实例,ComputeCell那么你的新ComputeCell实例将更新它value(通过getter) 基于您传递给它value的实例。InputCell如果测试消息记录了以下内容,可能会更清楚:

“计算单元格在使用新输入调用时返回不同的值”

可能仍然没有我想的那么清楚,但不太容易误导 imo。


推荐阅读