En este artículo, exploraremos cómo escribir módulos de JavaScript que puedan ser utilizados tanto por las aplicaciones del lado del cliente como del lado del servidor.
Tenemos una pequeña aplicación web con un cliente JavaScript (que se ejecuta en el navegador) y un servidor Node.js que se comunica con él. Y tenemos una función getFrequency() que debe ser utilizada tanto por el servidor como por el cliente para obtener la frecuencia de los caracteres en una string dada. Queremos crear un conjunto único de métodos que puedan facilitar la tarea en ambos extremos.
Enfoque:
Escribir código para el lado del cliente (que se ejecuta en el navegador) difiere mucho de la aplicación Node.js del lado del servidor. En el lado del cliente, tratamos principalmente con DOM o API web como cookies, pero estas cosas no existen en Node. Otras razones por las que no podemos usar módulos de Node en el lado del cliente es que el Node usa elSistema de módulos CommonJS , mientras que el navegador utiliza módulos ES estándar que tienen una sintaxis diferente.
En el Node, usamos module.exports para exponer la funcionalidad o la propiedad. Sin embargo, esto fallará en el navegador, ya que el navegador no puede reconocer las exportaciones . Entonces, para que funcione, verificamos si las exportaciones están definidas, si no, creamos un objeto sensible para exportar funciones. En el navegador, esto se puede lograr creando una variable global que tenga el mismo nombre que el del módulo.
La estructura del módulo será similar a la siguiente:
sampleModule.js
javascript
// Checking if exports is defined
if(typeof exports === 'undefined'){
var exports = this['sampleModule'] = {};
}
// The code define the functions,
// variables or object to expose as
// exports.variableName
// exports.functionName
// exports.ObjectName
// Function not to expose
function notToExport(){ }
// Function to be exposed
exports.test(){ }
El formato anterior tiene el problema de que todo lo que definamos en sampleModule.js pero que no se exporte estará disponible para el navegador, es decir, tanto la función notToExport() como test() funcionarán fuera de este archivo. Entonces, para superar esto, envolvemos el módulo en un cierre.
sampleModule.js
javascript
(function(exports) {
// The code defines all the functions,
// variables or object to expose as:
// exports.variableName
// exports.functionName
// exports.ObjectName
}) (typeof exports === 'undefined'? this['sampleModule']={}: exports);
Ejemplo: Hagamos un módulo de muestra que contenga un método ‘getFrequency’ para contar la frecuencia de caracteres en una string.
- módulocompartido.js
javascript
// All the code in this module is
// enclosed in closure
(function(exports) {
// Helper function
function toLC(str) {
return str.trim().toLowerCase();
}
// Function to be exposed
function getFrequency(str) {
str = toLC(str);
var freq = [];
for(var i = 0; i < 26; i++) {
freq.push(0);
}
for(var i = 0; i < str.length; i++) {
freq[str.charCodeAt(i)-97]++;
}
return freq;
}
// Export the function to exports
// In node.js this will be exports
// the module.exports
// In browser this will be function in
// the global object sharedModule
exports.getFrequency = getFrequency;
})(typeof exports === 'undefined'?
this['sharedModule']={}: exports);
- nodeApp.js
javascript
// Simple node.js script which uses sharedModule.js
// Get module.exports of sharedModule
const utilities = require('./sharedModule');
// Print frequency of character
console.log(utilities.getFrequency("GeeksForGeeks"));
- clientApp.js
javascript
// Use functionality getFrequency which
// is available in sharedModule object
document.write(this.sharedModule.getFrequency("GeeksForGeeks"));
- índice.html
html
<script src="./sharedModule.js"></script> <script src="./clientApp.js"></script>
Pasos para ejecutar el programa:
- Copie y pegue todo el código con sus respectivos nombres de archivo y asegúrese de que todos los archivos estén en el mismo directorio.
- Abra la terminal en el mismo directorio y ejecute ‘node nodeApp.js’ .
- Abra index.html en cualquier navegador.
Producción:
- Salida en la consola node.js:
[ 0, 0, 0, 0, 4, 1, 2, 0, 0, 0, 2, 0, 0, 0, 1, 0, 0, 1, 2, 0, 0, 0, 0, 0, 0, 0 ]
- Salida en el navegador:
Publicación traducida automáticamente
Artículo escrito por Vinod Tahelyani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA