La declaración de exportación se utiliza para enlazar un módulo de JavaScript con otros. Para exportar el constructor predeterminado, usamos una declaración de exportación y un módulo de importación en el lugar requerido. Al crear una instancia de la clase, se invoca al constructor de una clase respectiva.
Sintaxis:
export default class ClassName{...}
En el siguiente ejemplo, usaremos el módulo JavaScript en otro módulo exportándolo e importándolo. Sin embargo, las requests de origen cruzado solo se admiten para HTTPS. Por lo tanto, necesitamos ejecutar nuestro archivo HTML en el servidor local.
Acercarse:
- Cree un archivo index.html.
- Cree un archivo User.js que exportará el módulo.
- Cree otro archivo Profile.js para importar el constructor y verifique si se invoca al crear un objeto.
- Agregue script-src en index.html (Nota: dado que estamos exportando módulos, debemos agregar type=»module»)
Directorio de proyectos: nuestro directorio de proyectos se verá así.
Estructura del directorio del proyecto
Ejemplo: el archivo index.html contendrá src a Profile.js donde se importa el módulo. El archivo Profile.js importará User.js e invocará un constructor de User.js creando un objeto de clase User. El archivo User.js tendrá un constructor que toma parámetros e imprime su valor junto con un texto ficticio.
index.html
<!DOCTYPE html> <head> <script type="module" src="./Profile.js"> </script> </head> <body> <div style="color: green; font-size: 35px; margin-left: 100px;"> Geeks for Geeks </div> <p style="color: rgb(44, 46, 44); font-size: 20px; margin-left: 100px;"> Result will be displayed at console </p> </body> </html>
Profile.js
// Importing User
import User from './User.js';
// Creating new user object
var user = new User({name:'Lorem Ipsum',lang:'Javascript'});
// Printing data
console.log(user);
User.js
export default class User
{
constructor(params)
{
this.name=params.name;
this.lang=params.lang;
console.log('constructor of User class called: ');
console.log(this.name+' is your name.');
console.log(this.lang+' is your language');
}
}
Pasos para ejecutar archivos HTML en el servidor local
- Si tiene NodeJs y npm instalados en su máquina, instale el servidor http ejecutando este comando en la terminal.
npm install http-server -g
- A través de la terminal, navegue hasta el directorio donde tiene todos sus archivos guardados y escriba.
http-server
Producción:
- Verá una lista del servidor local que sirve como se muestra a continuación:
Lista de puertos disponibles que sirven
- Ahora haga clic en cualquier servidor local disponible, veremos el siguiente resultado.
Publicación traducida automáticamente
Artículo escrito por harshshukla5 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA