Module Pattern in JavaScript
En este artículo, aprenderemos a crear un patrón de módulo en ES5.
Dhananjay Kumar
4min read
En JavaScript, la encapsulación de código se puede lograr mediante patrones de módulos. Además, se utiliza para crear propiedades privadas y públicas. Hay varias formas en que se puede implementar un patrón de módulo. En este artículo, aprenderemos a crear un patrón de módulo en ES5. Antes de seguir adelante y comenzar a analizar la implementación del patrón de módulos, estos son algunos de los beneficios:
- Congelar el ámbito
- Code encapsulation
- Creación de ámbito privado o público
- Creating a namespace
- Creación de encapsulación pública y privada
Podemos implementar un patrón de módulo usando literales de objeto de JavaScript y la expresión de función Invocada Inmediatamente. Solo para refrescar su memoria, un literal de objeto se verá como la siguiente lista:
var Product = {
price: 600,
setOrder: function () {
return this.price;
}
}
console.log(Product.setOrder());
Puede agregar propiedades después de la creación del objeto. Además, una expresión de función Immediately-Invoked tiene un aspecto similar al ejemplo siguiente:
var add = function (num1, num2) {
let res = num1 + num2;
console.log(res);
}(7, 2);
Con la combinación de estos dos, podemos implementar patrones de módulos en JavaScript. Comencemos con la creación del módulo:
(function () {
'use strict';
// Your code here
// All function and variables are scoped to this function
var price = 99;
}());
console.log(price); // undefined
Es un módulo autónomo o un cierre anónimo. Crea el alcance de la función y todo se envuelve dentro de esa función. Entonces, cuando intentamos acceder al precio fuera de la función, no estaba definido. Tenga en cuenta que este módulo anónimo está presente en el ámbito global.
Podemos exportar el módulo asignándolo a una variable usando expression, y luego creando una encapsulación privada y pública usando la declaración return. Considere el siguiente código:
var module1 = (function () {
'use strict';
//private
let color = 'red';
// public
return {
price: 800
}
}());
console.log(module1.price); // 800
console.log(module1.color); // undefiend
Estamos haciendo lo siguiente en el fragmento de código anterior,
- Creating an IIFE.
- Asignación de la función IIFE a una variable
- Devolver un literal de objeto anónimo para crear una encapsulación privada y pública.
Todas las propiedades del objeto devuelto se volverían públicas y se puede acceder a ellas fuera del módulo, sin embargo, no se puede acceder a ninguna variable que no forme parte del objeto devuelto fuera del módulo. Es por eso que para el precio obtenemos 800 como salida, pero, para el color, el valor es indefinido porque es privado para el módulo1. Modifiquemos el módulo 1 para que tenga más propiedades privadas y públicas, como se muestra en el siguiente listado:
var module1 = (function () {
//private
let color = 'red';
let model;
function setModel(m) {
model = m;
}
// public
return {
price: 800,
getModel: function (m) {
setModel(m);
return model;
}
}
}());
console.log(module1.price); // 800
console.log(module1.getModel('bmw')); // bmw
Como puede ver, podemos acceder a variables encapsuladas privadas utilizando las funciones encapsuladas públicas. Principalmente en el patrón de módulos, cada variable es privada hasta que forma parte del objeto de retorno.
El patrón de módulo emula clases en JavaScript. Crea variables encapsuladas privadas y públicas devolviendo un objeto. Encapsula la privacidad mediante cierres. En un diagrama, podemos mostrar:
Otra variación del patrón de módulo es el patrón de módulo revelador. La única variación es que devolvemos el objeto como se muestra en la lista a continuación:
var module1 = (function () {
//private
let color = 'red';
let model;
function setModel(m) {
model = m;
}
let privatePrice = 800;
let getModel = function (m) {
setModel(m);
return model;
}
// public
return {
price: privatePrice,
model: getModel
}
}());
console.log(module1.price); // 800
console.log(module1.model('audi')); // audi
El patrón revelador de módulos tiene una nomenclatura más coherente y una mejor legibilidad del código. Para resumir usando el patrón de módulos, podemos lograr la encapsulación pública y privada en JavaScript. Espero que encuentres útil esta publicación y ahora implementes el patrón de módulo en tu aplicación JavaScript.
Espero que este post os sea de utilidad. Gracias por leer. Si te ha gustado este post, compártelo. Además, si no ha realizado Infragistics Ignite UI for Angular Componentes, ¡asegúrese de hacerlo! Tienen 30+ componentes de Angular basados en materiales para ayudarlo a codificar aplicaciones web más rápido.