Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

221
Views
Sincronización de estado entre componentes (Vanilla JS o Svelte)

Estoy tratando de crear un ejemplo básico de una aplicación en la que hay 2 componentes: A y B. El objetivo es hacer que cada componente envíe un evento cuando se cumplan ambas condiciones:

  • el componente está montado
  • la biblioteca de la que todos dependen está cargada

1er intento: una nueva clase LibraryLoader

https://svelte.dev/repl/ef7876d4fa8847d1ad1e13eb616b95fa?version=3.46.2

Así que pensé que necesitaría una clase simple que pudiera enviar un evento simple (no vinculado a un nodo DOM). Así que decidí crear una clase LibraryLoader que herede de una clase Dispatcher (para poder enviar un evento no vinculado a un nodo DOM). A continuación se muestra mi intento

El problema aquí es que tenemos 2 instancias de la clase LibraryLoader (creada por A & B), por lo que no funciona. ¿Quizás una clase estática que heredaría de la clase Dispatcher? (No encontré cómo hacerlo).

2do intento: LibraryLoader como un objeto literal

https://svelte.dev/repl/5c9873bb0c59493dbe6dd6ed38bde276?version=3.46.2

Leer algunas publicaciones sobre el patrón singleton me llevó a la idea de transformar la clase LibraryLoader en un objeto literal simple. Y está funcionando mejor aquí.

Los componentes A y B están haciendo lo mismo:

  1. una vez que el componente está montado, ejecuta checkstate() que solicitará que se cargue la biblioteca o simplemente esperará si otro componente ya lo solicitó.

  2. una vez que se monta la biblioteca, envía un evento "listo"

Aquí funciona bastante bien. No se solicita que la biblioteca se cargue dos veces y ambos componentes A y B envían un evento "listo" como se esperaba. Pero hay un inconveniente obvio: el código está duplicado en A y B.

3er intento: Acción esbelta

https://svelte.dev/repl/3a68a7efaa8f43be8bffda12dadb83a3?version=3.46.2

Este intento hace uso de una acción esbelta que parecía ser una solución potencial hasta donde entendí cómo funciona.

Por lo tanto, puse el código en loadAndGetReady.js pero al final, el componente B nunca está LISTO, por lo que hay una trampa aquí.

tomare cualquier consejo :D

Gracias de antemano

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!