Ya sea si usas Javascript en el navegador o Javascript desde Nodejs, cuando desarrollamos aplicaciones, es necesario ir separando nuestro codigo en multiples archivos.
Bueno debes que se creo Javascript, ha existido varias formas de hacer esto, asi que en este video a modo de que conoscas más y sobretodo entiendas como funciona la separacion de logica en multiples archivos, vamos a aprender los modulos de Javascript o Javascript ES6 Modules llamado asi porque estos fueron introducidos desde la versiones 6 de Ecmascript.
Tambien en este ejemplo te mostraré como funcionan en Typescript, ya que al final Typescript el codigo final es convertido a Javascript.
Scripts Clasicos
- Cuando declaramos variables al inicio son globales.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello world</title>
</head>
<body>
<script src="./mymodule.js"></script>
<script src="./index.js"></script>
</body>
</html>
index.js
console.log(hello)
mymodule.js
let hello = "Hello world"
Javascript ES6 Modules
Bueno lo que nos ofrece el standard de Javascript actualmente es que ya no necesitamos importar multiples archivos e importarlos con scripts. basicamente podemos importar solo uno y el resto lo podemos ir ampliando con una palabras claves llamadas import y export
index.js
import { hello } from './mymodule.js'
console.log(a);
export let hello = "Hello world";
Cuando usamos los modulos de Javascript es necesario:
- siempre añadir la extension
.js - usar las rutas para importar archivos
./
Imports & Exports
Con los import y exports podemos importar y exportar practicamente cualquier tipo de dato de Javascript.
User.js
class User {
constructor(name, password) {
this.name = name;
this.password = password;
}
showInfo() {
return `I'am ${this.name} and this is my password: ${this.password}`;
}
}
// const user = new User("fazt", "fazt123")
// user.showInfo()
ahora como queremos usar esta clase desde otros archivos vamos tener que exportarlo.
para poder exportarlo podemo usar export y/o export default
export {}
export {User}
usando esta sintaxis podemos seleccionar que miembros queremos exportar fuera de este archivo. por ejemplo si yo exporto la clase User y no users, veremos que no puedo importar luego users solo User
const users = []
export { User }
index.js
import {User} from './User.js'
const user = new User("fazt", "fazt123")
export default
usando la sintaxis anterior quiere decir que el que importa mi modulo debe seleccionar que quiere de alli. pero que pasa si el no se decide por uno, bueno nosotros podemos decirle que si el no importa algo, podemos darle algo por defecto.
export default & export {}
el tener la opcion por defecto y el export no significa que tenemos que exportar solo uno de ellos, de hecho podemos usar ambos.
class User {
...
}
export { User }
export default User
Archivo index.js
* models
* User
* Product
* Products
* Category
const user = new MyUser("FAZT", "ASDASD");
user
const user2 = new User("Ryan", "ryan123")
user2
export con declaraciones
exportar un archivo no requiere que este al final del archivo. Puede exportar apenas declaras una varaible, y de nuevo no importa si esta contiene cualquier tipo de dato (objecto, arreglo, string, number, function, etc)
export const hello = "hello world";
export const num = 12;
export const myObject = {
name: "Ryan Ray",
};
export const names = ["1", 10, 30];
export const add = function (x, y) {
return a + y;
};
export function multiply(a, b) {
return a * b;
}
export const subtract = (x, y) => x - y;
index.js
import {
hello,
add,
multiply,
myObject,
names,
num,
subtract,
} from "./mymodule.js";
console.log(hello);
console.log(add(30, 20));
console.log(multiply(10, 2));
console.log(myObject.name);
console.log(names);
console.log(num);
console.log(subtract);
- algo más a notar es que no tienen un orden al importar elementos.
import *
por lo general cuando importamos tenemos una tendencia a extraer solos los elementos que queremos pero de hecho podemos tambien importarlos todos con una sola importacion.
import * as myModule from './mymodule.js'
console.log(myModule.hello);
console.log(myModule.add(30, 20));
console.log(myModule.multiply(10, 2));
console.log(myModule.myObject.name);
console.log(myModule.names);
console.log(myModule.num);
console.log(myModule.subtract);
esto es util cuando hay modulos que no ofrecen un export default.
pero si el modulo exportar un default seria asi:
export default {
hello,
num,
myObject,
names,
add,
multiply,
subtract,
};
import myModule from './module/one.js'
console.log(myModule.hello);
console.log(myModule.add(30, 20));
console.log(myModule.multiply(10, 2));
console.log(myModule.myObject.name);
console.log(myModule.names);
console.log(myModule.num);
console.log(myModule.subtract);
as
one two
as
Herramientas
- JSDoc
Suport
<script nomodule
si el navegador es moderno usara el modulo de type=module
si no lo soporat usara este. aqui basicamente colocarias tu codigo para versiones anteirores que no usan modulos. pero en la practica es mejor usar Herramientas como babel que hacen la conversion por ti.
importar todo el archivo
import ''
cargar asincronamente archivos
import('module').then()