8

Cuando se usa Node.js para importar una clase seria:

var Comprobador = require('./comprobador.js');

let comprobador=new Comprobador();

Pero en JavaScript puro en el lado del cliente ¿Cómo seria?

5
  • Casi de la misma forma pero habrá de utilizar compiladores como webpack o transpiladores como babel para la compatibilidad
    – Dev. Joel
    Commented el 24 feb. 2018 a las 5:25
  • @Dev.Joel y de forma nativa no se podria?, si o si usando alguna libreria?
    – hubman
    Commented el 24 feb. 2018 a las 5:27
  • Dependiendo de qué enfoque, puede cargar el archivo js de forma normal o utilizando JQuery, pero siguiendo su ejemplo y su sintaxis lo más cercano es los módulos ES6. ¿Desea cargar solo Scripts solamente?
    – Dev. Joel
    Commented el 24 feb. 2018 a las 5:28
  • en realidad no me importa la sintaxis de la importacion, mi objetivo es importar una clase para usarla dentro de otra clase
    – hubman
    Commented el 24 feb. 2018 a las 5:31
  • No sé si es muy tarde la respuesta pero debes agregar un servidor como Live Server, ya que el navegador no te deja leer los ficheros de tu ordenador así nada más. Commented el 27 jun. 2021 a las 0:55

2 respuestas 2

8

En versiones anteriores de JavaScript no existía la forma de incluir JavaScript ya sea por import o require.

Las versiones más recientes se añadió la funcionalidad de importar y exportar para satisfacer este punto haciendo uso de los estándares como Módulos de ES6, solo tenga en cuenta que actualmente, el soporte del navegador para los módulos ES6 no es muy bueno. Para mejorar esto se usan herramientas de compilación o transpilación que sería lo más recomendado.

Con estas herramientas será más sencillo y la sintaxis será parecida en algunos casos igual a la que usa en Node

Un ejemplo base para crear una clase en un archivo e importarlas en otro. Creamos la clase Persona con un parámetro en el constructor y un método

class Persona {
  constructor(nombre) {
    this.nombre = nombre;
  }

  saludar() {
     return "Hola mi nombre es " + this.nombre;
  }
}

export default Persona;

o simplemente.

export default class  Persona {
  constructor(nombre) {
    this.nombre = nombre;
  }

  saludar() {
     return "Hola mi nombre es " + this.nombre;
  }
}

Para llamar en el otro archivo bastará como en su ejemplo

import Persona from "./Persona"; // Ruta correcta al archivo Js

let per= new Persona("Stack");
console.log(per.saludar());
4
  • lo intente y no funciona, debe ser por lo que dijiste que los navegadores no lo soportan aun
    – hubman
    Commented el 24 feb. 2018 a las 6:16
  • ojala pueda hacerlo con webpack, aunque browserify tambien ayudaria verdad
    – hubman
    Commented el 24 feb. 2018 a las 6:22
  • 1
    @hubman Sí, también , Mejor añadí un ejemplo base para que quede algo más entendible. Saludos
    – Dev. Joel
    Commented el 24 feb. 2018 a las 6:22
  • Si funciona. Solo que si no utilizas transpiladores debes incluir la ruta con la extensión del archivo, por ejemplo: import Persona from "./Persona.js"; Y en el código HTML debes llamar tu archivo como <script src="ruta/archivo.js" type="module"></script> para que te funcione. Commented el 27 jun. 2021 a las 6:18
4

En ES6, si tienes una clase llamada:

export default class Cliente{
    constructor(nombre, direccion, telefono){
        this.nombre = nombre;
        this.direccion = direccion;
        this.telefono = telefono
    }

    // Getters, setters, etc
}

y esta clase está en /modulos, puedes importarla haciendo esto:

import Cliente from './modulos/Cliente';

También puedes importar funciones, por ejemplo, si tienes un archivo llamado /modulos/Mates.js:

export var suma = function (a, b) {
    return a + b;
}

export var resta = (a, b) => a - b;

export var multiplicar = (a, b) => a * b;

//etc

puedes importar funciones así:

import {suma, resta, multiplicar} from './modulos/Mates';

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.