Simple Template Engine

Für a etwas größeres Projekt hob i a einfache TemplateEngine gsucht. I wollt ned sowohl für meine serverseitigen ois a meine clientseitigen Skripte imma wieda den söbn Code schreibn, der dann a an zwoa verschiedenen Orten imma wieda umständlich gändert wern muasst (Stichwort: Single Point Of Maintenance). A (Betonung!) einfache TemplateEngine scheint's aber ned für PHP oda Javascript zu gebn, zumindest woar meine Suche erfolglos. Des Ziel woar also, sowohl an a PHP-Datei ois a an a Javascript einfach a poar Parameter zu übergebn, de dann den Inhalt vom Template bzw. da Datei ersetzn soin. I wollt bei am Ajax-Request, der dynamischen Inhalt in die Seitn einfügn soi, de gleiche "Quelle" für des Template nutzn wia bei am Seitnaufbau mit PHP. Hom mia zum Beispiel a Forum, des sowohl Posts anzeigt (de durch a PHP-Skript generiert wern) ois a Posts dynamisch via Javascript hinzufügt (wenn da Post z. B. noch dem Absenden direkt angezeigt wern soi, ohne dass ma die Seitn neu lodn muass), würd ma ohne diese TemplateEngine zwoa Vorlagen nutzn - amoi des Template, auf des vom PHP-Skript zugriffn wird, und amoi die Vorlage fürs Javascript. Ab jetzt braucht ma nur no a Template, des sowohl von PHP ois a vom Javascript genutzt wird. Variablen wern dabei in gschweifte Klammern gsetzt, wos natürlich nach Belieben gändert wern kann. Lange Red, kurzer Sinn - a Beispiel:

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

Mia wolln do {name} und {age} durch Variablen ersetzn, de mia dynamisch übergebn kinnan. Let's go.

Le Javascript

<script language="javascript">
var TemplateEngine = function(tpl, data) {
	if ($("template[source='" + tpl + "']").length > 0){
		tpl = $("template[source='" + tpl + "']").html();
	}else{
		$.get(tpl, (data) => tpl = data);
	}
	var re = /{([^}]+)}/g, match;
	while(match = re.exec(tpl)){
		tpl = tpl.replace(match[0], data[match[1]]);
	}
	return tpl;
</script>

A Aufruf von da TemplateEngine erwartet jetzt amoi des Template (tpl) und die Daten, de übergebn wern soin. Ois Template wird entweder die Eigenschaft "source" von am HTML-Knotn vom Typ "template" ongebn, der ois Template valwendet wern soi, oda mia gebn den relativen Pfad zu da Datei an, de den Inhalt vom Template enthoit.

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

Entweder mia hom des Template scho im Quelltext stehn - dann greifn mia sofort auf des Element zu. Sonst wird a GET-Request gstartet und die Datei via Ajax ausglesn. Mia kinnan ois "tpl" also sowohl an Dateinamen ois a den Wert von da Eigenschaft "source" von am Knotn vom Typ "template" übergebn. Die Datei muass dann des oben gnannte Beispiel enthoitn, inkl. Template-Knotn. Ois Rückgabe kriagn mia

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

Le PHP

Des Ganze soit a via PHP möglich sei, sonst wär olles relativ unsinnig bzw. ned für den gwünschten Zweck zum brauchn.

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;
	}
}

Aufrufn kann ma des Ganze dann einfach via

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

Rückgabe is dann ebenfalls:

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

So kinnan mia jetzt einfach nur no die Template-Datei bearbeitn und kriagn sowohl serverseitig ois a clientseitig die gleiche Ausgabe!