Wenn das Front-End modularisiert ist, benötigt nicht nur js eine modulare Verwaltung, sondern manchmal auch HTML eine modulare Verwaltung. Hier stellen wir vor, wie die modulare Entwicklung von HTML-Code mithilfe von requirejs implementiert wird.
So laden Sie HTML mit requirejs
Reuqirejs verfügt über ein Text-Plug-In, das den Inhalt der angegebenen Datei lesen kann, und der gelesene Inhalt ist der Text.
So laden Sie das Text-Plug-in herunter
Die erste Methode kann über npm heruntergeladen werden:
npm install requirejs/text
Für die zweite Methode können Sie sie auch direkt vom offiziellen Github herunterladen.
Kopieren Sie den Inhalt einfach direkt in text.js.
So installieren Sie das Text-Plug-in
Konfigurieren Sie einfach die Abhängigkeit des Text-Plug-Ins in main.js von requirejs, ähnlich wie bei jquery. Stellen Sie einfach sicher, dass es über die normale Lademethode geladen werden kann.
requirejs.config({
baseUrl: './',
paths: {
'text':path+'/require/text',
...
},
shim: {
...
}
}); kann auch direkt in baseUrl platziert werden.
So verwenden Sie Text
Befolgen Sie im Zielmodul die folgende Syntax:
define(function(require){
var html = require("text!html/test.html");
console.log(html);
}); oder
define(["text!html/test.html"],function(html){
console.log(html);
}); Wie führt man eine modulare HTML-Entwicklung durch?
Nachdem Sie das oben Gesagte gelesen haben, wissen Sie bereits, wie man Text verwendet, aber Sie wissen immer noch nicht, wie Sie den Front-End-Code organisieren.
Geben Sie mir ein Beispiel:
Die Website-Seite von Blog Park springt entsprechend der Navigation oben zu verschiedenen Seiten. Wenn es sich um eine einzelne Seite handelt, kann man leicht annehmen, dass der ursprüngliche Ansatz darin besteht, dass die Navigationsschaltflächen verschiedenen Divs entsprechen. Klicken Sie auf diese Schaltfläche, um die entsprechenden Divs anzuzeigen.
Dann könnte der Frontend-Code so aussehen:
<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>
Solcher Code wird sehr chaotisch sein ... und das Front-End-HTML wird sehr lang sein ... was der Wartung nicht förderlich ist.
Dann können Sie mit dem Text-Plugin von reuqirejs Folgendes tun:
<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <div id="target"></div> </body> </html>
Dann im entsprechenden Modul:
$('#target').html(require("text!目标按钮对应的页面.html")); Auf diese Weise wird es lässiger! Zusammen mit dem Modul kann auch der Frontend-Code effektiv verwaltet werden!
Es ist jedoch zu beachten, dass diese Methode dazu führt, dass die von Jquery gebundenen Ereignisse ungültig werden. Stellen Sie daher sicher, dass Sie das Ereignis nach der Methode html() erneut binden.
Das ist alles relevante Wissen über die Verwendung von Requirejs in HTML für die modulare Entwicklung. Ich hoffe, es wird Ihnen hilfreich sein!
