Sencillo codekata o tutorial para comprender cómo en Javascript se importan ficheros, o se puede organizar el programa en varios ficheros. No es plan tener todo junto en un mismo fichero. Hay que encapsular todo en objetos, en ficheros, con funciones, todo bien desacoplado, etc.. para que el programa sea mantenible y legible.
A partir del Ecma Script 6 tenemos disponible en Javascript mecanismos para esto. Una sugerencia es lo siguiente. Cargar como módulo un fichero principal y dentro de este a base de import lo demás. Dependerá del proyecto que quizá entonces hay que usar una estructura definida..
Al grano, el código fuente
Primero una página web index.html de pruebas:
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>JnjSite.com: testing import files with Javascript</title>
</head>
<body>
<h1>JnjSite.com: testing import files with Javascript</h1>
<p id="theText"></p>
<button type="button" name="theButton" id="theButton">Click me to write something</button>
<script src="app.js" type="module"></script>
</body>
</html>Lo siguiente es el fichero app.js desde el que se comienza el programa principal en Javascript que hace lo que tenga que hacer:
'use strict';
import * as libfunctions from "./functions.js";
window.onload = () => {
document.getElementById('theButton').onclick = () => {
libfunctions.writeSomethingIntoTheText('theText');
}
}Aquí simplemente espera a que la web haya cargado. Entonces lanza una arrow function, por esto el () => {}. Y se engancha al evento onclick del botón para lanzar la función de la librería. En el fichero functions.js que hemos cargado con la instrucción import tenemos lo que tiene que hacer:
'use strict';
export function writeSomethingIntoTheText(theId) {
document.getElementById(theId).innerHTML = "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).";
}Mira que le hemos puesto ‘use strict’; al principio de todos los ficheros para que use la última sintaxis de Javascript, en caso de error nos dirá por consola del navegador. La historia de todo está en cómo importar el fichero functions.js con la siguiente instrucción:
import * as libfunctions from "./functions.js";¡IMPORTANTE! En el fichero HTML hemos cargado el script app.js de tipo module con el type=»module». Luego en el fichero functions.js hemos exportado la función writeSomethingIntoTheText() para que se pueda usar externamente poniéndole la palabra export delante.
export function writeSomethingIntoTheText(theId) {Si todo ha ido bien, al cargar la página web en el navegador y hacer click en el botón se tiene que ver algo como lo siguiente:
