Patrón de diseño “Module”

Escrito por Juan Felipe Morales Zavala

2 de octubre de 2019

Hace algunos días tuve que recurrir a este patrón de diseño del cual solo tenia ciertas referencias, aunque al parecer es uno de los mas comunes en JavaScript, necesitaba cargar ciertas funciones que no estuvieran en mi archivo js, pero que pudiera reutilizar dichas funciones desde cualquier otro archivo js, básicamente el archivo contiene funciones re utilizables que sean accesibles desde varios archivos js entonces vayamos al código para ver cómo se crea este patrón

var miModulo = (function() {
  'use strict';
}());

Estas líneas asignan el modulo a la variable y así poder llamar nuestros métodos desde esa variable, también es una buena práctica ejecutar sus módulos en modo estricto ES5. El modo estricto te protegerá de algunas de las partes más peligrosas de JavaScript.

var miModulo = (function() {
  'use strict';

  return {
    metodoPublico: function() {
      console.log('Hola Mundo!');
    }
  };
}());
     
miModulo.metodoPublico();  // Salida 'Hola Mundo!'

En la última línea invocamos nuestra variable mas punto para poder acceder al método que deberá ser público, esto se logra poniéndolo dentro del return, así que por el momento simplemente y sin quebrarnos la cabeza accederemos al método público el cual solo imprimirá en pantalla un “Hola Mundo!”.

var miModulo = (function() {
  'use strict';

  var _propiedadPrivada = 'Hola Mundo!';
    
  function _metodoPrivado() {
    console.log(_propiedadPrivada);
  }
    
  return {
    metodoPublico: function() {
      _propiedadPrivada();
    }
  };
}());
  
miModulo.metodoPublico();                    
// salida 'Hola Mundo!'   
console.log(miModulo._propiedadPrivada);     
// es indefinido por la proteccion del modulo
miModulo._propiedadPrivada();                  
// es TypeError protegido por la proteccion del modulo

Vamos a entender el siguiente código tenemos una variable como antes que puede acceder a la propiedades y métodos del método, cuando accedemos al metodoPublico nuestra salida será “Hola Mundo!” pero porque cuando queremos acceder a la propiedad y al método que son privados no podemos, bueno básicamente todo radica en el return, todo lo que nosotros declaremos dentro de él, será a lo que podamos acceder por eso es que cuando llamamos al metodoPublico el si puede accesar a la _propiedadProvada, pero unicamente porque esta dentro del return

var miModulo = (function() {
  'use strict';

var _propiedadPrivada = 'Hola Mundo!';
var propiedadPublica = 'Soy una propiedad publica';

function _metodoPrivado() {
    console.log(_propiedadPrivada);
  }

function metodoPublico() {
    _metodoPrivado();
  }
    
  return {
    metodoPublico: metodoPublico,
    propiedadPublica: propiedadPublica
  };
}());
  
miModulo.metodoPublico();
// salida 'Hola Mundo!'   
console.log(miModulo.propiedadPublica);
// salida 'Soy una propiedad publica'
console.log(miModulo._propiedadPrivada);
// es indefinido por la proteccion del modulo
miModulo._metodoPrivado();
// es TypeError protegido por la proteccion del modulo

Aquí tenemos dos propiedades una privada y otra pública, así como dos métodos uno privado y otro público, como lo pueden notar dentro del return existen 2 líneas, un método y una propiedad, ambas son públicas o hacen referencia para el ejemplo en que son públicas, realmente no es necesario poner público o privado, pero como podemos ver los que no no están dentro del return son inaccesibles, esto es en cierta parte una protección para que no puedan accesar a nuestros métodos o propiedades fácilmente.

Recuerda que los paréntesis al final son para hacer una auto llamada a function que está en la primera línea de código, otra cosa a tomar en cuenta es que en el ejemplo siguiente yo puedo llamar a mi método como quiera por ejemplo “metodo” y accesará al metodoPublico dentro del módulo.

return {
    metodo: metodoPublico,
    propiedad: propiedadPublica
  };

Eso seria todo por el momento si alguien tiene dudas o sugerencias favor de hacérmelas llegar.

Saludos!

Patrón de diseño “Module” was originally published in 200 Response on Medium, where people are continuing the conversation by highlighting and responding to this story.