Cuando la modularización frontal, no solo JS necesita una gestión modular, sino que HTML a veces también necesita un manejo modular. Aquí presentamos cómo implementar el desarrollo modular del código HTML a través de RequestJS.
Cómo cargar html usando requestjs
Reuqirejs tiene un complemento de texto que puede leer el contenido de un archivo especificado, y el contenido leído es texto.
Cómo descargar el complemento de texto
El primer método se puede descargar a través de NPM:
Instalar NPM requirador/texto
El segundo método también se puede descargar directamente del GitHub oficial.
Simplemente copie el contenido directamente en Text.js.
Cómo instalar el complemento de texto
Puede configurar la dependencia del complemento de texto en Main.js en Requirjs, que es similar a jQuery. Solo asegúrese de que pueda cargarse a través de la carga normal.
requestjs.config ({baseUrl: './',paths: {' text ': path+'/request/text ', ...}, shim: {...}});También se puede colocar directamente en BaseUrl.
Cómo usar texto
En el módulo de destino, siga la siguiente sintaxis:
Define (function (require) {var html = require ("text! html/test.html"); console.log (html);});o
Define (["Text! Html/test.html"], function (html) {console.log (html);});¿Cómo llevar a cabo el desarrollo modular de HTML?
Después de leer lo anterior, ya puede usar texto, pero aún así no sabe cómo organizar el código frontal.
Toma una castaña:
La página del sitio web del Blog Garden saltará a diferentes páginas de acuerdo con la navegación anterior. Si está en una sola página, es fácil pensar en el método original, el botón de navegación corresponde a un DIV diferente. Al hacer clic en ese botón, mostrará el DIV correspondiente; Otros divs estarán ocultos.
Entonces, el código de front-end puede verse así:
<html> <body> <Arb> Botón de navegación 1, botón de navegación 2, botón de navegación 3 </ar Nav> <div style = "Display: Block"> Página correspondiente al botón 1 </div> <div style = "Display: Ninguno"> Página correspondiente al botón 2 </div> <Div style = "Display: Ninguno"> Página correspondiente al botón 3 </div> </fody </html>
Dicho código será muy desordenado ... y el HTML front-end será muy largo ... no propicio para el mantenimiento.
Luego, con el complemento de texto de Reuqirejs, puede hacer esto:
<html> <body> <Arb> Botón de navegación 1, botón de navegación 2, botón de navegación 3 </Arb> <Div id = "Target"> </div> </body> </html>
Luego en el módulo correspondiente:
$ ('#Target'). Html (requerir ("Botón de texto de texto! Correspondiente a la página.html"));¡Esto te hará más informal! ¡El código frontal también se puede administrar de manera efectiva con módulos!
Sin embargo, debe tenerse en cuenta que este método hará que el evento sea inválido, por lo que debe revertir el evento después del método html ().
Te presentaré mucho sobre el uso de necesidades para el desarrollo modular en HTML, ¡y espero que te sea útil!