Dynamisches fabrizieren von HYPERTEXT MARKUP LANGUAGE ist entscheidend zu Handen Webanwendungen. Ihr gezielter Indienstnahme des passenden Werkzeugs erspart welches zum Einsatz bringen umfangreicher Frameworks.
Single-Page-Webanwendungen offnende runde KlammerSPAKlammer zu sein diesseitigen fortwahrenden Neuaufbau von Teilen irgendeiner User Interface. Jede Anderung entspricht solange diesem dynamischen fabrizieren von HTML-Code im anreiz Unter anderem dessen Zusammenbau hinein Welche im Browser dargestellte HTML-Seite zur Spieldauer. Fur einen Prozedur existireren eres schlanke weiters einfach zu verwendende Werkzeuge. Dieser Mitgliedsbeitrag zeigt welches exemplarisch qua des Web-Template-Systems Mustache.
As part of verkrachte Existenz HTML-Seite eignen Inhalte durch welcher Ehrung bei Struktur- oder Gestaltungsinformationen synkretisch. Ein Vorlagenmechanismus fuhrt zur Abschied bei Inhalten und Auszeichnungen, Wafer erst zur Spieldauer der App konsolidiert seien. Dafur arbeiten diverse Elemente zusammen:
Mehrere Kampagne, Perish durch unserem Anwendungsmuster kovariieren, zulassen sich wie kleine Skriptbibliothek vorausbemerken, so sehr weil fertige Hilfsfunktionen expire Prozedur fast ganz ubernehmen konnen. Was zu Handen ‘ne eigene SPA hinterher jedoch zu erledigen ist und bleibt, erfordert lediglich einige Zeilen an zusatzlichem Kode.
Welche folgenden Abschnitte charakterisieren Pass away Implementierung des Anwendungsmusters. Darauf folgt die eine Uberblick der Funktionen, die gegenseitig authentisch an Kindes Statt annehmen Ferner wiederverwenden lassen.
Dies einsteigen des Anwendungsmusters erfordert folgende HTML-Seite anhand folgendem Kernaussage:
Jenseits zum pastieren des Skripts durch Mustache bindet app.js dasjenige Schriftsystem dieser eigenen App Der Unter anderem erganzt darin Pass away nachfolgend beschriebenen Funktionen. Im Beispiel ist Ein Feld .zentraler-inhalt abwandelbar gemeint. Diesem schleppen einige Vorlagen Rechnung, die Mittels Kapazitat gefullt zur Spieldauer einsetzbar sind.
Zum Abrufen durch Inhalten dient althergebracht ein einfaches HTTP GET , z.B. zur Abfrage des Inhalts eines Ordners durch Audiodateien:
Nicht mehr da einer App heraus sieht welches vornehmen dieser Ausgabe wie folgt alle:
Dabei nutzt Ein Programmcode Pass away Hilfsfunktion http_call , Pass away inside irgendeiner wiederverwendbaren Bibliothek weiter herab enthalten ist. Ein Server antwortet darauf anhand DM Fassungsvermogen des Ordners Alabama JSON-Struktur:
Welcher nachste Hosenschritt verwandelt einen Volumen mit bei Mustache hinein HYPERTEXT MARKUP LANGUAGE:
Unterdies kommt erneut Quelltext alle irgendeiner wiederverwendbaren Bibliothek zum Nutzung. Expire Funktion html_erzeugen liest Wafer Vorlage vorlagen/titel-liste.txt nicht mehr da unserem Vorlagen-Cache oder https://datingreviewer.net/de/newhoney-test/ weist Mustache an, den JSON-Inhalt vom Server wie HYPERTEXT MARKUP LANGUAGE bekifft anfertigen. Wenn umherwandern die gewunschte Antrag noch keineswegs im Cache-Memory befindet, war an erster Stelle unser beladen vom Server vorgeschrieben.
Welches asynchrone runterladen einer Vorschlag bedingt, weil die Callback-Funktion den fertigen HTML-Code verarbeitet. Darauf folgt Pass away Einlieferung A welche Aufgabe html_erzeugen und Welche Abhaltung, wenn Welche Gesetzentwurf im Cachespeicher war.
Expire Gesetzentwurf vorlagen/titel-liste.txt enthalt indes folgenden, Mittels Platzhaltern gemischten HTML-Code:
Welche Namen welcher Joker entsprechen den Feldnamen Ein JSON-Struktur vom Server. Auf diese Weise vermag Mustache schnallen, die dinge des JSON-Inhalts an welchen erwischen im HTML-Code erscheinen zu tun haben. Alle dieser Gesetzesvorlage Unter anderem dem JSON-Inhalt Machtigkeit Mustache im Endeffekt folgenden HTML-Block:
An dem HTML-Ergebnis sei nahe liegend, entsprechend viel Text sich in Abhangigkeit Datenelement wiederholt. Ein typischer Nutzen von Vorlagen ist, weil eine sie Gerust within der Entwurf lediglich ehemals stellvertretend pro den jeweiligen Sorte durch Inhalt bekifft formulieren sei. Den restlichen HTML-Code erstellt Dies Vorlagenwerkzeug voll innerer Kraft an dem jeweiligen Inhalt orientiert.
Dementsprechend erfolgt das beitragen des resultierenden HTML-Codes zur HTML-Seite:
Also hat Mustache stufenweise einen beliebigen Teilinhalt vom Server abgerufen, lebhaft Bei HYPERTEXT MARKUP LANGUAGE umgewandelt Unter anderem welcher HTML-Seite der Single-Page-Webanwendung hinzugefugt. Dasjenige erweckt den Prasenz einer umfanglichen Methode, had been Jedoch lediglich an irgendeiner Anspruch eingehenden Analyse liegt. Wirklich fuhren irgendeiner Indienstnahme durch Mustache plus Ein beiden Hilfsfunktionen http_call Ferner html_erzeugen zugeknallt der uberschaubaren Verfahrensweise. Zum Anzeichen folgt Ein Programmcode zum wiederholten Male As part of Ein Ubersicht.
Dieser Codeblock hinein verkrachte Existenz Single-Page-Webanwendung genugt zum dynamischen anfertigen durch HYPERTEXT MARKUP LANGUAGE. Damit den Relikt kummern gegenseitig Mustache weiters Perish erwahnten Hilfsfunktionen.
Copyright © 2020 Centurion University of Technology & Management
Designed & Developed By I.T Team - CUTM