Dieser Artikel stellt hauptsächlich die Analyse der modularen Entwicklung mit Requirejs in HTML vor. Jetzt kann ich ihn mit Ihnen teilen.
Modularisierung im Frontend Zeitlich benötigt nicht nur JS eine modulare Verwaltung, sondern manchmal auch HTML eine modulare Verwaltung. Hier finden Sie eine Einführung in die modulare Entwicklung von HTML-Code mithilfe von requirejs
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 verwenden Sie requirejs zum Laden von HTML
Reuqirejs verfügt über ein Text-Plug-in, das den Inhalt lesen kann Der gelesene Inhalt der angegebenen Datei ist 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 nach text.js.
So installieren Sie das Text-Plug-in
Konfigurieren Sie einfach die Abhängigkeit des Text-Plug-ins in main.js von requirejs, Dies ähnelt jquery, sofern dies sichergestellt werden kann. Laden Sie es einfach über die normale Lademethode.
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 sollen.
Zum 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 ps entsprechen. Durch Klicken auf diese Schaltfläche werden die entsprechenden anderen ps ausgeblendet.
Dann könnte der Front-End-Code so aussehen:
<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>
Solcher Code wird sehr chaotisch sein... und Das Front-End-HTML wird sehr lange ... nicht wartungsfreundlich.
Dann können Sie mit dem reuqirejs-Text-Plugin Folgendes tun:
<html> <body> <nav> 导航按钮1、导航按钮2、导航按钮3 </nav> <p id="target"></p> </body> </html>
Dann im entsprechenden Modul:
$('#target').html(require("text!目标按钮对应的页面.html"));So 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 für die modulare Entwicklung in HTML. Ich hoffe, es wird Ihnen hilfreich sein!
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.
Verwandte Empfehlungen:
HTML5 und jQuery realisieren intelligente Suchabgleichsfunktion
Nginx-Konfiguration, Zugriff auf Bildpfad und HTML-Statik Wie um die Seite abzurufen
Das obige ist der detaillierte Inhalt vonAnalyse der modularen Entwicklung mit Requirejs in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
