Question

我有不同类型的操作检查，它们执行不同的功能，我只是在if和else条件下检查操作类型并执行相关功能，如下面的代码片段

private dynamic DoSomething(dynamic parameters)

有没有更好的解决方案来处理这种情况，因为我有可能在将来有更多的行动，我必须一次又一次地改变代码，我觉得这是低效的。

此public onMessage = (messageEvent) => { if (messageEvent.data.action === 'subscribeTriggers') { this.subscribeTriggers(messageEvent); } else if (messageEvent.data.action === 'setGlobalFilters') { this.setGlobalFilters(messageEvent); } else if (messageEvent.data.action === 'getGlobalFilters') { this.receiveGlobalFilters(messageEvent); } else if (messageEvent.data.action === 'initFromGlobalFilters') { this.initFromGlobalFilters(messageEvent); }函数用作porthole库的事件监听器（Porthole是一个用于安全跨域iFrame通信的小型库。），我曾经在我的反应应用程序中进行通信。 ; s iframe

提前致谢

Answer 1

javascript中的对象可以看作是一个关联数组，其中键是属性或函数的名称。

所以，你可以这样打电话：

this[messageEvent.data.action](messageEvent);

警告（正如Joe Clay所述）：使用此语法，对象this的每个函数都是可调用的，因此如果this，它可能会导致安全漏洞包含您不希望＆＃34;暴露＆＃34;。

的功能

Answer 2

在这种情况下，Switch语句是你的朋友：

public onMessage = (messageEvent) => {
    switch (messageEvent.data.action) {
        case "subscribeTriggers":
            return this.subscribeTriggers(messageEvent);
        case "setGlobalFilters":
            return this.setGlobalFilters(messageEvent);
        case "getGlobalFilters":
            return this.recieveGlobalFilters(messageEvent);
        case "initFromGlobalFilters":
            return this.initFromGlobalFilters(messageEvent);
    }
}

如果你的messageEvent字符串总是与this上的某个方法匹配，那么ADreNaLiNe-DJ的答案也会有效 - 虽然这对我来说感觉有些苛刻，因为它基本上意味着你有一个this.definitelyNotAnEventHandler，你仍然可以通过onMessage来调用它。我更喜欢更明确的方法 - 这只是一个品味问题，但是：）

如何避免使用typescript-reactjs中的if语句？

2 个答案: