Este breve tutorial tiene como objetivo ayudarlo a comenzar a crear y usar módulos de JavaScript y proporciona algunos ejemplos simples.
¿Qué es ES6?
El nombre oficial de JavaScript es en realidad ECMAScript, y la versión 6 introdujo la funcionalidad del módulo para crear y consumir módulos, por lo que es posible que vea módulos de JavaScript denominados módulos ES6 o ES2015.
¿Qué es un módulo JavaScript?
A medida que se vuelve más aventurero con sus proyectos de programación JavaScript y su código se vuelve más complejo, puede comenzar a ser más difícil de administrar.
Una forma de mitigar esto es dividir su código en varios archivos, cada uno centrado en una tarea específica o relacionado con un aspecto determinado de su programa.
Eso es lo que los módulos de JavaScript logra la funcionalidad:le permite organizar su código en archivos separados e importarlos cuando sea necesario.
También te permite usar módulos que otras personas han escrito y puesto a disposición para su uso:¡un verdadero ahorro de tiempo!
Creación de un módulo
Mantendré este ejemplo simple. Creemos un módulo que contenga dos funciones:
- Una función llamada shortestWord devuelve la palabra más corta de una cadena dada
- Una función llamada longestWord devuelve la palabra más larga de una cadena determinada
Aquí está el módulo de ejemplo para este artículo, wordCalc.js :
// Define the function called **shortestWord** which returns the shortest word from a given string
function shortestWord(words){
let splitWords = words.split(' ');
let sortArray = splitWords.sort(function(a, b) { return a.length - b.length; }); // Sort the array from shortest to longest
return sortArray[0]; // Return the first element in the array, which will be the shortest
}
// Define the function called **longestWord** which returns the longest word from a given string
function longestWord(words){
let splitWords = words.split(' '); // Split the words up into an array of words
let sortArray = splitWords.sort(function(a, b) { return a.length - b.length; }); // Sort the array from shortest to longest
return sortArray[sortArray.length-1]; // Return the last item in the array, which will be the longest
}
// Export the above functions for use in other scripts
export { shortestWord, longestWord }; La exportación Declaración
En el código anterior, verás exportar declaración en uso. Eso es lo que hace que los módulos funcionen. Tú exportas variables y funciones de su módulo e importar en otros archivos donde se requiera.
Uso de un módulo
Ahora tienes un módulo; puedes usarlo. Variables y funciones exportadas desde un módulo se puede importar en sus otros archivos JavaScript:
// Import the functions from the module created in wordCalc.js
import { shortestWord, longestWord } from './wordCalc.js';
// Call the shortestWord from the module to test it
console.log(shortestWord("terrible dog")); // Prints 'dog'
// Call the longestWord from the module to test it
console.log(longestWord("fancy cat")); // Prints 'fancy' La importación Declaración
La pieza final del rompecabezas del módulo es importar afirmación utilizada anteriormente. Ha importado las funciones de wordCalc.js archivo de módulo creado anteriormente. Por supuesto, no tiene que importar todo desde un módulo; puede omitir las variables o funciones que no necesita para mantener las cosas fáciles de leer.
Los módulos pueden importarse desde otros módulos y almacenarse en subdirectorios. Es una forma práctica de mantener tu proyecto organizado.
Ámbitos
Las variables tienen ámbito en JavaScript. Por lo tanto, las variables declaradas en un módulo no están disponibles fuera de él a menos que se exporten. Esto incluye variables de alcance global dentro de los módulos:no estarán disponibles para otros módulos o su aplicación en general a menos que se exporten explícitamente.
Conclusión
Cuando esté listo para profundizar en los módulos de JavaScript, consulte la documentación para desarrolladores de Mozilla.