PHP-Daten in JavaScript einschleusen

Und Action!

Abschließend noch mal ein kleines Beispiel wie man die Klasse nutzen kann.

require_once('class-jsonifice.php');

function print_json(){
      $d = array(
        'a'=>5,'b'=>6,'c'=>"'Hello Dolly'",
        'bar'=>"function(){ this.c = this.a + this.b; alert('a (' + this.a + ') + b (' + this.b + ') = c (' + this.c + ')');}"
      );

  $i = new Jsonifice( 'Foo', $d, 'esc_js' );

  // stripping the unwanted!
  $s = '/[\s\\\\"]/';
  $e = preg_replace($s,'',$i->getRawjson());

  $i->json_object = $e.'; Foo.bar();';

  $i->getJson( true );
}

add_action( 'wp_print_scripts', 'print_json' );

Als erstes wird eine Funktion erstellt die wir mittels Hook ‘wp_print_scripts’ aufrufen. In der Funktion wird ein Array definiert welches ein komplettes JS enthält. Dieses JS besteht aus einem JS-Objekt inkl. einer Methode innerhalb des JS-Objektes.
Mit $i = new Jsonifice( 'Foo', $d, 'esc_js' ) wird eine Instanz von Jsonifice erstellt die uns ein Json-Objekt zur Verfügung stellt. Als Callback verwende ich hier die WordPress-Funktion esc_js um sicher zu gehen das im späteren JS keine ungewollten Codierungen auftauchen.
Danach kommt etwas Schönheitskorrektur. Denn json_encode verpackt alle Elemente in Double Qoutes (“) und gibt Zeilenumbrüche sowie Tabulatoren als \r\n bzw \t aus. Das sieht nicht nur unschön aus, es zerstört auch die JS-Syntax. Double Quotes, Steuerzeichen und Backslashes werden also entfernt, der bereinigte Code wird dann einfach ins PHP-Objekt (die Instanz von Jsonifice) zurück geschrieben. Zusätzlich wird noch der Methodenaufruf (; Foo.bar();)angehängt.
Man könnte sich hierzu auch eine zusätzliche Methode (stripJson o.ä.) schreiben die dies erledigt. Auch könnte man sich eine weitere Methode schreiben die noch Code an das Json anhängt, usw. usf. Hier bietet es sich an eine neue Klasse zu schreiben die Jsonifice einfach erweitert. Ich habe darauf jetzt mal verzichtet, soll ja übersichtlich bleiben.
Zum Schluß wird das fertige Json noch ausgegeben ($i->getJson( true );). Voilá, es ist geschafft.

Man kann sich jetzt zu Recht fragen was das soll. Immerhin kann man JS deutlich einfacher über Dateien einbinden. Das ist richtig, jedoch sind Dateien statisch. Mit einer statischen Datei kann ich nur schlecht auf dynamische Ereignisse reagieren. Natürlich kann man versuchen in einem JavaScript welches in einer Datei steht alle möglichen und unmöglichen Fälle zu berücksichtigen, diese über Variablen und Funktionen abzudecken und beten das man nichts vergessen hat.
Man kann sich sein JS aber auch dynamisch zusammen stellen und direkt als Inline-Script ausgeben. Nicht zu vergessen ist die Möglichkeit seine Scripte über gettext zu lokalisieren, eine Anforderung die ja am Anfang des Beitrages mal auftauchte.