• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

217
Vistas
¿Cómo evitar declaraciones if en typescript-reactjs?

Tengo diferentes tipos de verificaciones de acción que tienen diferentes funcionalidades, simplemente hice si y otra condición para verificar el tipo de acción y hacer la funcionalidad relevante como el fragmento de código a continuación

 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 el potencial de tener más acciones en el futuro donde tengo que venir y cambiar el código una y otra vez, lo que sentí que es ineficiente?

Entre esta función onMessage se usa como detector de eventos para la biblioteca de ojo de buey (Porthole es una biblioteca pequeña para la comunicación segura de iFrame entre dominios) que solía comunicar en el iframe de mi aplicación de reacción

Gracias por adelantado

about 3 years ago · Santiago Trujillo
2 Respuestas
Responde la pregunta

0

Los objetos en javascript se pueden ver como una matriz asociativa 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 lo señaló Joe Clay): con esta sintaxis, cada función de this objeto es invocable, por lo que puede causar una "brecha de seguridad", si contiene funciones this no desea "exponer".

about 3 years ago · Santiago Trujillo Denunciar

0

Las declaraciones de cambio son tu amigo 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 su cadena de evento de messageEvent siempre coincide con uno de los métodos en this ; sin embargo, eso me parece un poco raro, ya que básicamente significaría que si tuviera un this.definitelyNotAnEventHandler , aún podría llamarlo a través onMessage . Prefiero el enfoque más explícito, aunque eso es solo cuestión de gusto :)

about 3 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda