A medida que vamos desarrollando nuestros proyectos, es inevitable ver como nuestro código comienza a crecer. Aunque al inicio esto no es un problema, un código muy extenso en un proyecto de gran escala puede ser imposible de leer y modificar. Por ello, en este post, te enseñaremos cómo funcionan los CommonJS Modules en JavaScript y cómo usarlos para organizar nuestro código.
¿Qué es un módulo?
El número de líneas de código que escribimos en un proyecto no es realmente lo que afecta nuestra lectura y orden. La verdad es que es el hecho de tener todas estas líneas en un mismo archivo, que lo hace parecer infinito y complicado. Por ello, lo que se suele hacer en los proyectos de programación es dividir el contenido en varios archivos. Ya lo hemos visto en proyectos CSS y HTML, que normalmente crean archivos individuales para el reset e, incluso, para cada sección de la página web.
En JavaScript, los módulos nos permiten separar el contenido de nuestro código en unidades lógicas. Es por ello que escuchamos la frase los buenos escritores, dividen sus libros en capítulos. Los buenos programadores, dividen su código en módulos. Esta es una buena práctica, porque nos permite describir claramente qué hace cada parte de nuestro código. Lo contrario es muy complicado, pues describir qué hace index.js cuando está compuesto por cientos de elementos que se relacionan entre si es imposible.
Dentro de la línea temporal de los módulos de JavaSript, los CommonJS Modules son el formato más antiguo. Después de este, sigue un formato un poco más moderno, conocido como AMD Modules, y finalmente tendríamos los ES6 Modules, que toman su nombre del estándar ECMAScript 6.
A continuación, te contamos exactamente cómo funcionan los CommonJS Modules en JavaScript.
¿Cómo funcionan los CommonJS Modules en JavaScript?
De manera general, lo que diferencia cómo funcionan los CommonJS Modules en JavaScript es que este formato se rige por la exportación y la importación. Pensemos que tenemos un archivo llamado square.js que contiene el siguiente código:
module.exports = class square {
constructor (width) {
this.width = width;
}
area ( ) {
return this.width ** 2;
};
¿Qué está pasando en este código? De manera sintáctica, estamos asignando una clase square a la propiedad exports de un objeto module. Desde un punto de vista más abstracto, estamos haciendo que la clase square esté disponible para el consumidor del archivo square.js por medio de la exportación. Por lo tanto, cuando deseamos utilizar la clase square en otra sección, debemos igualar la nueva variable a la palabra clave require de su archivo.
A continuación, te mostramos cómo se escribe:
const square = require(‘./square.js’);
const mySquare = new Square (2);
console.log (‘The area of mySqaure is ${mySquare.area()}’);
A partir del momento en el que escribimos require y le damos el archivo del que hemos exportado nuestra clase, el programa funciona como si hubiéramos escrito esta clase dentro del nuevo archivo. Por ello, podemos utilizar las propiedades de la clase, como lo es area, sin problema.
Entonces, los elementos imprescindibles a la hora de escribir CommonJS Modules en JavaScript son las palabras clave exports y require. Siempre necesitaremos primero exportar para luego requerir. Te ponemos otro ejemplo usando el módulo Math, uno de los módulos intrínsecos de JavaScript. Supongamos que el siguiente código está en un archivo circle.js y queremos exportar más de un elemento dentro de este archivo. Entonces, escribimos exports para cada elemento:
const {PI} = Math;
exports.area = (r) => PI * r ** 2;
exports.cinrcumference = (r) => 2 * PI * r;
Ahora, podemos usar estos elementos en otro archivo de la siguiente manera:
const circle = require (‘./circle.js’);
console.log (The area of a circle of radius 4 is ${circle.area (4)}’);
Como ves, basta con exportar la función desde el archivo original para que esta pueda usarse en otro archivo con el método require. Ten presente que dentro del require tendrás que crear el recorrido de tu archivo para llegar a él. Este recorrido o path se escribe en el sistema de Linux. Esto nos permite separar los archivos según su propósito sin eliminar la usabilidad y la relación de nuestro código.
¿Cuál es el siguiente paso?
Ahora que sabes qué son y cómo funcionan los CommonJS Modules en JavaScript, ¡es el momento de que crees y organices tus propias líneas de código! Por ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, donde no solo seguirás aprendiendo de lenguajes de programación como JavaScript, CSS y HTML, sino que también podrás crear tus propios proyectos con la guía de nuestros profesores. Así, en muy pocos meses, serás un experto en desarrollo web y estarás listo para destacar en el sector IT. ¡No te pierdas esta oportunidad e inscríbete ya!
