Lorsque la modularisation frontale, non seulement JS a besoin d'une gestion modulaire, mais HTML a parfois besoin également de gestion modulaire. Ici, nous introduisons comment implémenter le développement modulaire du code HTML via requirejs.
Comment charger HTML en utilisant les obligations
Reuqirejs a un plug-in texte qui peut lire le contenu d'un fichier spécifié, et la lecture du contenu est du texte.
Comment télécharger le plugin de texte
La première méthode peut être téléchargée via NPM:
NPM Install requirejs / texte
La deuxième méthode peut également être téléchargée directement à partir du github officiel.
Copiez simplement le contenu directement dans text.js.
Comment installer le plugin de texte
Vous pouvez configurer la dépendance du plug-in de texte dans main.js dans requirejs, qui est similaire à jQuery. Assurez-vous simplement qu'il peut y être chargé par un chargement normal.
requirejs.config ({substanTl: './',Paths: {' text ': path +' / require / text ', ...}, shim: {...}});Il peut également être placé directement dans la fondation.
Comment utiliser le texte
Dans le module cible, suivez la syntaxe suivante:
définir (fonction (require) {var html = require ("text! html / test.html"); console.log (html);});ou
Define (["Text! Html / test.html"], fonction (html) {console.log (html);});Comment effectuer le développement modulaire de HTML?
Après avoir lu ce qui précède, vous pouvez déjà utiliser du texte, mais je ne sais toujours pas comment organiser le code frontal.
Prenez un châtaignier:
La page du site Web du jardin du blog sautera sur différentes pages en fonction de la navigation ci-dessus. Si c'est dans une seule page, il est facile de penser à la méthode d'origine, le bouton de navigation correspond à un Div différent. Cliquez sur ce bouton affichera le div correspondant; D'autres divs seront cachés.
Ensuite, le code frontal peut ressembler à ceci:
<html> <body> <Nav> Bouton de navigation 1, Bouton de navigation 2, Bouton de navigation 3 </ nav> <div style = "Affichage: Block"> Page correspondant au bouton 1 </v> <div style = "Affichage: Aucun"> Page correspondant à Button 2 </div> <div style = "Affichage: Aucun"> Page correspondant au bouton 3 </v> </ body> </html>
Un tel code sera très désordonné ... et le HTML frontal sera très long ... pas propice à la maintenance.
Ensuite, avec le plugin de texte de Reuqirejs, vous pouvez le faire:
<html> <body> <Nav> Bouton de navigation 1, Bouton de navigation 2, Bouton de navigation 3 </AV> <div id = "Target"> </div> </ body> </html>
Puis dans le module correspondant:
$ ('# cible'). html (require ("Bouton Target! Target correspondant à la page.html"));Cela vous rendra plus décontracté! Le code frontal peut également être géré efficacement avec des modules!
Cependant, il convient de noter que cette méthode entraînera l'invalide de l'événement - vous devez donc relire l'événement après la méthode HTML ().
Je vous présenterai tellement de choses sur l'utilisation de requirejs pour le développement modulaire en HTML, et j'espère que cela vous sera utile!