1

Tengo una pagina web de un formulario en el que tengo unos componentes colocados con Bootstrap.

Tengo un componente que es una barra que a medida que voy rellenando las preguntas de un formulario la barra debe ir creciendo. Para eso tengo una clase hecha que se llama barra y otra que se llama formulario. La clase barra debe recoger el numero de preguntas que se van contestando de formulario.

El formulario manda un evento a la pagina principal con:

window.parent.postMessage

Y lo recojo con:

window.addEventListener ('message', function(e) { // código  });

¿ Es correcta esta manera de pasar datos de una clase a otra ? ¿ Hay alguna mas sencilla ? He leído que se puede hacer con el patrón observador, pero no se como se implementa en javascript

Voy a agregar mas codigo para aclararlo:

En lo que es la pagina principal 'pagina.html' donde tengo el formulario tengo algo asi:

window.addEventListener('message', function (e) {
    switch (e.data.tipo) {
      case "FormularioControl":
        barra.goStep(e.data.subTab);
      break;
    }
  });

Donde barra y formulario es un objeto de una clase en javascript que lo instancio como

var  barra = new BarraControl();
var formulario = new FormularioControl();

Dentro de la clase FormularioControl tengo una llamada a un metodo cada vez que se pulsa boton de siguiente y que manda un mensaje a pagina principal.html de esta manera:

window.parent.postMessage({"tipo":"FormularioControl", "subTab": this.currentSubTab }, "*");

Donde la llave 'tipo' refleja de que clase viene el mensaje, en este caso de "FormularioControl" y la variable "subTab" tiene el valor del paso por el que va. Segun este valor la barra crecera o decrecera.

4
  • Mensajes entre páginas o entre clases? el 31 dic. 2018 a las 20:26
  • Entre clases ( objetos ) que están en esa página. En este caso sería como componentes de la pagina que se envían mensajes
    – Popularfan
    el 31 dic. 2018 a las 22:21
  • ¿Podrías poner el código que tienes para la clase que controla el formulario? Generalmente se pide un ejemplo mínimo verificable exponiendo el problema el 1 ene. 2019 a las 18:29
  • Ok , probare a ver de resumirlo es que tengo un codigo muy largo
    – Popularfan
    el 1 ene. 2019 a las 20:28

1 respuesta 1

1

Realmente lo que estás haciendo es usar la mensajería para implementar el patrón Observador, que no es más que permitir a otros componentes saber los cambios en una clase Observable.

Si quieres hacerlo sin usar los eventos del API de mensajería, que están más pensados para la comunicación entre páginas distintas abiertas en el mismo navegador, podrías implementarlo tú con algo como:

class FormularioControl {

  constructor() {
    this.observadores = [];
    console.log('Empezamos con', this.observadores.length, 'observadores');
  }
  //... métodos con el código de control del formulario
 
  subscribe(callbackFn) {
    if (typeof callbackFn === 'function') {
    console.log('Añadimos una subscripción');
      this.observadores.push(callbackFn);
    }
  }
  
  notificarObservadores(datos) {
  console.log('Nofiticamos a todos');
    this.observadores.forEach( callbackFn => callbackFn(datos));
  }
  
  simularAvance() {
    for (let i = 0; i < 5; i++) {
      setTimeout(() => {
        this.notificarObservadores({progreso: i*25})
      }, 1500 * i);
    }
  }
  
}

class BarraControl {

  constructor (id) {
    this.progreso = 0;
    this.barra = document.getElementById(id);
  }
  
  actualizarProgreso (p) {
    this.progreso = p;
    this.barra.value = +this.progreso;
    console.log('Progreso Actual:', this.progreso);
    
  }
}

const formulario = new FormularioControl();
const barra = new BarraControl('progreso');
const barra2 = new BarraControl('progreso2');
formulario.subscribe(datos=> barra.actualizarProgreso(datos.progreso));
formulario.subscribe(datos=> barra2.actualizarProgreso(datos.progreso));
formulario.simularAvance();
<progress id="progreso" value="0" max="100">
</progress>

<progress id="progreso2" value="0" max="200">
</progress>

9
  • Excelente solución ! Muchas gracias !
    – Popularfan
    el 2 ene. 2019 a las 11:45
  • Tengo una pequeña duda en este codigo, en el caso que desee desubscribirme ?
    – Popularfan
    el 2 ene. 2019 a las 15:42
  • Pablo es posible que el objeto barra a su vez tenga un método subscribe para notificar a formulario ? Lo he probado y parece que no funciona en este caso.
    – Popularfan
    el 19 feb. 2019 a las 16:47
  • La barra tendría que ser un observable, en ese caso el 19 feb. 2019 a las 16:52
  • Por otro lado no pensé en desuscripciones, pero podría hacerse que al suscribirte la función devolviese un ID, de manera similar a setTimeout o setInterval el 19 feb. 2019 a las 16:53

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.