Patrones de diseño en #javascript - Factory
Jesus Abril
Posted on April 13, 2020
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!.
Posted on April 13, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.