Mi header.js crea dinámicamente los botones que muestran y ocultan mis páginas. Cada una de estas páginas se modula de forma independiente en sus propios archivos JS. ¿Cómo puedo exportar las variables de los elementos en los que debo cambiar la lista de clases ya que no puedo cambiar la lista de clases en una función?
encabezado.js
function header() { const element = document.createElement('div'); element.innerHTML = ` <nav> <button type="button" class="btn btn-dark" id="home"><a href="">Home</a></button> <button type="button" class="btn btn-dark" id="menu"><a href="">Menu</a></button> <button type="button" class="btn btn-dark" id="location"><a href="">Location</a></button> </nav> `; // Add the image to our existing div. const myIcon = new Image(); myIcon.src = Icon; element.appendChild(myIcon); return element; } document.body.appendChild(header()); export default header;Ejemplo de mis módulos mission.js
const mission = () => { const element = document.createElement('div'); element.classList.add('hide'); element.innerHTML = ` <div class='asl'> <div class='mission' id='mission'> <div class='text-content'> <h2>Our Mission</h2> <h4>Provide you with Handpicked, Artisanally Curated, Free Range, Sustainable, Organic Tea & Delicious Desserts</h4> </div> </div> </div> `; return element; }; document.body.appendChild(mission()); export default mission;Aprecio tu ayuda :)
Puede exportar variables; sin embargo, su constante se declara en la función y una constante tiene un alcance de bloque, por lo que no será accesible fuera de los corchetes de la función.
Sin embargo, podría usar algo como el patrón de módulo para exportar una variable:
const myModule = (function() { const myVariable = 1; function myFunction() { return myVariable + 1; } function getmyVariable() { return myVariable; } return {myFunction, getMyVariable}; }()); export { myModule };Entonces podrías usarlo así:
//import it const variable = myModule.getMyVariable();También hay muchas más formas de hacer esto, declarar la constante fuera del bloque de funciones, crear clases con getters y setters o crear funciones de fábrica.
Los módulos ES (es decir, la sintaxis de import / export ) son parte de la especificación de Javascript, es decir, son "vainilla".
Sin embargo, eso no significa que todos los navegadores u otros tiempos de ejecución de JS los admitan y, de hecho, algunos todavía no lo hacen, o solo lo hacen de forma provisional. La página de módulos de MDN tiene un gráfico que muestra un desglose del soporte para los tiempos de ejecución de JS más populares.
Si su entorno de ejecución no es compatible con los módulos ES, es posible que sea compatible con la sintaxis anterior de CommonJS (es decir, require ). Si tampoco es compatible, deberá usar algún tipo de programa de agrupación.
PD Otra cosa a considerar es el tiempo. Cuando se ejecuta el código del módulo, se ejecuta en el momento de la carga... pero es posible que el DOM no esté listo en ese momento, lo que significa que el código que usa el document puede no funcionar. Debe agregar el código a algún tipo de DOMContentReady o un controlador de eventos similar para asegurarse de que los módulos se carguen primero, luego se cargue el DOM y luego se ejecute el código.