⬅ Zurück zur Übersicht

Simple Template Engine

david am Mittwoch, 04.07.2018 - 00:08:54
⬅ Zurück zur Übersicht

Für ein etwas größeres Projekt habe ich eine einfache TemplateEngine gesucht.

Ich wollte nicht sowohl für meine serverseitigen als auch meine clientseitigen Skripte immer wieder den selben Code schreiben, der dann auch an zwei verschiedenen Orten immer wieder umständlich geändert werden musste (Stichwort: Single Point Of Maintenance).

Eine (Betonung!) einfache TemplateEngine scheint es so aber nicht als PHP oder Javascript zu geben, zumindest war meine Suche erfolglos. Das Ziel war also, sowohl an eine PHP Datei als auch an ein Javascript einfach ein paar Parameter zu übergeben, welche dann den Inhalt des Templates bzw. der Datei ersetzen sollten. Ich wollte bei einem Ajax Request, welcher dynamischen Inhalt in die Seite einfügen sollte, eine gleiche „Quelle“ für das Template nutzen wie bei einem Seitenaufbau mit PHP.

Haben wir beispielsweise ein Forum, welches sowohl Posts anzeigt (welche durch ein PHP Skript generiert werden) als auch Posts dynamisch via Javascript hinzufügt (wenn der Post z.B. nach dem Absenden direkt angezeigt werden soll ohne dass man die Seite neu laden muss), würde man ohne diese TemplateEngine zwei Vorlagen nutzen – einmal das Template, auf welches vom PHP Skript zugegriffen wird, und einmal die Vorlage für das Javascript. Ab jetzt braucht man nur noch ein Template, welches sowohl von PHP als auch vom Javascript genutzt wird.

Variablen werden hierbei in geschweifte Klammern gesetzt, was natürlich nach belieben geändert werden kann.

Lange Rede, kurzer Sinn – ein Beispiel:

1
2
3
<template source="welcome">
Hallo, mein Name ist {name} und ich bin {age} Jahre alt.
</template>

Wir wollen hier {name} und {age} durch Variablen ersetzen, welche wir dynamisch übergeben können.

Let’s go.

Le Javascript
1
2
3
4
5
6
7
8
9
10
var TemplateEngine = function(tpl, data) {
    if ($("template[source='"+tpl+"']").length == 0){
        tpl = $("template[source='"+tpl+"']").html();
    }else{
        $.get(tpl, function(data) { var tpl = data; });
    }
    var re = /{([^}]+)}/g, match;
    while(match = re.exec(tpl)) tpl = tpl.replace(match[0], data[match[1]]);
    return tpl;
}

Ein Aufruf der TemplateEngine erwartet jetzt einmal das template (tpl) und die Daten, welche übergeben werden sollen.
Als Template wird entweder die Eigenschaft „source“ eines HTML – Knoten vom Typ „template“ angegeben, welcher als Template verwendet werden soll, oder wir geben den relativen Pfad zu der Datei an, welche den Inhalt des Templates enthält.

1
TemplateEngine("welcome", {name: 'David', age: 28})

Entweder wir haben das Template schon im Quelltext stehen – dann greifen wir sofort auf das Element zu.
Andernfalls wird ein GET – Request gestartet und die Datei via Ajax ausgelesen. Wir können als „tpl“ also sowohl einen Dateinamen als auch den Wert der Eigenschaft „source“ eines Knoten vom Typ „template“ übergeben. Die Datei muss dann o.g. Beispiel enthalten, inkl Template – Knoten.
Als Rückgabe erhalten wir

Hallo, mein Name ist David und ich bin 28 Jahre alt.

Le PHP

Das ganze sollte auch via PHP möglich sein, sonst wäre alles relativ unsinnig bzw. nicht für den gewünschten Zweck zu gebrauchen.

1
2
3
4
5
6
7
8
class TemplateEngine{
    public function compile($file, $data){
        preg_match_all('/<template([^>]*)>(.*)<\/template>/m', file_get_contents($file), $content, PREG_SET_ORDER, 0);
        $content = $content[0][2];
        foreach($data as $key => $value) $content = str_replace("{".$key."}", $value, $content);
        return $content;
    }
}

Aufrufen kann man das ganze dann einfach via

1
2
$engine = new TemplateEngine();
echo $engine > compile("myfile.template", ["age" > "28", "name" =>; "David"]);

Rückgabe ist dann ebenfalls:

Hallo, mein Name ist David und ich bin 28 Jahre alt.

So können wir jetzt einfach nur noch die Template – Datei bearbeiten und bekommen sowohl Serverseitig als auch Clientseitig die gleiche Ausgabe!

Kommentar schreiben

Kommentare