Tipos de script
- Script: La ejecución del HTML se detiene mientras el script Fetching y la ejecución se terminan.
- Script async: La ejecución del HTML continua mientras el script Fetching ocurre y se detiene solo cuando el script se ejecuta
- Script defer: La ejecución del HTML continua mientras el script Fetching ocurre y el script se ejecuta luego de cargar todo el HTML
Scope
Representa el tiempo de vida en el qué una variable existe.
- var: El scope es su contexto de ejecución o declarada fuera de la función es global.
- let: El scope es el bloque de código en el qué está declarado.
- const: El scope es el bloque de código en el qué está declarado, pero su valor no puede ser reasignado.
Closures
Son funciones que regresan una función o un objeto con funciones que mantienen las variables que fueron declaradas fuera de su scope.
This
Se refiere a un objeto, ese objeto es el que actualmente está ejecutando un pedazo de código.
Las funciones call, apply y bind
Son parte del prototipo Function. Toda función usa este prototipo y por lo tanto tiene estas tres funciones.
functionName.call() Ejecuta la función recibiendo como primer argumento el this y los siguientes son los argumentos que recibe la función que llamó a call.functionName.apply() Ejecuta la función recibiendo como primer argumento el this y como segundo un arreglo con los argumentos que recibe la función que llamó a apply.functionName.bind() Recibe como primer y único argumento el this. No ejecuta la función, solo regresa otra función con el nuevo this integrado.
Prototype
En Javascript todo son objetos, no tenemos clases, no tenemos ese plano para crear objetos. Todos los objetos “heredan” de un prototipo que a su vez hereda de otro prototipo y así sucesivamente creando lo que se llama la prototype chain.
Cómo funciona JS Engine
- Recibe código fuente
- Parsea el código a Tokens y con este produce un Abstract Syntax Tree (AST)
- Se compila a bytecode y se ejecuta
- Se optimiza a machine code y se reemplaza el código base
// esprima.org = página para ver estructura del código js
// astexplorer.net = explorar el AST del código js
Event Loop
- Hace qué JS parezca multihilo cuando en verdad es un solo hilo
- JS se organiza usando 2 estructuras de datos: Stack y Memory Heap
- Está entre el Stack y la cola de tareas y se encarga de qué cuando se vacía el Stack toma lo qué está en la cola de tareas y lo envía al Stack
- Las Promesas van en una segunda cola de tareas llamada Microtasks
- El Event Loop siempre le da preferencia a las Microtasks
Promesas
- Para crear las promesas usamos la clase Promise. El constructor de Promise recibe un solo argumento, un callback con dos parámetros, resolve y reject. resolve es la función a ejecutar cuando se resuelve y reject cuando se rechaza.
- El async/await es solo syntax sugar de una promesa, por debajo es exactamente lo mismo.
Proxy
Sirve para interceptar la lectura de propiedades de un objeto (los get, y set) entre muchas otras funciones. Así, antes de que la llamada llegue al objeto podemos manipularla con una lógica que nosotros definamos.
Generators
- Los generadores son funciones especiales, pueden pausar su ejecución y luego volver al punto donde se quedaron recordando su scope.
- Los generadores regresan una función.
- Empiezan suspendidos y se tiene que llamar next para que ejecuten.
- Regresan un value y un boolean done que define si ya terminaron.
- yield es la instrucción que regresa un valor cada vez que llamamos a next y detiene la ejecución del generador.
ServiceWorkers
- Sirven para hacer que nuestras aplicaciones funcionen Offline.
- Muy usados en las Progressive Web Apps (PWA) los ServiceWorkers son una capa que vive entre el navegador y el Internet.
- Parecido a como lo hacen los proxys van a interceptar peticiones para guardar el resultado en caché y la próxima vez que se haga la petición tomar del caché ese resultado.
Intersection Observer
Sirve para observar elementos y si cruzan un umbral que nosotros definimos nos lo va a notificar para tomar acción. El umbral se define por el porcentaje que tiene intersección con el viewport, con la parte visible de nuestra página.
Visibilitychange
El visibilityChange forma parte del API del DOM llamado Page Visibility y nos deja saber si el elemento es visible, puede ser usado para ejecutar una acción cuando cambiamos de pestaña. Así podemos ahorrar batería y mejorar la UX.
Getters y Setters
Los getters y setters son funciones que podemos usar en un objeto para tener propiedades virtuales. Se usan los keywords set y get para crear estas propiedades.
Patrones de diseño
- Una solución para un problema dentro de un Contexto recurrente
- Sirven como una caja de herramientas de soluciones a problemas comunes
Categorías de patrones de diseño de software
Patrones creacionales: Proveen diferentes formas de crear objetos.
- Builder: Permite crear varios objetos a partir de un objeto fuente.
- ** Abstract Factory**: Busca agrupar un conjunto de clases que tiene un funcionamiento en común llamadas familias, las cuales son creadas mediante un Factory.
- Factory Method: Factory Method permite la creación de objetos de un subtipo determinado a través de una clase Factory.
- Prototype: Su funcionalidad es la clonación de objetos, estos nuevos objetos son creados mediante un pool de prototipos elaborados previamente y almacenados.
- Singleton: El singleton te va a ayudar a qué una clase sea solo capaz de crear una instancia de sí misma y esa instancia siempre será la misma.
Patrones Estructurales: Describen formas de componer objetos para formar nuevas estructuras flexible y eficientes.
- Adapter: Expone una interfaz externa y esconde una interfaz interna.
- Bridge: Bridge es un patrón de diseño utilizado para desacoplar una abstracción de su implementación de manera que las dos puedan ser modificadas por separado sin necesidad de modificar la otra.
- Composite: Sin importar si tienes un arreglo o un elemento tratas a todos iguales.
- Decorator: Está diseñado para solucionar problemas donde la jerarquía con subclasificación no puede ser aplicada.
- Facade: La característica de ocultar la complejidad de interactuar con un conjunto de subsistemas proporcionando una interfaz de alto nivel, la cual se encarga de realizar la comunicación con todos los subsistemas necesarios.
- Flyweight: Centra su atención en la construcción de objetos ligeros, mediante la abstracción de las partes reutilizables que pueden ser compartidas con otros objetos.
- Proxy: Centra su atención en la mediación entre un objeto y otro.
Patrones de Comportamiento: Gestionan algoritmos y responsabilidad entre objetos
- Chain of Responsibility: Se distingue por su versatilidad, permitiendo resolver problemas donde no estamos muy seguros de qué objeto deberá procesar una solicitud concreta.
- Command: Nos permite ejecutar operaciones sin conocer los detalles de la implementación de la misma.
- Interpreter: Utilizado para evaluar un lenguaje definido como Expresiones.
- Iterator: Permite recorrer una estructura de datos sin que sea necesario conocer la estructura interna de la misma.
- Mediator: Se encarga de gestionar la forma en que un conjunto de clases se comunican entre sí.
- Memento: Nos permite capturar el estado de un objeto en un momento determinado con la finalidad de regresar a este estado en cualquier momento.
- Observer: Un objeto le pasa el estado interno a muchos objetos qué están interesados
- State: State se caracteriza por modificar su comportamiento dependiendo del estado en el que se encuentra la aplicación.
- Strategy: Establecer en tiempo de ejecución el rol de comportamiento de una clase.
- Template Method: Define una estructura algorítmica en la súper clase, delegando la implementación a las subclases.
- Visitor: Separa la lógica que se pueden realizar sobre una estructura compleja.
// EveryLayout: patrones de soluciones de diseño
// MediaQueries: ejemplos de páginas en distintos tamaños de pantalla
