Módulos JavaScript

Tabla de contenido

Tutorial de JavaScript
Introducción a JavaScript
JavaScript Dónde
Salida de JavaScript
Declaraciones de JavaScript
Sintaxis de JavaScript
Comentarios de JavaScript
Variables de JavaScript
JavaScript deja
constante de JavaScript
Operadores de JavaScript
Aritmética de JavaScript
Asignación de JavaScript
Tipos de datos de JavaScript
Funciones de JavaScript
Objetos JavaScript
Eventos de JavaScript
Cadenas de JavaScript
Métodos de cadena de JavaScript
Búsqueda de cadenas de JavaScript
Literales de plantilla de JavaScript
Números de JavaScript
JavaScript grandeint
Métodos numéricos de JavaScript
Propiedades de números de JavaScript
Matrices de JavaScript
Métodos de matriz de JavaScript
Ordenación de matrices de JavaScript
Iteración de matriz de JavaScript
constante de JavaScript
Objetos de fecha de JavaScript
Formatos de fecha de JavaScript
Métodos de fecha de JavaScript
Métodos de configuración de fechas de JavaScript
Objeto matemático de JavaScript
JavaScript aleatorio
Booleanos de JavaScript
Comparación de JavaScript y operadores lógicos
JavaScript si no si no si no
Declaración de cambio de JavaScript
JavaScript para bucle
JavaScript para en
JavaScript para de
JavaScript mientras bucle
JavaScript romper y continuar
Iterables de JavaScript
Conjuntos de JavaScript
Mapas JavaScript
tipo de JavaScript
Conversiones de tipos de JavaScript
JavaScript bit a bit
Objeto RegExp de JavaScript
Precedencia de operadores de JavaScript
Errores de JavaScript al intentar capturar y lanzar
Alcance de JavaScript
Elevación de JavaScript
JavaScript "uso estricto"
JavaScript esto
Función de flecha de JavaScript
Clases de JavaScript
Módulos JavaScript
javascript json
Depuración de JavaScript
Guía de estilo de JavaScript
Mejores prácticas de JavaScript
Errores de JavaScript
Rendimiento de JavaScript
Palabras reservadas de JavaScript
Versiones de JavaScript
Javascript ES5
Javascript ES6
JavaScript ECMAScript 2016
JavaScript ECMAScript 2017
JavaScript ECMAScript 2018
Javascript ES2019
JavaScript ECMAScript 2020
JavaScript ECMAScript 2021
JavaScript IE y borde
Historia de JavaScript
Objetos JavaScript
Propiedades de JavaScript
Métodos JavaScript
Objetos de visualización de JavaScript
Accesores de JavaScript
Constructores de JavaScript
Prototipos de JavaScript
Iterables de JavaScript
Conjuntos de JavaScript
Mapas JavaScript
Métodos de objetos JavaScript ES5
Definiciones de funciones de JavaScript
Parámetros de la función JavaScript
Invocación de función de JavaScript
Método de llamada de función JavaScript()
Función JavaScript aplicar() Método
Función JavaScript método bind()
Cierres de funciones de JavaScript
Clases de JavaScript
Herencia de clases de JavaScript
Métodos estáticos de JavaScript
Devoluciones de llamada de JavaScript
JavaScript asíncrono
Promesas de JavaScript
JavaScript asíncrono
JavaScript HTML DOM
Métodos DOM de JavaScript
Documento DOM de JavaScript
Elementos DOM de JavaScript
HTML DOM JavaScript
Validación de formularios JavaScript
JavaScriptDOMCSS
Animación DOM de JavaScript
Eventos DOM de JavaScript
Escucha de eventos DOM de JavaScript
Navegación DOM de JavaScript
Nodos DOM de JavaScript
Colecciones DOM de JavaScript
Lista de nodos DOM de JavaScript
Ventana de JavaScript
Pantalla de ventana de JavaScript
Ubicación de la ventana de JavaScript
Historial de ventanas de JavaScript
Navegador de ventanas de JavaScript
Cuadros emergentes de JavaScript
Eventos de sincronización de JavaScript
Cookies de JavaScript
API web
Validación de formularios JavaScript
API de historial web
API de almacenamiento web
API de trabajadores web
API de recuperación de JavaScript
API de geolocalización
Introducción a AJAX
AJAX El objeto XMLHttpRequest
Solicitud AJAX XMLHttp
Respuesta del servidor AJAX XMLHttpRequest
XML-AJAX
PHP
ASP AJAX
Base de datos AJAX
Aplicaciones XML
Ejemplos de AJAX
Introducción a JSON
Sintaxis JSON
JSON frente a XML
Tipos de datos JSON
JSON.parse()
JSON.stringify()
Literales JSON
Matrices JSON
Servidor JSON
JSONPHP
HTML JSON
JSONP
Selectores jQuery
Elementos HTML de jQuery
Estilos CSS de jQuery
jQueryDOM
Gráficos HTML
Lienzo HTML
Plotly.js
Gráfico.js
Gráfico de Google
D3.js
Ejemplos de JavaScript
Ejemplos de JavaScript HTML DOM
Ejemplos de entrada HTML de JavaScript
Ejemplos de objetos HTML de JavaScript
Ejemplos de eventos de JavaScript
Ejemplos de objetos del navegador JavaScript
Mostrar tabla de contenidos

Módulos

Los módulos de JavaScript le permiten dividir su código en archivos separados.

Esto hace que sea más fácil mantener una base de código.

Los módulos se importan desde archivos externos con la instrucción import.

Los módulos también dependen de type="module" en la etiqueta <script>.

<script type="module">
import message from "./message.js";
</script>

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>

Exportar

Los módulos con funciones o variables se pueden almacenar en cualquier archivo externo.

Hay dos tipos de exportaciones: Exportaciones nombradas y Exportaciones predeterminadas.

Exportaciones nombradas

Creemos un archivo llamado person.js y llénelo con las cosas que queremos exportar.

Puede crear exportaciones con nombre de dos maneras. En línea individualmente o todos a la vez en la parte inferior.

export const name = "Jesse";
export const age = 40;

const name = "Jesse";
const age = 40;

export {name, age};

Exportaciones predeterminadas

Creemos otro archivo, llamado message.js, y Úselo para demostrar la exportación predeterminada.

Solo puede tener una exportación predeterminada en un archivo.

const message = () => {
  const name = "Jesse";
  const age = 40;
  return name + ' is ' + age + 'years old.';
};

export default message;

Importar

Puede importar módulos a un archivo de dos maneras, según si tienen nombre exportaciones o exportaciones por defecto.

Las exportaciones nombradas se construyen utilizando llaves. Las exportaciones predeterminadas no lo son.

import { name, age } from "./person.js";

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import { name, age } from "./person.js";

let text = "My name is " + name + ", I am " + age + ".";

document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

import message from "./message.js";

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Modules</h1>

<p id="demo"></p>

<script type="module">
import message from "./message.js";

document.getElementById("demo").innerHTML = message();

</script>

</body>
</html>