Saltar al contenido

Cómo importar/exportar una clase en Vanilla JavaScript (JS)

Necesitamos tu ayuda para extender nuestros tutoriales sobre las ciencias informáticas.

Solución:

Pasé por esto y tengo una solución con un tercer archivo js como módulo.
rectangle.js será igual y myHifiRectangle.js El archivo tiene una sola modificación.

import Rectangle from './rectangle.js';

export default class MyHiFiRectangle extends Rectangle 
      constructor(height, width) 
      super(height,width);
      this.foo= "bar";  
   

Ahora, necesitamos un tercer archivo que será un archivo de módulo, digamos, script.js

import MyHiFiRectangle from './myHifiRectangle.js'

var v = new MyHiFiRectangle(2,4);
console.log(v.foo);

Ahora, el tercer archivo, script.js debe hacerse un módulo. Más sobre módulos aquí. Tengo los tres archivos bajo modelJS carpeta.


Ahora, cuando ejecute, debería ver la ‘barra’ impresa en la pestaña de la consola de la herramienta para desarrolladores.

Me gustaría mostrarle una solución alternativa a lo que ha publicado @Andy Gaskell.

En primer lugar, necesita babel para asegurarse de que puede usar ES6 en su navegador. Esto es para garantizar que su código seguirá funcionando, ya que algunos navegadores (heredados como IE) no son compatibles con las características modernas de javascript (ES6 y posteriores), como la importación/exportación y las clases.

Puede agregar el siguiente script

``

antes que cualquier otro archivo javascript mencionado anteriormente.

En segundo lugar, si incluye sus clases de JavaScript en línea, el alcance de esas clases se vuelve global, incluso si residen en sus propios archivos js físicos.

He incluido un ejemplo de trabajo a continuación, lo he cambiado un poco para que funcione en el fragmento de código. Desea reemplazar el script con el script que contiene su archivo javascript como lo ha hecho en su código.



   
      
      Javascipt by Rasik Bihari Tiwari
       

             
      
   
   

   

ACTUALIZADO

está bien. ¡frio! Por cierto, si traigo toda la definición de la clase a la etiqueta del script de mi página html, entonces ni siquiera necesito hacer referencia a babel-core en la etiqueta principal. ¿Por qué sería necesario?

Es posible que lo necesite para navegadores que no admitan clases como IE. Pero, si la compatibilidad con los navegadores heredados no está entre sus requisitos, entonces no la necesita.

… ¿necesito siquiera las cosas de exportación e importación? ¿Cuál sería el significado de la exportación de módulos en un javascript nativo cuando cada clase es más o menos global?

De hecho, no necesitará las cosas de exportación e importación ya que sus clases son globales. Solo usa esto si desea usar el sistema de módulos. Si no usa importar/exportar, sus clases deberían ser globales y, por lo tanto, deberían funcionar. Pero en caso de que no fuera así de alguna manera. Te aseguras de que exista globalmente al adjuntarlo al objeto de la ventana de esta manera:

 window.myClass = class MyClass  /* Class definition */ 

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 3.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *