ReLast - Klassik

Dynamic JS

Was ist das?

Dynamisches JavaScript ist im einfachsten Fall JavaScript das um die Möglichkeit erweitert wird bereits auf dem Server Variablen auszuwerten und somit das JavaScript angepasst auszuliefern. Zum Beispiel möchten wir den Code den wir für Debug-ZWecke eingebaut haben nicht unbedingt in einer fertigen Version ausliefern, das wäre nur Bandbreiten-Balast. In solchen Fällen kann auf dem Server je nach Anfrage entschieden werden was ausgeliefert wird (siehe auch DCSS).

Wo ist das Problem?

Mit JavaScript verhält es sich wie mit CSS, der Browser erwartet Daten vom Typ text/js, wir möchten aber Server-seitig PHP ausführen. PHP generiert jedoch per default text/html. Wenn wir also PHP-Dateien auswerten betrachtet der Browser das Ergebnis nicht als JavaScript, umgekehrt wertet der Server die PHP-Anweisungen nicht aus wenn sie sich in JavaScript-Dateien befinden.

Wie lösen wir es?

Auch hier ist die Lösung in der PHP-Anweisung header(); zu suchen. Wird kein spezifischer Header angegeben, erzeugt PHP nämlich Dateien vom Typ text/html. Daher wertet der Browser die PHP-geparste Datei nicht als JavaScript aus, weil er HTML geliefert bekommt. Daher übergeben wir am Anfang der referenzierten Datei den Header header('Content-type: text/js');. Somit liefert das PHP-Skript nun JS-Content aus.

So lösen wir es!

Step1: Variablen hinterlegen

Wir betrachten ein einfaches Szenario in dem wir einen Debug-Modus für unser JavaScript ein- und ausschalten können.

In der Datei variables.php notieren wir:

<?php 
$debug = false;
?>

Step2: Variablen nutzen

In der Datei functions.js.php notieren wir:

<?php 
function test() {
	<?php if($debug) echo "console.log('Debug-Meldung')"; ?>
}
?>

Step3: Alles zusammenbauen

In der Datei asset.js.php notieren wir:

<?php 
header('Content-type: text/js');
include "variables.php";
include "functions.js.php";
?>

Step4: Einbinden

Zu guter Letzt wird die asset-Datei in unserem HTML eingebunden.

In der Datei index.html notieren wir:

<!DOCTYPE html>
<html lang="de">
	<head>
		<title>...</title>
		<script src="asset.js.php"></script>
	</head>
	<body>
		<h1 class="text">...</h1>
		<div class="border text">Dies ist ein Text</div>
	</body>
</html>

Fazit

Auf diese Weise ist es sehr einfach JS dynamisch im Server zu konstruieren. Mit einer einzigen Variablen im Server-Script können wir den Debug-Modus für unser JavaScript aktivieren, sollte er ausgeschaltet sein wird der überflüssige Code gar nicht erst an den Browser ausgeliefert.

Zusätzlich ist es mit wenigen Erweiterungen möglich eine Asset-Pipeline zu implementieren. Wie wäre es zum Beispiel mit einem PHP-Skript das selbstständig alle JS-Dateien aus einem Verzeichnis und allen Unterverzeichnissen einsammelt und zu einem Stylesheet aggregiert? Asset-Pipeline

Copyright © 2024

Datenschutz | Impressum