Dem ein oder anderen ist es vielleicht schon aufgefallen: Manche Libraries (nicht ausschließlich jQuery bezogen) haben ein führendes „;“, bevor der eigentliche Code losgeht. Das sieht dann so aus:
//Plugin Code WITH leading ;;(function(){
console.log("plugin function called");//source code})();
//Plugin Code WITH leading ;
;(function () {
console.log("plugin function called");
//source code
})();
Aber warum ist da ein führendes Semikolon? Oder wie mein Cousin letztens fragte:
ist dir eigentl aufgefallen das dein code mit einem traurigen smiley beginnt, ist dass n programmiererwitz?
Der gleiche Code würde auch ohne ; funktionieren und wäre einwandfrei. Das führende Semikolon hat den Sinn, um Code, der VORHER ausgeführt wird und möglicherweise kein abschließendes Semikolon hat, abzuschließen, damit der Plugin-Code selber ausgeführt wird. Gewöhnlich kennt man den Code nicht, den andere Entwickler schreiben :-).
Würde das Semikolon da nicht stehen und Code vorher kein abschließendes ; haben, so würde der Plugin-Code einen Fehler werfen.
Beispiel gefällig? Plugin-Code ohne führendes Semikolon
Dieser Code wirft einen Fehler, da der Code vor dem Plugin-Code kein abschließendes Semikolon hat:
//some source code WITHOUT trailing ;
console.log("test")//Plugin Code WITHOUT leading ;(function(){
console.log("plugin function called");//source code})();
//some source code WITHOUT trailing ;
console.log("test")
//Plugin Code WITHOUT leading ;
(function () {
console.log("plugin function called");
//source code
})();
Zum Überprüfen den Code einfach mit Copy&Paste in die Konsole packen und ausführen. Als Resultat folgt ein TypeError:
Plugin-Code mit führendem Semikolon
Führt man den gleichen Code nochmal aus, nur mit führendem Semikolon läuft der Code durch:
//some source code
console.log("test")//Plugin Code WITH leading ;;(function(){
console.log("plugin function called");//source code})();
//some source code
console.log("test")
//Plugin Code WITH leading ;
;(function () {
console.log("plugin function called");
//source code
})();
Kein Wunder, der „fremde“ Code, der vorher ausgeführt wird, wird jetzt ordnungsgemäß mit einem Semikolon abgeschlossen.
Doppeltes Semikolon
Was passiert aber, wenn der vorherige Code bereits durch ein Semikolon abgeschlossen wird? Dann fügt der Plugin-Code ein weiteres Semikolon hinzu! Das ist doch unnötig! Ja, ist es – aber es führt zu keinem Fehler. Ein Semikolon schließt ein Statement in JavaScipt ab. Steht nichts davor, ist es ein leeres Statement:
//some source code WITH trailing ;
console.log("test");//Plugin Code WITH leading ;;(function(){
console.log("plugin function called");//source code})();
//some source code WITH trailing ;
console.log("test");
//Plugin Code WITH leading ;
;(function () {
console.log("plugin function called");
//source code
})();
That’s it! JavaScript ermöglicht (leider) das Schreiben und Ausführen von Code ohne Semikolon – davon ist jedoch „strict“ abzuraten.
Beim letzten Projekt benötigte ich JavaScript-Code, um das Backend ein wenig zu modifizieren. Hier will ich kurz anhand eines Beispiels festhalten, wie ich das realisiert habe.
Konkret ging es darum, dass ich im Backend ein Feld hatte, welches den Farbcode eines Elements im DOM bestimmen sollte. Der User sollte dazu aus einer vorgegebenen Liste mit Farbwerten einen auswählen und das DOM-Element sollte mittels Inline-CSS die entsprechende Hintergrundfarbe annehmen:
Normale Select-Option-HTML-Liste
Diese Liste wurde via Backend durch das (absolut empfehlenswerte!) Plugin Types eingepflegt und die Option-Values enthielten den CSS-kompatiblen Farbcode:
Da die Farbwerte jedoch teils recht nah beieinanderlagen, wollte ich die Select-Liste mit der entsprechenden Hintergrundfarbe unterlegen, so dass der User im Backend sieht, welchen Farbton er auswählt.
Das Plugin generiert folgenden HTML-Code für die Select-Liste:
Dazu wollte ich mittels jQuery die value’s der option-Tags auslesen, also die Werte, die ich via Types CSS-kompatibel im Backend vorher eingepflegt hatte.
Wichtig hier ist der add_action – Aufruf, der als 2. Parameter den Namen der Funktion bekommt, die obenstehend deklariert ist und den JavaScript-Code enthält. Dort kann natürlich auch jeder andere Code stehen.
In meinem Fall benötigte ich den obenstehenden jQuery-Code, welcher hier nochmal genauer erläutert wird:
jQuery(document).ready(function(){//save background-color setting function for select-element into variablevar setBackground =function(){
jQuery("select[name=\"wpcf[pagecolor]\"]").css("background-color",
jQuery("select[name=\"wpcf[pagecolor]\"]").find("option:selected").val())};//call the function to set the background color of the select-element
setBackground();//set background-color for all option-tags
jQuery("select[name=\"wpcf[pagecolor]\"]").find("option").each(function(){
jQuery(this).css("background-color", jQuery(this).val());});//bind change-event to select-element
jQuery("select[name=\"wpcf[pagecolor]\"]").on("change",setBackground);});
jQuery(document).ready( function(){
//save background-color setting function for select-element into variable
var setBackground = function(){
jQuery("select[name=\"wpcf[pagecolor]\"]").css("background-color",
jQuery("select[name=\"wpcf[pagecolor]\"]").find("option:selected").val()
)};
//call the function to set the background color of the select-element
setBackground();
//set background-color for all option-tags
jQuery("select[name=\"wpcf[pagecolor]\"]").find("option").each(function(){
jQuery(this).css("background-color", jQuery(this).val());
});
//bind change-event to select-element
jQuery("select[name=\"wpcf[pagecolor]\"]").on("change",setBackground);
});
Als jQuery-Selector konnte ich auf keine ID zugreifen, da die ID vom Types-Plugin generiert wurde und in jeder Installation anders wäre, daher nutzte ich folgenden Selektor:
select[name="wpcf[pagecolor]"]
select[name="wpcf[pagecolor]"]
Dieser war für meine Zwecke ausreichend, da er eindeutig war. In der Variable setBackground speichere ich mir eine Funktion, die das in der Select-Liste selektierte Option-Tag ausliest und den value-Wert als Hintergrundfarbe des Select-Elements setzt. Danach rufe ich die Funktion auch gleich auf, um den Wert zu setzen. Als rein anonyme Funktion kann ich sie jedoch nicht nutzen, da ich auch bei Farbwechsel den neu ausgewählten Wert setzen wollte. Dazu dient die letzte Zeile, in welcher der Event-Handler „onchange“ die Funktion „setBackground()“ bei Wechsel des Option-Elements aufruft. Wichtig hierbei ist, dass die Funktion ohne () übergeben wird, da hier nur die Referenz auf die Funktion notwendig ist. Würde man die Klammern mit übergeben, würde die Funktion direkt an dieser Stelle im Code ausgeführt werden und nicht erst bei Aufruf des Change-Events.
Das wars dann auch schon!
Anregungen, Kommentare und Verbesserungsvorschläge sind erwünscht! 🙂