Estoy haciendo The Odin Project y mi proyecto actual implica agregar elementos al HTML usando JS. La página web debe tener pestañas y cada pestaña debe dibujarse con un módulo JS separado. En las instrucciones aquí , dicen
Cada módulo exportará una función que crea un elemento div, agrega el contenido y los estilos apropiados a ese elemento y luego lo agrega al DOM.
Mientras trabajaba en el proyecto, sentí que podía crear los elementos en el módulo y hacer que el módulo exportara los elementos mismos (en lugar de una función) que luego se agregan en el script principal.
Mi enfoque (simplificado):
// menu.js const menu = document.createElement('div'); /* add children to menu */ export default menu; // index.js import menu from './menu.js' const content = document.querySelector('#content') content.appendChild(menu)En comparación con la sugerencia del proyecto, ¿cuáles son las ventajas y desventajas de cada método?
Además, si usa una función como se sugiere, ¿eso significa que tendríamos que pasar el elemento principal a la función ya que no está inicializado dentro del módulo?
Editar: Además, podría estar malinterpretando su sugerencia de que, en lugar de hacer que la función agregue los elementos al elemento de contenido principal, debería hacer que la función devuelva un elemento similar a mi enfoque, simplemente encerrado en una función a la programación funcional.
En mi experiencia personal, depende de qué tan modular quieras que sea el módulo. Un menú que puede querer tener un diseño muy similar en toda la aplicación. Sin embargo, con algo como una ventana emergente modal, es posible que desee que el módulo devuelva un esqueleto que luego puede completar con un elemento en su index.js .
También es posible que desee considerar qué tan uniforme es la estructura de sus módulos si tiene la intención de reutilizarlos o hacer que alguien más trabaje con los mismos módulos; en este caso, creo que es mejor que la mayoría o todos los módulos se comporten de manera similar.
Personalmente, mis módulos tienen un fragmento de html que agregas al cuerpo de la página (una sola línea como un div) y una importación js para interactuar con el módulo que usará ese div html para hacer lo que necesita hacer.