Analyse der modularen Entwicklung mit Requirejs in HTML-HTML-Tutorial-php.cn

Analyse der modularen Entwicklung mit Requirejs in HTML

不言

Freigeben： 2018-06-09 16:51:50

Original

3020 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

oder

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Dann im entsprechenden Modul:

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

Nach dem Login kopieren

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!