So implementieren Sie das modulare Laden herkömmlicher HTML-Seiten

Bei Websites gibt es eine große Anzahl gemeinsamer Module zwischen vielen Seiten, wie z. B. Kopfzeilen, Fußzeilen, Benutzerspalten usw. Für Frameworks mit Back-End-Ansichts-Engines sind diese Freigaben relativ einfach zu extrahieren. Beispielsweise verfügt asp.net mvc über einheitliche Layouts wie MasterPage, @Section und andere Funktionen, die Ansichtsvorlagenfunktionen gemeinsam nutzen können. Bei HTML haben Sie jedoch nicht so viel Glück. Wenn Sie also reine HTML-Seiten zum Schreiben von Anwendungswebsites verwenden, müssen Sie sich möglicherweise diesen wiederholten Aufgaben stellen, obwohl Sie IFrames verschachteln können Diese Implementierungsmethode ist nicht ideal und benutzerfreundlich.

Kürzlich habe ich eine Website basierend auf meinem eigenen Framework implementiert. Da das Framework keine Back-End-Ansichts-Engine hat, bin ich auf dieses Problem gestoßen ... Schauen wir uns zunächst die tatsächliche Situation an.

Die beiden oben genannten HTML-Seiten sind bis auf den Kernteil einzigartig und die anderen Datenblöcke sind gleich. Wenn es keine Back-End-View-Engine gibt, was halten Sie davon? Zu Beginn muss jede Änderung mit anderen Seiten synchronisiert werden. Später fand ich heraus, dass mich das auf jeden Fall in den Tod treiben würde. Nachdem ich eine Weile nachgedacht hatte, kam ich auf eine Lösung.

Nachdem ich darüber nachgedacht hatte, stellte ich fest, dass die öffentliche Vorlage wie folgt in eine HTML-Datei extrahiert werden kann (der Dateiname lautet vorläufig PublicModule.html):

 <templates> <template id=header> <div class=navbar-header> <button class=navbar-toggle minimiert type=button data-toggle=collapse data-target=.navbar-collapse> <span class=sr-only> Navigation umschalten</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span> </button> <a class=navbar-brand href=/>.Net Library</a> </div> <div class=navbar-collapse Collapse Role=navigation> <div style=margin-top:15px;margin-left:120px; position:absolute;><span style=color:white;padding-top:20px;>XXXXX</span></div> <ul class=nav navbar-nav></ul> <ul class=nav navbar-nav navbar-right> <li> <a href=/Blog.html>Blog</a></li> <li><a href=https://github.com/IKende/FastHttpApi target=_blank>github.com</a></li> <li><a href=/admin/index.html>Website-Management</a></li> </ul> </div> </template > <template id=doc_tags_navbar> <div class=container-fluid style=padding:0px;> <ul class=nav navbar-nav btn-group-sm id=tagbar> <li><a style=font-weight:bold; padding-bottom:6px;padding-top:6px; href=/index.html>Homepage</a></li> <li v-for=item in Data><a v- bind:title=item.Remark style=font-weight:bold; padding-bottom:6px;padding-top:6px; v-bind:href=['/index.html?tag='+item.ID]>{{item.Title}}</a></li> </ul> </div><!-- / .container-fluid --> <script> var tagbarControl; tagbarControl = new Vue({ el: '#tagbar', data: { Data: [] } }); var result = waiting $ListDocTags(); tagbarControl.Data = result.Data </script> </template><templates>

Definieren Sie einen Vorlagenblock über das Vorlagen-Tag und definieren Sie dann eine eindeutige ID für jeden Block. Einige Schüler fragen sich vielleicht, dass die Vorlage kein gültiges HTML-Tag ist. Wie soll man damit umgehen? Der richtige Vorlagenbrowser kann damit nicht umgehen, JQuery jedoch. An diesem Punkt glaube ich, dass einige Schüler das Prinzip verstehen.

Wie kann ich nach der Definition des Moduls in HTML darauf verweisen? Tatsächlich unterstützt HTML eine solche Funktion nicht, aber wir können einige benutzerdefinierte Attribute für HTML definieren, die von JQuery interpretiert werden sollen. Hier definieren wir ein Slot-Attribut, um die Vorlagen-ID anzugeben.

 <div class=navbar navbar-inverse navbar-fixed-top> <div class=container slots=header> </div> </div> <nav class=navbar navbar-default style=padding:0px;margin:0px;min -height:0px;slot=doc_tags_navbar> </nav>

Das Template wird definiert und auch der HTML-Code der Seite wird referenziert. Anschließend müssen diese eingebunden werden. An diesem Punkt glaube ich, dass Freunde, die mit JQuery vertraut sind, herausgefunden haben müssen, was zu tun ist :)

Für JQuery können Sie die öffentliche Modulseite laden und in DOM konvertieren und dann die Elemente durch auf der Seite definierte Slots ersetzen.

 function moduleLoad(url) { $.get(url, function (result) { var html = $(result); var __templates = html; $([slot]).each(function () { var id = $(this) .attr('slot'); var body = $(__templates).find('#' + id).html(); $(this).html(body); }); });}$(document).ready(function () { moduleLoad(/PublicModule.html);});

Der Code ist einfach und effektiv. Speichern Sie das gesamte Skript in einer Datei, fügen Sie es dann der Seite hinzu und es wird automatisch geladen.

Wird die HTML-Seite, die auf einmal geladen werden kann, jetzt Ajax-Laden erfordern? Wird es nicht zu einem langsamen Laden kommen? Tatsächlich können Sie eine lokale Cache-Strategie für die HTML-Seiten des öffentlichen Moduls verwenden, sodass beim Laden des Moduls alle Seiten direkt vom lokalen abgerufen werden können, da der öffentliche Teil kleiner wird und die Ansammlung verwandter Seiten kleiner wird Die Ladegeschwindigkeit ist schneller.

Für diejenigen, die es gewohnt sind, serverseitige Ansichts-Engines zu verwenden, kann es etwas schwierig sein, das HTML/JS-Frontend-Entwicklungsmodell vollständig zu nutzen. Die vollständig auf HTML/JS basierende Front-End-Entwicklung hat jedoch offensichtliche Vorteile, da für die Verarbeitung von Ansichten keine Serviceinterpretation erforderlich ist. Dadurch kann HTML eine bessere lokalisierte Zwischenspeicherung ermöglichen, und es gibt mittlerweile eine große Anzahl von HTML/JS-Frameworks, die dies ermöglichen Sie schreiben Es ist einfacher und einfacher.

Das Obige ist die Methode, die Ihnen der Herausgeber vorstellt, um das modulare Laden herkömmlicher HTML-Seiten zu implementieren. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten.