suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung modularer Entwicklungsbeispiele mit Requirejs in Html_javascript-Kenntnissen

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

WBOY
WBOYOriginal
2016-05-16 15:05:161477Durchsuche

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jQuery-Methodenanalyse zum Durchlaufen von json_jqueryNächster Artikel：jQuery-Methodenanalyse zum Durchlaufen von json_jquery

In Verbindung stehende Artikel

Mehr sehen