Continuamos viendo las novedades de ES6. En esta ocasión, vamos a ver los módulos. ES6 introduce la posibilidad de separar nuestro código en módulos, es decir, separar nuestro código en trozos más pequeños y reusables en toda la aplicación. Esto ayudará a que mantener nuestra aplicación sea mucho más fácil. La verdad es que esta funcionalidad ya se existía, pero se tenían que utilizar librerías externas como AMD o CommonJS, entre otras, pero ahora ES6 lo introduce de forma nativa a JS
Al separar nuestro código por módulos, podremos exportar ( export ) clases, funciones, variables o constantes e importarlas ( import ) desde cualquier parte de nuestra aplicación. Vamos a ver unos ejemplos:
|
1 2 3 4 5 6 7 8 9 10 |
// función para comprobar si un string es palíndromo function checkPalindrome(string) { const reversedString = string .split("") .reverse() .join(""); return string === reversedString; } export { checkPalindrome }; export const TEST = true; |
Para importarlo:
|
1 2 3 |
import { TEST, checkPalindrome } from "./test.js"; console.log(TEST); // true console.log(checkPalindrome("string")); // false |
En test.js creamos una función y una constante y las exportamos para importarlas en index.js y poderlas utilizar. Como he dicho antes, esto también funciona con las variables y clases y funciona de la misma manera.
También, podríamos exportar un elemento como principal añadiendo después de export , default . Aunque hay que tener en cuenta que solamente podremos tener un export default por módulo. Vamos a ver un ejemplo:
|
1 2 3 4 5 6 7 8 9 10 |
// función para comprobar si un string es palíndromo function checkPalindrome(string) { const reversedString = string .split("") .reverse() .join(""); return string === reversedString; } export default checkPalindrome; export const TEST = true; |
Como puedes ver al poner export default en la función checkPalindrome , los {} desaparecen. Como solamente podemos tener un export default por módulo, a las demás exportaciones se deberán poner {}.
|
1 2 3 |
import checkPalindrome, { TEST } from "./test.js"; console.log(TEST); // true console.log(checkPalindrome("string")); // false |
También para importar, desaparecen los {} del elemento exportado como principal y se mantienen para los demás, como puedes ver en la línea destacada.
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR