Analyse du développement modulaire à l'aide de Requirejs en HTML-tutoriel HTML-php.cn

Analyse du développement modulaire à l'aide de Requirejs en HTML

不言

Libérer： 2018-06-09 16:51:50

original

2996 Les gens l'ont consulté

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: &#39;./&#39;,
paths: {
&#39;text&#39;:path+&#39;/require/text&#39;,
...
},
shim: {
...
}
});

Copier après la connexion

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);
});

Copier après la connexion

define(["text!html/test.html"],function(html){
console.log(html);
});

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Puis dans le module correspondant :

$(&#39;#target&#39;).html(require("text!目标按钮对应的页面.html"));

Copier après la connexion

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!