Patrones de diseño en #javascript - Factory

Este patrón de diseño te va a ayudar a crear objetos o clases de tipo similar, cuando no sabes exactamente de qué tipo serán finalmente o cuales vas a utilizar.

Según vayas creando tu proyecto vas a decidir cuales vas a instanciar.

Clases u objetos Similares, te voy a dar un ejemplo:

// Imaginemos que tenemos una pequeña app que crea Webs

function constructorSitios() {
     // creamos el método
     this.crearElemento = (texto, tipo) => {
          let html;

          if (tipo === 'input'){
               html = new InputHTML(texto)
          } else if (tipo === 'img'){
               html = new ImangenHTML(texto)
          } else if (tipo === 'h1'){
               html = new HeadingHTML(texto)
          } else if (tipo === 'p'){
               html = new ParrafoHTML(texto)
          }
          html.tipo = tipo;
          return html;
     }
}

Como vemos, los objetos declarados son objetos similares, son relacionados y comparten mismas propiedades, en este caso la variable texto.

// Ahora imaginemos que necesitamos crear un H1
// Creamos el constructor HeadingHTML
const HeadingHTML = function(texto){
     this.texto = texto;
};
const sitioWeb = new constructorSitios();
sitioWeb.crearElemento('Bienvenidos', 'h1') );

Esto llamará al método que declaremos en nuestra función y una vez pasada la condición if, creará una nueva instancia de HeadingHTML, a su vez le pasamos el texto (Bienvenidos), obteniendo como resultado un objeto que contiene un H1.

HeadingHTML {texto: "Bienvenidos", tipo: "h1"}

En resumen

El factory abre un abanico de posibilidades al trabajar con objetos similares sin tener que duplicar código, solo deberás instanciarlo!.