Bei der Modularisierung von Front-End-Modularisation benötigt JS nicht nur ein modulares Management, sondern auch HTML, manchmal auch modulares Management. Hier führen wir vor, wie die modulare Entwicklung von HTML -Code über RefordyJs implementiert werden kann.
So laden Sie HTML mit RequestJs
Reuqirejs verfügt über ein Text-Plug-In, mit dem der Inhalt einer angegebenen Datei gelesen wird, und der inhaltliche Lesen ist Text.
So laden Sie Text Plugin herunter
Die erste Methode kann über NPM heruntergeladen werden:
NPM Installation RequiredJS/Text
Die zweite Methode kann auch direkt aus dem offiziellen GitHub heruntergeladen werden.
Kopieren Sie einfach den Inhalt direkt in text.js.
So installieren Sie Text Plugin
Sie können die Abhängigkeit des Text-Plug-Ins in main.js in forderjs konfigurieren, was JQuery ähnelt. Stellen Sie einfach sicher, dass es durch normales Laden in es geladen werden kann.
RequiredJs.config ({BaseUrl: './',paths: {' text ': path+'/forder/text ', ...}, shim: {...}});Es kann auch direkt in Baseurl platziert werden.
So verwenden Sie Text
Folgen Sie im Zielmodul der folgenden 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ühre ich die modulare Entwicklung von HTML durch?
Nach dem Lesen der oben genannten können Sie bereits Text verwenden, wissen aber immer noch nicht, wie Sie den Front-End-Code organisieren.
Nehmen Sie eine Kastanie:
Die Website des Blog -Gartens wird gemäß der obigen Navigation auf verschiedene Seiten springen. Wenn es sich auf einer einzelnen Seite befindet, ist es leicht, sich die ursprüngliche Methode vorzustellen, die Navigationstaste entspricht einer anderen Div. Wenn Sie auf diese Schaltfläche klicken, werden die entsprechenden Divs angezeigt. Andere Divs werden versteckt sein.
Dann könnte der Front-End-Code so aussehen:
<html> <body> <navigation Navigation Taste 1, Navigationstaste 2, Navigationstaste 3 </nav> <div style = "Anzeige: Block"> Seite entspricht der Schaltfläche 1 </div> <div style = "Anzeige: Keine"> Seite entsprechend der Taste 2 </div> <div> <div style = "Anzeige: Keine"> Seite entsprechend der Taste 3 </html> </htm>
Ein solcher Code wird sehr unordentlich sein ... und das Front-End-HTML wird sehr lang sein ... nicht der Wartung förderlich.
Dann können Sie mit dem Text -Plugin von Reuqirejs Folgendes tun:
<html> <body> <navigationstaste 1, Navigationstaste 2, Navigationstaste 3 </nav> <div id = "target"> </div> </body> </html>
Dann im entsprechenden Modul:
$ ('#target').Das wird dich lässiger machen! Front-End-Code kann auch effektiv mit Modulen verwaltet werden!
Es ist jedoch zu beachten, dass diese Methode dazu führt, dass das Ereignis ungültig ist - daher müssen Sie das Ereignis nach der HTML () -Methode wiederherstellen.
Ich werde Ihnen so viel über die Verwendung von Reformenjs für die modulare Entwicklung in HTML vorstellen, und ich hoffe, dass es Ihnen hilfreich sein wird!