Skip to main content Link Menu Expand (external link) Document Search Copy Copied

Patrones 1

Contenidos
  1. Closures
    1. Definición
    2. Variables privadas
    3. Memory Heap
  2. Module Pattern
    1. Definición
    2. Encapsulamiento de código y librerías para navegadores

Closures

Definición

En JavaScript, un closure es una función que mantiene una referencia a una variable en su scope externo, incluso después de que ese scope ya no esté disponible. Veamos el siguiente código.

function counterHandler(initValue) {
  let currentValue = initValue;

  const increment = (step) => {
    currentValue += step
    console.log(`currentValue = ${currentValue}`)
    return currentValue
  }

  const decrement = (step) => {
    currentValue -= step
    console.log(`currentValue = ${currentValue}`)
    return currentValue
  }

  return {
    increment,
    decrement,
  }

}

En este caso, la función counterHandler crea dos funciones internas increment y decrement que mantienen una referencia a la variable currentValue en su scope externo. De esta manera, la variable currentValue no está disponible para el alcance global, pero aún se puede acceder y modificar a través de las funciones increment y decrement.

Variables privadas

En un flujo normal de ejecución, la variable currentValue debería destruirse una vez se ha ejecutado por completo la función counterHandler, pero como existe una referencia hacia esa variable en las funciones internas que se han creado (increment y decrement), la variable se mantiene en memoria para su futura modificación.

Al devolver un objeto con solo las funciones increment y decrement, se evita que la variable currentValue sea accesible o modificada desde fuera del alcance de la función counterHandler, lo que simula el comportamiento de una “variable privada” en lenguajes compilados.

Memory Heap

El Memory Heap es una región de memoria en JavaScript donde se almacenan los objetos creados por el programa. Es decir, es el lugar donde se alojan los datos dinámicos que el programa necesita durante su ejecución, como variables, objetos, arreglos, funciones, etc.

JavaScript es un lenguaje de programación que utiliza un recolector de basura o “garbage collector” para administrar la memoria de manera automática. El garbage collector es un proceso que se encarga de liberar la memoria que ya no se está utilizando para que el programa no se quede sin memoria disponible.

Cuando un objeto se crea en JavaScript, se aloja en el Memory Heap. Si se crea una referencia a ese objeto, por ejemplo, a través de un closure, la referencia también se aloja en el Memory Heap. Si la referencia no se utiliza en ningún momento, el garbage collector la detecta y libera la memoria ocupada por el objeto al que hacía referencia.

Si quieres entender más este concepto visita este enlace

Module Pattern

El Module Pattern es un patrón de diseño de JavaScript que se utiliza para encapsular el código en un módulo y evitar que las variables y funciones definidas dentro del módulo colisionen con otras definidas en otros lugares del programa.

Definición

const AppModule = () => {

  const app = {
    carouselWrapper: '#landingCarousel',
  
    getActiveItemData() {
      const activeItem = this.carouselWrapper
        .find('.carousel-item.active')
      return activeItem.data()
    },
  
    setActiveName() {
      const carouselInfoName = $('.carousel-info h2')
      const carouselInfoDescription = $('.carousel-info p')
      const { name, description } = this.getActiveItemData()
      
      carouselInfoName.text(name)
      carouselInfoDescription.text(description)
    },
  
    initialize() {
      this.carouselWrapper.on('slid.bs.carousel', () => this.setActiveName())
  
      this.setActiveName()
    }
  }

  return {
    initialize: app.initialize
  }
  
}

En el ejemplo que se muestra, se está utilizando el Module Pattern para crear un objeto llamado AppModule que tiene tres métodos: getActiveItemData, setActiveName e initialize.

getActiveItemData y setActiveName son métodos internos del objeto que acceden a elementos del DOM y modifican su contenido. initialize es el método que se expone al exterior del objeto, que se puede invocar para inicializar el módulo.

Encapsulamiento de código y librerías para navegadores

Al utilizar el patrón de diseño de Module Pattern, se está encapsulando el código dentro del objeto AppModule, lo que significa que cualquier variable o función definida dentro del objeto no afectará el scope global. Esto reduce el riesgo de colisiones de nombres y conflictos entre diferentes piezas de código.

Este patrón se ha utilizado ampliamente en el desarrollo de bibliotecas y frameworks de JavaScript, donde es necesario evitar conflictos entre diferentes módulos.

Es importante destacar que este patrón ha sido sustituido por otras técnicas de modularización como los módulos ES6, que son nativos de JavaScript, y que tienen la ventaja de ser más legibles y fáciles de mantener. Sin embargo, el patrón de diseño de Module Pattern sigue siendo una técnica valiosa en ciertos casos de uso en los que es necesario mantener la compatibilidad con versiones antiguas de navegadores o para bibliotecas o frameworks que necesitan un control más granular sobre el ámbito de su código.