¿Hay alguna manera de crear archivos como navbar.html y luego usar JavaScript para usar archivos como estos como componentes? Por ejemplo, digamos que tengo un archivo llamado imageCarousel.html y tengo que usar este archivo en muchos archivos HTML diferentes, entonces, ¿cómo puedo crear un archivo JavaScript que tenga una función que tome la clase donde quiero mostrar el HTML? el código del archivo, y luego la ruta del archivo HTML y luego también ¿cómo puedo usar ese archivo JavaScript en otros archivos JavaScript?
He buscado en muchos lugares diferentes y puedo afirmar claramente que no hay otro lugar para esta pregunta exacta. Y estoy haciendo esta pregunta después de hacer toda la investigación.
Además, no quiero usar ninguna biblioteca aquí como reaccionar, etc.
¡Gracias por leer esta consulta!
Puede crear sus plantillas usando funciones JS. Como se explica en el comentario, necesitaría algún tipo de entorno de desarrollo para escribir su código en varios archivos y luego organizarlos.
Si no quiere hacer esto... Esto es lo que puede hacer.
index.html <script src="/path/to/Navigation.js"></script> <script src="/path/to/index.js"></script> in Navigation.js function Navbar (text) { return ` <nav class='navbar'> <h1>Hello Template</h1> <a href="www.google.com">Go To Google</a> <h3>${text}</h3> </nav> `; }; in index.js document.getElementById("app").innerHTML = Navbar("Hello from template");Vea este codesandbox por ejemplo: https://codesandbox.io/s/elegant-mccarthy-t6msj?file=/index.html
PD: Sin embargo, esta es una mala práctica y se complicará a medida que crezca su aplicación. Porque la secuencia de archivos importados importará. Considéralos como dependencias. En este caso, index.js necesita Navigation.js y esta cadena crecerá con tantos componentes como scripts agregue.
Por lo tanto, le sugiero que explore la biblioteca de creación de módulos si desea crear una aplicación. Si solo estás tratando de aprender... entonces supongo que esto te ayudará.
Con los proyectos JS normalmente se usan módulos en muchos archivos .js , no html. Para importar, otros módulos pueden usar import something from './file.js o const module = require('./someFile.js') .
Para agrupar todos los archivos y generar archivos estáticos HTML + JS es necesario utilizar empaquetadores . Los empaquetadores también pueden transpilar la sintaxis JS más nueva para admitir navegadores más antiguos.
El paquete más utilizado es el paquete esbuild , también puede buscar paquetes rollup , parcel o esbuild .
Tiene muchos tutoriales sobre cómo usar webpack.
UPD. También puede buscar en RequireJS , pero es un enfoque antiguo.
¡Creo que puedes hacerlo con una biblioteca js como react.js! ¡con él puede crear un componente js y llamarlo en otros archivos js! si no quieres usar reaccionar, ¡no sé si es posible con js puro!