Búsqueda de sitios web

javascript - ¿Cómo evitar las sentencias if en typescript-reactjs?

Tengo diferentes tipos de comprobaciones de acción que realizan diferentes funcionalidades, simplemente hice una condición if y else para verificar el tipo de acción y realizar la funcionalidad correspondiente como en el siguiente fragmento de código

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

¿Hay una mejor solución para manejar este tipo de escenario, ya que tengo la posibilidad de tener más acciones en el futuro donde tendré que venir y cambiar el código una y otra vez, lo cual me pareció ineficiente.

Entre esto, la función onMessage se utiliza como un escuchador de eventos para la biblioteca porthole (Porthole es una pequeña biblioteca para la comunicación segura entre dominios en iFrame) que usé para comunicarme en el iframe de mi aplicación React.

Gracias de antemano

Respuesta #1

Los objetos en JavaScript pueden verse como un arreglo asociativo donde la clave es el nombre de la propiedad o la función.

Entonces, puedes hacer tu llamada así:

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

ADVERTENCIA (como señaló Joe Clay): con esta sintaxis, cada función de tu objeto this es invocable, por lo que puede causar una "brecha de seguridad", si this contiene funciones que no deseas "exponer".

Respuesta #2

Las instrucciones switch son tus amigas en situaciones como esta:

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

La respuesta de ADreNaLiNe-DJ también funcionaría si tu cadena messageEvent siempre coincide con uno de los métodos en this; sin embargo, a mí me parece un poco hackeo, ya que básicamente significaría que si tuvieras un this.definitelyNotAnEventHandler, aún podrías llamarlo a través de onMessage. Prefiero el enfoque más explícito; aunque eso es solo una cuestión de gusto :)

Artículos relacionados