JavaScript | Módulos

En el artículo anterior sobre los cierres en javascript , aprendimos que el cierre es uno de los conceptos más importantes pero menos entendidos en Javascript. El cierre es una metodología en la que una función secundaria puede mantener el entorno de su ámbito principal incluso después de que la función principal ya se haya ejecutado, podemos decir lo contrario para recordar o recrear el ámbito y sus miembros que ya se ha ejecutado una vez.

Ahora los módulos de JavaScript son la mejor implementación de Closure. Los módulos son pequeñas unidades de código independiente y reutilizable que se desea utilizar como bloques de construcción para crear una aplicación Javascript no trivial. Los módulos permiten al desarrollador definir miembros privados y públicos por separado, lo que lo convierte en uno de los patrones de diseño más deseados en el paradigma de JavaScript. Puede ver los módulos como Clases como en cualquier otro lenguaje de programación orientado a objetos.

Nota: En ES2015, la palabra clave class se usó para definir clases en Javascript, pero aunque JavaScript sigue siendo un lenguaje de programación sin clases, mientras que las clases de ES2015 son básicamente funciones especiales.

Volviendo a los Módulos, primero veamos un ejemplo para ver qué pueden hacer los Módulos, intentaremos simular el comportamiento de una Clase Rectángulo dando la longitud de dos lados y recuperando el área.

<script>
// This is a Rectangle Module. 
function Rectangle() 
{ 
    var length, width; 
  
    function create(l, w) 
    { 
        length = l; 
        width = w; 
    } 
  
    function getArea() 
    { 
        return (length * width); 
    } 
  
    function getPerimeter() 
    { 
        return (2 * (length + width)); 
    } 
  
    // This is the object to consist public members. 
    // The rest are private members. 
    var publicAPI = { 
        create : create, 
        getArea : getArea, 
        getPerimeter : getPerimeter 
    }; 
  
    // To be returned upon creation of a new instance. 
    return publicAPI; 
} 
  
// create a Rectangle module instance 
var myRect = Rectangle(); 
myRect.create(5, 4); 
document.write("Area: " + myRect.getArea()); 
document.write("<br> Perimeter: " + myRect.getPerimeter()); </script>

Producción:

Area: 20
Perimeter: 18

Aquí, la función Rectangle() sirve como un alcance externo que contiene las variables requeridas, es decir, longitud, anchura, así como las funciones create(), getArea() y getPerimeter(). Todos estos juntos son los detalles privados de este
módulo Rectangle al que no se puede acceder/modificar desde el exterior. Por otro lado, la API pública, como sugiere el nombre, es un objeto que consta de tres miembros funcionales y se devuelve cuando se completa la ejecución de la función Rectangle. Usando los métodos de la API podemos crear y obtener el valor del área y el perímetro del rectángulo.

Nota: Como mencionamos anteriormente, los módulos son los conceptos más cercanos a las Clases en cualquier otro lenguaje OOP, muchos desarrolladores pueden tener ganas de usar la palabra clave ‘nuevo’ al crear una nueva instancia del Módulo Rectángulo. Rectangle() es solo una función, no una clase adecuada para instanciar, por lo que solo se llama normalmente. Usar nuevos sería inapropiado y de hecho desperdiciaría recursos.

Ejecutar Rectangle() crea una instancia del módulo Rectangle y se crea y asigna un alcance completamente nuevo a la función y, por lo tanto, se generó una nueva instancia del miembro de las funciones, ya que lo asignamos a una variable, ahora la variable tenía la referencia a los miembros de la API públicos permitidos. Por lo tanto, podemos ver que ejecutar el método Rectangle() crea una nueva instancia completamente separada de cualquier otra anterior.

Todas las funciones miembro tienen un cierre sobre el largo y el ancho, lo que significa que estas funciones pueden acceder a ellas incluso después de que finalice la ejecución de la función Rectangle().

Eso resume cómo funcionan los módulos en JavaScript. Pronto descubriremos más temas interesantes sobre JavaScript y haremos proyectos relevantes para perfeccionar nuestras habilidades recién aprendidas.

Publicación traducida automáticamente

Artículo escrito por PronabM y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *