Detaillierte Erläuterung modularer Entwicklungsbeispiele mit Requirejs in Html_javascript-Kenntnissen-js-Tutorial-php.cn

Detaillierte Erläuterung modularer Entwicklungsbeispiele mit Requirejs in Html_javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:05:16

Original

1476 Leute haben es durchsucht

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

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.

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

Dann im entsprechenden Modul:

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

Nach dem Login kopieren

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!