Patrones de Diseños. Estructura de Composición. Estructura de Herencia.
Los scripts de estos ejercicios se encuentran en el Capitulo 3 del Libro 3 "Programando Paso a Paso y Más".
Los scripts de estos ejercicios se encuentran en el Capitulo 3 del Libro 3 "Programando Paso a Paso y Más".
3.5.1. Extender prototipos de objetos nativos como `Array.prototype` y `String.prototype`
La operación de extender prototipos debe realizarse con precaución debido a varios riesgos potenciales.
Hay alternativas para realizar esta tarea sin llegar a extender prorotipos nativos.
3.5.2. Explicación de por qué modificar prototipos nativos puede ser peligroso
Los riesgos potenciales
a) Comportamiento inesperado
b) Conflictos con bibliotecas
c) Dificultad para depurar
d) Pérdida de compatibilidad
e) Problemas de seguridad
3.6. `hasOwnProperty()`, `in` y `for...in`
3.6.1. Uso correcto de `hasOwnProperty()
3.6.2. Uso correcto de in
Ejemplo 1
3.6.3. Uso correcto de for...in
Ejemplo 1
3.6.4. Comparación entre `for...in` y `Object.keys()
Ejemplo 1. Iterando sobe todas las propiedades con for…in
Ejemplo 2 Iterando sobre las propiedades propias con Object.keys() (no incluye las heredadas)
3.7. Prototipos en class (ES6+)
3.7.1. Explicación de cómo las clases de ES6 utilizan prototipos bajo el capó.
Ejemplo 1. Invocando prototipos ocultos.
3.7.2. Comparación entre clases y funciones constructoras
3.7.2.1. Funciones Constructoras
Ver el 2.3.1.2 Creación de Objetos mediante Funciones Constructoras
Ejemplo 1. Creación de objetos mediante funciones constructoras
3.7.2.2. Clases. Transformemos la función constructora anterior en una clase.
Ejemplo 2. Convirtiendo a la función constructora Fulano en una clase
3.7.2.3. Extendiendo la clase anterior, agregando un nuevo método y una nueva propiedad
Ejemplo 1. Agegando un nuevo método a la clase Fulanito
Ejemplo 2. Extendiendo la clase anterior con una nueva sub clase y agregando una nueva propiedad
3.8.1 Patrón Prototype
Ejemplo 1. Patrón Prototype en JavaScript.
3.8.2 Patrón Factory:
Ejemplo 1. Diferentes niveles de acceso
3.8.3 Patrón Singleton.
Ejemplo 1 Patrón singleton en JavaScript.
3.8.4 Patrón Builder
Ejemplo 1. Patrón Builder de creación.
3.9 Uso de Mixin para compartir funcionalidades entre objetos
Ejemplo 1. Aplicación de Mixims
3.10. Buenas Prácticas y Consideraciones
3.10.1. Optimización del uso de memoria mediante la herencia prototípica.
Ejemplo 1 Uso excesivo de memoria
Ejemplo 2 Reutilizando codigo para aumentar el rendimiento de memoria
Ejemplo 3 Midiendo el rendimiento de cada funcion
Tiempo en generar el 1 MM de objetos con la funcion crearExcesivo()
Tiempo en generar el objeto con la funcion reutilizar()
Diferencia de tiempo y relacion en la creacion de objetos entre ambas funciones.
La relación entre ambas soluciones es de
En el primer ejercicio (3.10.1 - 3.1), se generan 1 millón de objetos
utilizando la función crearExcesivo().
El tiempo de creación de cada objeto es menor en comparación
con el segundo ejercicio, donde se crea un solo objeto que contiene
1 millón de objetos utilizando la función reutilizar().
Aunque la creación de objetos con crearExcesivo() es más rápida,
requiere 1 millón de clústeres para almacenar todos los objetos creados.
Por otro lado, al utilizar la función reutilizar(), se genera un único objeto
que almacena 1 millón de objetos, ocupando así menos espacio de memoria.
En resumen, a mayor velocidad de generación de objetos,
mayor es el consumo de memoria.
3.11.1 Herencia vs Composición
Ejemplo 1. Usando Herencia.
Ejemplo 2. Usando Composición. Existe una relación tipo: "un objeto tiene un/a especificación"
Cuándo Usar Herencia vs Composición
a) Usar Herencia cuando existe una relación clara de "es un/a".
En el ejemplo 1 anterior un Animal es un Ave o un Pez
b) Usar Composición cuando:
Existe una relación de "tiene un/a" o necesitas combinar comportamientos.
En el ejemplo 2 anterior, un animal tiene comportamientos como caminar, volar, correr, etc.
3.11.2 Usar Herencia cuando existe una relación clara de "es un/a".
Ejemplo 1: Utilizando Herencia. Un Producto es un/a Articulo
3.11.3 Usar Composición cuando existe una relación de tiene un/a caracteristica".
Ejemplo 1: Usando Composición. Un Producto tiene un/a caracteristica.
En el ejemplo creamos funciones específicas para manejar las características
3.12.1 Crear una jerarquía de objetos utilizando herencia prototípica.
Proyecto Pagina Web Modular Responsive
La herencia prototípica en JavaScript permite crear una jerarquía de objetos
donde los objetos pueden heredar propiedades y métodos de otros objetos.
Implementaremos un ejemplo de herencia prototípica para gestionar la
construcción de una página web modular (10-03proto_index.html) que
vincula componentes externos como 10-03proto_header.html, 10-03proto_style.css,
10-03proto_article.html, 10-03proto_footer.html y 10-03proto_app.js.
La herencia prototípica se utilizará para crear una estructura base
que permita modularizar y reutilizar los métodos y propiedades necesarios
para crear y ensamblar la página.
Link hacia la pagina web modular
Descripción del Código de Implementación
a) Herencia Prototípica: Clase Base
La clase base Pagina maneja la estructura y métodos compartidos entre los componentes.
b) Herencia Prototípica: Clase Derivada
Creamos una clase derivada PaginaModular, que extiende la funcionalidad
de Pagina para incluir componentes específicos.
c) Uso de las Clases para Crear la Página
Creamos la página 10-03proto_index.html ensamblando los componentes y generando el HTML.
d) Contenido de los Componentes Externos
- 1. 10-03proto_header.html
- 2. 10-03proto_article.html
- 3. 10-03proto_footer.html
- 4. 10-03proto_style.css
- 5. 10-03proto_app.js
e) El resultado.
Cuando ejecutamos el código en app.js, se genera el
archivo 10-03proto_index.html dinámicamente.
f) Notas sobre la Implementación de la Herencia Prototípica
- PaginaModular.
Extiende la funcionalidad de Pagina a través de Object.create,
asegurando que los métodos compartidos estén disponibles.
- Modularidad
Los componentes (header.html, article.html, etc.) están completamente separados,
lo que facilita su mantenimiento, actualización y reutilización.
- Escalabilidad
Puedemos agregar más componentes, estilos o scripts simplemente
extendiendo PaginaModular.
- Dinamismo
Este enfoque permite generar páginas dinámicamente en función
de los componentes requeridos, haciendo que el sistema sea más flexible.