martes, 13 de julio de 2010

Cómo incluir archivos JS dentro de otros

Cuando trabajamos con JavaScript es buena práctica colocar nuestro código dentro de archivos JS, en aras de hacer nuestro código más fácil de mantener. Luego, una vez me surgió la siguiente pregunta: considerando que tenía un JS y que quería utilizar funciones y/u objetos definidos en otro JS ¿cómo podía incluir uno en otro? Algo como los include de C o PHP.

La respuesta es: no es necesario! Todos los JS que se cargan en una página son montados en la RAM de la máquina por lo que no es necesario incluir archivos JS dentro de otros. Según lo comentado, tomando el código de nuestro artículo anterior, el ejemplo mostrado a continuación es completamente válido:

//archivo: usuario.class.js
const ROL_INVITADO = 'invitado';
const ROL_ADMIN = 'admin';

function Usuario(nombre, clave, rol) {
 var nombre = nombre;
 var clave = clave;
 var rol = rol;

 //setters
 this.setNombre = function(_nombre) { nombre = _nombre; };
 this.setClave = function(_clave) { clave = _clave; };
 this.setRol = function(_rol) { rol = _rol; };

 //getters
 this.getNombre = function() { return nombre; };
 this.getClave = function() { return clave; };
 this.getRol = function() { return rol; };

 //funciones
 this.toString = function() {
  retorno = 'nombre: ' + this.getNombre() + ', ';
  retorno += 'clave: ' + this.getClave() + ', ';
  retorno += 'rol: ' + this.getRol();
   
  return retorno;

 };
}

//archivo: cargar_usuarios.js
var usuario1 = new Usuario('rodolfo', '123456', ROL_ADMIN);
var usuario2 = new Usuario('pepe', '654321', ROL_INVITADO);

<html>
 <head>
  <title>Ejemplo clases JavaScript</title>
  <script type="text/javascript" src="usuario.class.js"></script>
  <script type="text/javascript" src="cargar_usuarios.js"></script>
 </head>
 <body>
  <script language="javascript">
   document.writeln(usuario1);
   document.writeln('<br/>');
   document.writeln(usuario2);
  </script>
 </body>

</html>

Fíjese como dentro del archivo cargar_usuarios.js no incluí el usuario.class.js. Además, dentro del html utilizo las variables declaradas en el cargar_usuarios.js sin ningún problema. Recuerde, todo queda en la RAM!


5 comentarios:

  1. y no importa el orden de las etiquetas scripts?

    ResponderEliminar
  2. Ehh no lo probado, imagino que sí... Ya te digo...

    ResponderEliminar
  3. si importa, deben incluirse en el orden de dependencia.

    ResponderEliminar
  4. Si, el artículo está bien para saber que si importas los js los tienes disponibles.
    Pero... yo creo que el artículo debería de ir más en la dirección de:
    "Si sólo quiero incluir un js en mi código html... puedo poner las dependencias en el archivo js a modo de includes?"

    ResponderEliminar