En este tutorial, en un capítulo, aprenderemos sobre los populares patrones de diseño de JavaScript, la razón principal por la que los patrones de diseño exploran la complejidad de OOJS en un formato muy simple.
Supongamos que tiene una clase y desea crear varias instancias, como:
Como no conocemos ningún soporte formal para clases en JavaScript, podemos usar la función constructora para crear clases. Hay muchas formas flexibles de crear un objeto. Veamos cómo podemos hacer eso:
Los tres patrones de diseño de JavaScript más populares:
1- patrón de fábrica 2- patrón de constructor 3- patrón de prototipo
Usando los patrones de diseño anteriores, podemos crear una clase. Dado que JavaScript no admite clases, necesitamos crear un objeto y crear funciones reutilizables utilizando dicho objeto.
Empecemos:
1- Patrón de fábrica de JavaScript:
Comience a usar una función variable como esta:
Y necesitamos crear un objeto vacío, creo por ejemplo:
O podemos decir:
Ambos son exactamente iguales, pero prefiero var temp = {} solo por brevedad.
Primero, veamos la función completa:
Esto ahora se comporta como una "fábrica", por ejemplo cada vez que necesitamos crear dos nuevos empleados:
Y obtenga los detalles de los empleados con la función printEmployee:
La salida será:
Siri, 25, ingeniero de software
Y
Alexa, 27, desarrollador Java.
Usando este patrón de fábrica, acabamos de crear dos detalles de empleados y estamos viendo cómo funciona la función reutilizable.
Ejemplo en vivo: https://jsfiddle.net/himstar/aj4mrf8e/2/
2- Patrón de constructor de JavaScript:
La salida será:
Siri, 25, ingeniero de software
Y
Alexa, 27, desarrollador Java.
Usamos la palabra clave "esto" en lugar del objeto "temp" y simplemente usando la palabra clave "nuevo" aquí creo una función y el mismo resultado que "fábrica".
Puede crear miles de propiedades de empleados con la función de constructor único.
Ejemplo en vivo: https://jsfiddle.net/himstar/gg2hzge3/5/
3- Patrón de prototipo de JavaScript:
Este es un patrón muy diferente en comparación con el patrón anterior. Primero creamos un objeto vacío:
Ahora agreguemos "Propiedades" y "Función" al objeto compartido.
Cada objeto tiene una sala común llamada "Prototipo".
Hay exactamente dos formas de definir:
1-
"O" en el área compartida con "prototipo". Este mensaje no se adjunta directamente al colaborador, pero puede acceder al colaborador debido al espacio compartido.
2-
Vamos a crear un prototipo de empleado estándar:
Ahora obtenemos los siguientes detalles sobre los dos empleados "Siri" y "Alexa":
Y
Nuevamente, la respuesta se basará en los patrones anteriores, solo que la forma es diferente y mezcla la función constructora.
Lo interesante es que si eliminó el nombre "Employee1" por ejemplo, tiene un valor predeterminado:
La salida será:
Sin nombre, 25 años, desarrollador de DotNet.
Es decir, si no tenemos un nombre de propiedad, se usará el nombre de propiedad predeterminado. El mismo comportamiento se aplica a otra propiedad.
Si hacemos:
Devuelve verdadero solo porque empleado1 no tiene una propiedad propia pero puede obtener la sombra de la propiedad predeterminada. Simplemente usando el prototipo, si no hay ninguna propiedad, parece una propiedad predeterminada del objeto.
Ahora ejecuta lo siguiente:
El resultado es "falso" porque no hay una propiedad de salario predeterminada.
URL en vivo: https://jsfiddle.net/himstar/ydkst73o/21/
Sin mucha explicación teórica, he tratado de ilustrar los patrones de diseño de JavaScript más importantes y prácticamente muy útiles usando ejemplos. Déjame saber si tienes alguna sugerencia o pregunta.