Estructurar las funciones JavaScript (Creación de una librería JavaScript 2ª parte)

En esta entrada continúa la serie en la que se explica cómo crear una librería JavaScript desde cero. Hoy se va a explicar cómo estructurar las funciones JavaScript dentro de la librería. Para ello va a ser necesario separar el código en diferentes archivos. Consiguiendo de esta manera que sea más fácil mantener y depurar el código.

Esta entrada pertenece a la serie “Creación de una librería JavaScript” cuyo código se puede encontrar en la cuenta de GitHub de Analytics Lane. Serie compuesta por las siguientes entradas:

• Creación de una librería JavaScript
• Estructurar las funciones JavaScript
• Pruebas unitarias en JavaScript
• Rango en pruebas unitarias en JavaScript
• Cobertura de las pruebas unitarias en JavaScript
• Medir la calidad del código JavaScript
• Compresión del código JavaScript
• Ejecutar múltiples scripts npm

Factorización del código

En la entrada anterior solamente se utilizo un archivo, index.js, para almacenar todo el código. A medida que el proyecto aumenta de tamaño esto no es práctico, ya que se hace más complicado el mantenimiento. Una forma más eficiente de gestionar el código del proyecto es usar diferentes archivos de tamaño manejable. En los que pueda ser fácil saber qué funciones contiene cada uno.

Para almacenar todo el código del proyecto se va a crear una carpeta lib. En esta se creará un nuevo archivo jslane.js que será el punto de partida del código que se escriba a partir de ahora. Siendo necesario ahora indicar enindex.js que importe el código del nuevo archivo. Así index.js quedará solamente con el siguiente código.

En Analytics Lane

Los récords con asterisco, o la épica del titular sin contexto – El bestiario de los indicadores económicos absurdos (parte 8 y final)

module.exports = require('./lib/jslane.js');

El método require indica que cargue el contenido del módulo ./lib/jslane.js. siendo este el contenido que se exportará. Por otro lado, jslane.js de momento solamente tendrá el siguiente código.

(function () {
  'use strict';

  const jslane = exports;
}());

En este indicamos que se va a utilizar el modo estricto de JavaScript y se crear una variable jslane que se utilizará para exportar las funciones. Además, se utiliza closure para definir un ámbito privado que oculta las variables de los módulos de las globales.

Creación de funciones para trabajar con vectores

La única función que contenía el módulo hasta ahora no es de gran utilidad. Solamente saca un mensaje a través de la terminal. Ahora se va a crear diferentes funciones que trabajan con vectores. Una de las primeras puede ser obtener la suma de todos los elementos de un vector. Esto se puede crear en un nuevo archivo array.js que se guarda dentro de la carpeta lib y contienen el siguiente código:

(function () {
  'use strict';

  const array = exports;

  // Sum an array
  array.sum = function (array) {
    let result = 0;

    for (let i = 0; i < array.length; ++i) {
      result += array[i];
    }

    return result;
  };
}());

Además de esto, para incluir esta función en la librería, es necesario indicar en jslane.js que importe este nuevo módulo. Para lo que el archivo ha de pasar a tener la siguiente forma:

(function () {
  'use strict';

  const jslane = exports;

  jslane.array = require('./array.js');
}());

Evaluación del código

A la hora de probar el funcionamiento de la librería se puede volver a utilizar el archivo run.js. Una vez importado jslane simplemente se ha de llamar a las función jslane.array.sum() para evaluar si este funciona de forma correcta. Por ejemplo, escribiendo el siguiente código en run.js.

En el caso de ejecutar el archivo en node se obtendrá los valores 3 y 6 en la terminal. Los cuales son los resultados esperados.

$ node run
3
6

Compilación de la librería

Ahora utilizando el script que se ha definido en la entrada anterior se puede crear un único archivo JavaScript con todo el código. Simplemente ejecutan en la línea de comandos npm run build. Así, la función escrita en este caso se podrá utilizar en un navegador.

Conclusiones

En esta segunda entrada se ha visto cómo estructurar las funciones JavaScript de forma que sea más fácil mantener el código. Hasta ahora el correcto funcionamiento de las fusiones se ha realizado manualmente. Lo cual no es eficaz cuando el proyecto crece de tamaño, siendo más eficaz crear pruebas unitarias. En la siguiente entrada se verá cómo crear y ejecutar pruebas unitarias.

Gracias por el tiempo dedicado a la lectura de esta entrada. En caso de estar interesado en seguir esta serie, además del resto de publicaciones, podéis suscribiros a la lista de correo, al canal de Telegram o seguir a Analytics Lane en redes sociales.

Imágenes: Pixabay (skylarvision)