Los módulos proporcionan una forma de organizar el código y dividir una aplicación en partes más pequeñas. Por ejemplo, una computadora personal se puede dividir en “módulos” de teclado, mouse y monitor que se pueden conectar por separado.
Idealmente, en el diseño modular, queremos que nuestros módulos sean «reutilizables» de forma independiente. Un teclado PS/2 se puede conectar a cualquier máquina que tenga un puerto PS/2 porque no está diseñado para una máquina individual. Del mismo modo, en software, su empresa u organización puede tener varias aplicaciones que requieren autenticación. En lugar de volver a escribir el código de inicio de sesión y autenticación repetidamente para cada aplicación individual, es posible que desee exponer la funcionalidad de autenticación a través de un solo módulo.
Los módulos en JS++ se pueden declarar usando la palabra clave ‘módulo’.
Cree una carpeta llamada ‘Calculadora’. Cree un archivo dentro de la carpeta llamada ‘Calculator.jspp’ y agregue el siguiente código:
module Calculator
{
int add(int a, int b) {
return a + b;
}
int subtract(int a, int b) {
return a - b;
}
}
Sin embargo, no podemos simplemente ejecutar el código del módulo en el mismo archivo. JS ++ fomenta el «diseño modular» y requiere que sus módulos estén separados de la lógica de su programa principal.
Archivo principal
El “archivo principal” es el punto de entrada de la aplicación. En otras palabras, le está diciendo al compilador JS++: «Mi aplicación comienza aquí». JS++ permite solo un punto de entrada de la aplicación. Comencemos con un ejemplo; cree un archivo llamado ‘main.jspp’ que importará nuestro módulo ‘Calculadora’ con el siguiente código:
import Calculator;
external $;
int result = Calculator.add(1, 1);
$(".display-result").text(result);
Están sucediendo muchas cosas aquí, así que vamos a desglosarlo. En capítulos anteriores, importamos bibliotecas de JavaScript utilizando la palabra clave ‘externo’. Todavía importamos jQuery (una biblioteca de JavaScript) usando la palabra clave ‘externa’ en nuestro código anterior. Sin embargo, para importar bibliotecas JS++ (definidas con la palabra clave ‘módulo’), necesitamos usar la palabra clave ‘importar’. Esta es una distinción importante porque nos permite aislar el código JavaScript no seguro.
La declaración de ‘importación’ espera el nombre completo del módulo. En nuestro ejemplo simple, el nombre completo del módulo es simplemente ‘Calculadora’. JS++ sabe qué hacer a partir de ahí.
A continuación, usamos uno de los métodos definidos en el módulo ‘Calculadora’: el método ‘agregar’. Simplemente sumamos 1 + 1 y almacenamos el resultado en la variable ‘resultado’. Luego usamos jQuery para mostrar el resultado de nuestro cálculo.
Vamos a crear un archivo calculadora.html para mostrar nuestro resultado:
<!DOCTYPE html>
<head>
<title>Calculator</title>
</head>
<body>
<div class="display-result"></div>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="app.jspp.js"></script>
</body>
</html>
Compile los archivos Calculator.jspp y main.jspp. Para Windows, esto es tan fácil como seleccionar ambos archivos, hacer clic derecho en uno de los archivos y elegir «Compilar con JS++». Para Mac y Linux, use el siguiente comando:
js++ Calculator.jspp main.jspp
JS++ debe generar un archivo ‘app.jspp.js’.
El orden de los archivos de entrada no importa. JS++ resolverá automáticamente el orden en que se deben compilar los archivos.
Abra index.html y debería ver el resultado: 2.
Módulos Anidados y Calificación Parcial
En JS++, podemos declarar módulos anidados para organizar aún más nuestro código. Hay dos maneras de hacer esto:
module MyApplication
{
module Calculator
{
// ...
}
}
o:
module MyApplication.Calculator
{
// ...
}
Cambiemos Calculator.jspp para que el módulo ‘Calculator’ se vuelva exclusivo de ‘MyApplication’ para organizar nuestro código:
module MyApplication.Calculator
{
int add(int a, int b) {
return a + b;
}
int subtract(int a, int b) {
return a - b;
}
}
Ahora que hemos cambiado la estructura de nuestro módulo, tenemos que cambiar nuestra instrucción de importación main.jspp para reflejar esto. Sin embargo, vamos a agregar un giro para ahorrarnos algo de tipeo:
import MyApplication.Calculator;
external $;
int result = add(1, 1);
$(".display-result").text(result);
Compile los archivos y abra index.html en su navegador web. Deberías notar el mismo resultado: 2.
¿Notaste el giro adicional?
En lugar de llamar a Calculator.add, simplemente llamamos a la función de suma a través de ‘agregar’. Todas las siguientes son formas correctas de llamar a la función ‘agregar’:
add(1, 1); Calculator.add(1, 1); MyApplication.Calculator.add(1, 1);
Las dos primeras líneas se conocen como “calificación parcial”. La tercera y última línea se conoce como “calificación completa”. Un nombre totalmente calificado es la «ruta completa» y un nombre parcialmente calificado es una «ruta relativa».
JS ++ le permite usar tales rutas relativas a través de nombres parcialmente calificados para mantener su código conciso. Sin embargo, cuanto más califique un nombre, más fácil será leer y seguir su código. La elección del estilo de código depende de usted.