Explication détaillée des exemples de développement modulaire utilisant Requirejs dans les compétences Html

Explication détaillée des exemples de développement modulaire utilisant Requirejs dans les compétences Html_javascript

WBOY

Libérer： 2016-05-16 15:05:16

original

1475 Les gens l'ont consulté

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: {
...
}
});

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 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>

Copier après la connexion

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>

Copier après la connexion

Puis dans le module correspondant :

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

Copier après la connexion

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 !