2017-01-06 84 views
2

我有不同類型的動作檢查哪個做不同的功能,只是我做了,如果和其他條件檢查動作類型,並做了相關的功能,如下面的代碼片段如何避免typecript-reactjs中的if語句?

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

的有沒有更好的解決方案來處理這種情況下,因爲我有可能在未來有更多的行動,我必須一次又一次地改變代碼,我覺得這是低效的。

onMessage功能之間被用作事件偵聽porthole庫(舷窗是安全跨域的iFrame連通的小庫)。這在我以前在我的預先

反應應用的iframe

由於通信

回答

5

javascript中的對象可以看作是一個關聯數組,其中的鍵是屬性或函數的名稱。

所以,你可以讓你的電話是這樣的:

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

警告(由喬·克萊指出):這個語法,你的對象this的每一個功能調用,因此它可能導致一個「安全違反「,如果this包含你不想」暴露「的功能。

0

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

腎上腺素DJ的答案也將工作,如果你的messageEvent串總是匹配對this的方法之一 - 這感覺有點哈克給我,雖然,因爲它基本上意味着如果你有一個this.definitelyNotAnEventHandler,你仍然可以通過onMessage來調用它。我更喜歡更明確的方法 - 這只是一個口味的問題,儘管:)

+0

你的「明確」的方法是正常工作,但沒有填補這個「需要」:「我必須再來改變代碼再次,我覺得效率低下。「# –

+0

@ ADreNaLiNe-DJ:它並沒有完全消除改變代碼的需要,但它減少了重複。我只是不喜歡用任意字符串索引到'this',它可能會導致微妙的錯誤。如果你想要走這條路線,最好是創建一個'this.eventHandlers'對象,而不是'this.eventHandlers [messageEvent.data.action](messageEvent)'。 –

+0

我同意你的觀點,但在提交的代碼中沒有任何內容暗示除了被調用的回調函數和'onMessage'外,還有其他東西。但關於「安全」的「警告」是相關的。 –