Maison >interface Web >js tutoriel >Explication détaillée des exemples de développement modulaire utilisant Requirejs dans les compétences Html_javascript
Lorsque le front-end est modularisé, non seulement js a besoin d'une gestion modulaire, mais HTML a parfois aussi besoin d'une gestion modulaire. Nous allons présenter ici comment implémenter le développement modulaire de code HTML via requirejs.
Comment charger du HTML à l'aide de requirejs
Reuqirejs dispose d'un plug-in de texte, qui peut lire le contenu du fichier spécifié, et le contenu lu est le texte.
Comment télécharger le plug-in de texte
La première méthode peut être téléchargée via npm :
npm install requirejs/text
Pour la deuxième méthode, vous pouvez également la télécharger directement depuis le github officiel.
Copiez simplement le contenu directement dans text.js.
Comment installer le plug-in de texte
Configurez simplement la dépendance du plug-in de texte dans le main.js de requirejs, qui est similaire à jquery. Assurez-vous simplement qu'il peut être chargé via la méthode de chargement normale.
requirejs.config({ baseUrl: './', paths: { 'text':path+'/require/text', ... }, shim: { ... } });
peut également être placé directement dans baseUrl.
Comment utiliser le texte
Dans le module cible, suivez la syntaxe suivante :
define(function(require){ var html = require("text!html/test.html"); console.log(html); });
ou
define(["text!html/test.html"],function(html){ console.log(html); });
Comment réaliser un développement modulaire du HTML ?
Après avoir lu ce qui précède, vous savez déjà comment utiliser le texte, mais vous ne savez toujours pas comment organiser le code front-end.
Donnez-moi un exemple :
La page du site Web de Blog Park passera à différentes pages en fonction de la navigation ci-dessus. S'il s'agit d'une seule page, il est facile de penser que l'approche originale est que les boutons de navigation correspondent à différents divs. Cliquez sur ce bouton pour afficher les autres divs correspondants ;
Ensuite, le code frontal peut ressembler à ceci :
<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <div style="display:block">按钮1对应的页面</div> <div style="display:none">按钮2对应的页面</div> <div style="display:none">按钮3对应的页面</div> </body> </html>
Un tel code sera très compliqué... et le HTML front-end sera très long... ce qui n'est pas propice à la maintenance.
Ensuite avec le plug-in texte de reuqirejs, vous pouvez faire ceci :
<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <div id="target"></div> </body> </html>
Puis dans le module correspondant :
$('#target').html(require("text!目标按钮对应的页面.html"));
Ce sera plus décontracté ainsi ! Le code front-end peut également être géré efficacement avec le module !
Cependant, il convient de noter que cette méthode rendra invalides les événements liés par Jquery - assurez-vous donc de relier à nouveau l'événement après la méthode html().
Ce sont toutes les connaissances pertinentes sur l’utilisation de Requirejs en HTML pour le développement modulaire. J’espère que cela vous sera utile !