Was du brauchst, gibt es ein bisschen Vorlagen

Vor kurzem habe ich eine E -Mail von jemandem erhalten, der mit HTML, CSS und JavaScript zu kämpfen hat. Ihr Code, der HTML -Platzhalter und JavaScript -Daten enthält, funktionierte nicht wie erwartet. Das beabsichtigte Verhalten bestand darin, dass die JavaScript -Daten die HTML -Platzhalter bevölkern, eine häufige Erwartung für Anfänger.

Während erfahrene Webentwickler das Problem leicht identifizieren, ist es wertvoll, diese Perspektive zu verstehen und unkomplizierte Lösungen anzubieten.

Das problematische HTML:

<meta charset="utf-8"><title> Prüfen</title><link href="test.css" rel="stylesheet"><div> {Name der Firma}</div>

Das entsprechende JavaScript:

 var company_data = {
  "{company_name}": "Eine Gesellschaft",
};

Der Code ist gültig und wird ausgeführt. Es wird jedoch einfach "{Company_Name}" angezeigt, da der Browser die Platzhalter nicht automatisch durch JavaScript -Daten ersetzt.

Eine einfache Lösung (aber nicht ideal):

Um "ein Unternehmen" anzuzeigen, reicht eine einzige Zeile von JavaScript aus:

 var company_data = {
  "{company_name}": "Eine Firma"
};

document.querySelector ("div"). InnerHtml = company_data ["{Company_Name}"];

Diese Lösung fehlt zwar funktionsfähig, aber es fehlt, dass diese Lösung keine Wiederverwendbarkeit und Robustheit ist.

Die Notwendigkeit eines Vorlagens

Die Erwartung des Benutzers war, dass das System automatisch Vorlagen behandelt und HTML -Platzhalter durch passende JavaScript -Tasten ersetzt. Dies ist nicht den Standard -Web -Technologien innewohnt.

Es gibt zahlreiche Ansätze, um dies zu erreichen. Hier sind einige:

• Vorlagenmotoren: Verwenden Sie einen Templating -Motor wie Lenker oder Schnurrbart.
• Statische Standortgeneratoren: Verwenden Sie einen statischen Standortgenerator wie ELEGY (der Flüssigkeit verwendet).
• Benutzerdefinierte HTML -Vorlagen: Erstellen Sie eine HTML<template></template> Element und schreiben Sie ein Skript, um es zu verwenden.
• Webkomponenten: Erstellen Sie eine benutzerdefinierte Webkomponente.
• Serverseitiges Rendering: Verarbeiten Sie die Vorlagen auf dem Server mithilfe einer Back-End-Sprache oder einem Tool wie Nunjucks.
• Präprozessoren: Verwenden Sie einen Präprozessor wie Mops.

Im Idealfall sollte die Vorlagen serverseitig oder während des Erstellungsprozesses auftreten, um eine unnötige DOM-Manipulation zu vermeiden. Aus veranschaulichenden Zwecken folgt jedoch ein clientseitiges Beispiel unter Verwendung von Lenker:

(Das Beispiel für Lenker würde hier eingefügt, um zu zeigen, wie Lenker verwendet werden, um das gewünschte Vorlagen zu erreichen.)

Das obige ist der detaillierte Inhalt vonWas du brauchst, gibt es ein bisschen Vorlagen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!