Laboratorio temático II

Patrón de módulo revelador

Patrones de diseño

Un patrón de diseño es una idea general de como resolver un problema, pero no llega a ser una especificación exacta o un algoritmo

Más bien es como la idea general de una receta

Aunque fueron popularizados en un libro dirigo a la programación orientada a objetos (en C++ y SmallTalk) tienen uso en cualquier lenguaje de programación (como en JavaScript)

El que les interesa en este momento es el patrón de módulo revelador

Funciones

En JavaScript hay, básicamente, dos formas distintas de definir funciones:

function saludar () {
	alert("Hola, mundo");
}

let saludar = function (){
	alert("Hola, mundo");
}

Como declaración:

Puede ser invocada antes de ser declarada en el código (hoisting)
Debe llevar nombre
Puede usarse como parámetro en otras funciones (callback)

Como expresión:

Debe ser declarada en el código antes de ser invocada
Puede ser anónima
Puede usarse como parámetro en otras funciones (callback), valor de retorno, asignaciones y/o en expresiones de funciones inmediatamente invocadas (IIFE)

Funciones flecha

Hay, además, otra forma de escribir funciones como expresión

function saludar () {
	alert("Hola, mundo");
}

let saludar = function (){
	alert("Hola, mundo");
}

Como declaración:

Puede ser invocada antes de ser declarada en el código (hoisting)
Debe llevar nombre
Puede usarse como parámetro en otras funciones (callback)

Como expresión:

Debe ser declarada en el código antes de ser invocada
Puede ser anónima
Puede usarse como parámetro en otras funciones (callback), valor de retorno, asignaciones y/o en expresiones de funciones inmediatamente invocadas (IIFE)

let saludar = () => {
	alert("Hola, mundo");
}

Función flecha

No tienen su propio contexto de this

IIFE

Usamos una IIFE para ejecutar código en su propio alcance (scope), o bien, para crear un nuevo contexto asíncrono dentro de un contexto síncrono

En general, consisten en dos partes:

Una expresión de función
Una invocación inmediata a la expresión de función

IIFE

Usamos una IIFE para ejecutar código en su propio alcance (scope), o bien, para crear un nuevo contexto asíncrono dentro de un contexto síncrono

(function () {
  // instrucciones
})();

IIFE estándar

IIFE

Usamos una IIFE para ejecutar código en su propio alcance (scope), o bien, para crear un nuevo contexto asíncrono dentro de un contexto síncrono

(() => {
  //instrucciones
})();

IIFE con una función flecha

IIFE

Usamos una IIFE para ejecutar código en su propio alcance (scope), o bien, para crear un nuevo contexto asíncrono dentro de un contexto síncrono

(async () => {
  //instrucciones
})();

IIFE asíncrona

Módulo revelador

Este patrón consiste en usar un archivo para una funcionalidad específica (un módulo completo) y encapsular algunas funciones y valores a través de una cerradura mientras que se exponen algunas funciones y valores públicos a través de un objeto de retorno

Módulo revelador