javascript - 在 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);
});
`
解决方案
@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。
推荐阅读
- machine-learning - MCTS 如何与“精确线”配合使用
- c# - Gremlin.Net 一次遍历获取边 Id、InV、OutV 和属性
- html - 在一行上设置样式而不更改网站上的所有行
- react-native - React Native 的核心框架如何部署到应用程序使用的设备上?
- r - 使用 ggplot2 构建箱线图
- angular - 需要使用 Angular 5 服务警告用户页面到期的解决方案吗?
- javascript - 使用 window.location.replace 后如何防止页面刷新
- java - 如何减少 Java 中的振幅数组大小?
- postgresql - 哪些命令不能在事务块中执行?
- python - 如何使用 python discord 向机器人所在的每个服务器发送消息