Maison >interface Web >tutoriel HTML >Analyse du développement modulaire à l'aide de Requirejs en HTML
Analyse du développement modulaire à l'aide de Requirejs en HTML
- 不言original
- 2018-06-09 16:51:503030parcourir
Cet article présente principalement l'analyse du développement modulaire à l'aide de Requirejs en HTML. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer
Modularisation sur le front-end. Avec le temps, non seulement js a besoin d'une gestion modulaire, mais HTML a parfois aussi besoin d'une gestion modulaire. Voici une introduction à la façon de réaliser un développement modulaire de code HTML via requirejs
Lorsque le front-end est modularisé, non seulement js a besoin d'une gestion modulaire, mais le 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 utiliser requirejs pour charger du HTML
Reuqirejs a un plug-in de texte, qui peut lire le contenu du fichier spécifié, le contenu lu est du 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 texte
Il suffit de configurer la dépendance du plug-in texte dans le main.js de requirejs, qui est similaire à jquery, tant qu'il peut être garanti, chargez-le simplement 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 de 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.
Par 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 ps. Cliquer sur ce bouton affichera les autres ps correspondants qui seront masqués.
Ensuite, le code frontal peut ressembler à ceci :
<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <p style="display:block">按钮1对应的页面</p> <p style="display:none">按钮2对应的页面</p> <p style="display:none">按钮3对应的页面</p> </body> </html>
Un tel code sera très compliqué.. . et le front-end Html sera très long...pas propice à la maintenance.
Ensuite avec le plug-in texte reuqirejs, vous pouvez faire ceci :
<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <p id="target"></p> </body> </html>
Puis dans le module correspondant :
$('#target').html(require("text!目标按钮对应的页面.html"));
De cette façon, ce sera plus décontracté ! 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 l'événement après la méthode html().
Ce sont toutes les connaissances pertinentes sur l’utilisation de Requirejs pour le développement modulaire en HTML. J’espère que cela vous sera utile !
Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !
Recommandations associées :
HTML5 et jQuery réalisent une fonction de correspondance intelligente de recherche
chemin d'image d'accès à la configuration nginx et HTML statique Comment pour récupérer la page
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!