Ist die Verwendung von PHP if/else innerhalb von JS eine schlechte Praxis?

Question 1

Ich erstelle eine benutzerdefinierte Vorlage für WordPress und an einigen Stellen habe ich PHP if else-Anweisungen wie das folgende Beispiel innerhalb des JS in der Fußzeile verwendet. Es funktioniert gut, aber ich frage mich, ob dies als “schlechte Praxis” angesehen wird und wenn ja, wie man besser damit umgeht?

<script type="text/javascript">
var $submenu = $('.submenu');
// SUBMENU animation
<?php if ( in_category('Collection') == false ) { ?> // if not a Collection subpage
    $('.menu li a').each(function() { 
        if ( $(this).text() == 'Collection' ) { // If is Collection link show submenu on hover
            $(this).mouseenter(function() { 
                $submenu.slideDown(); 
            });
        } else { // else close submenu on hover over other menu links
            $(this).mouseenter(function() { 
                $submenu.slideUp(); 
            });
        }
    });
    $('.nav').mouseleave(function() { // close submenu
        $submenu.slideUp(); 
    });
<?php } else { ?> // If a Collection subpage always show subnav
    $submenu.show();
<?php } ?>
</script>

Question 2

Während es nichts wirklich Falsches daran gibt, PHP und JavaScript zu mischen, finde ich es persönlich ziemlich umständlich zu lesen und zu ändern, außerdem macht es das Verschieben dieses Codes schwierig. Wenn Sie sich beispielsweise entschieden haben, dieses JavaScript in eine externe Datei zu exportieren, was zahlreiche Vorteile hat:

<script src="https://stackoverflow.com/questions/15799116/myjs.js.php"></script>

Dies wird klobig, wenn Ihr JavaScript bestimmte Werte kennen muss, um zu berechnen in_category('Collection') da Sie mit der Verwendung von GET-Parametern beginnen müssen (es sei denn, Sie sind auf Sitzungsvariablen angewiesen, die sehr komplex und unvorhersehbar werden können, insbesondere durch Asset-Anforderungen):

<script src="https://stackoverflow.com/questions/15799116/myjs.js.php?random_vars_required=123"></script>

Ein weiterer Punkt, auf den Sie achten sollten, ist, dass Sie bei einer JavaScript-Datei, die ihren Inhalt abhängig von der serverseitigen Logik ändert, darauf achten müssen, was der Browser zwischenspeichert (um diese Art von Problemen zu vermeiden, bedeutet dies im Grunde, dass Sie die Anfrage-URL für jedes mögliche Ergebnis der js-Datei). dh

<script src="https://stackoverflow.com/questions/15799116/myjs.js.php?collection=true"></script>
<script src="myjs.js.php?collection=false"></script>

Ein weiterer Nachteil ist, dass Sie durch das Mischen von PHP mit JS wahrscheinlich den PHP-Code an zahlreichen Stellen duplizieren, was gegen das DRY-Prinzip verstößt. Aus diesem Grund ist der vorgeschlagene “Daten in eine Javascript-Variable exportieren” eine viel nettere Idee. Es ist jedoch am besten, wenn möglich Variablen im globalen js-Namespace zu vermeiden. Das Vermeiden des globalen Namensraums kann sich jedoch als schwierig erweisen, wenn Sie die Logik auf mehrere JavaScript-Dateien verteilen müssen und Ihre Variablen nicht am Anfang jeder Datei exportieren möchten.

andere Möglichkeit

Wenn die Logik, die Sie testen, rein boolescher Natur ist und sich auch um die Seitenklassifizierung (oder die Klassifizierung von Unterregionen) dreht, ist das Folgende eine ziemlich gute Möglichkeit, mit dem umzugehen, was Sie erreichen möchten. Es ist vor allem deshalb nett, weil es Ihr PHP und HTML zusammenhält und Ihr JS getrennt.

Folgendes sollte in jeder Vorlage platziert werden, die Sie zum Generieren Ihres äußeren HTML verwenden:

<?php

    $classes = array();
    if ( in_category('Collection') ) {
      $classes[] = 'collection';
    }
    $classes = implode(' ', $classes);

?>
<!-- 
  obviously you'd render the rest of the html markup
  I've removed it for simplicity
//-->
<body class="<?php echo $classes; ?>"></body>

Dann in Ihrem JavaScript / jQuery:

if ( $('body.collection').length ) {
  /// if collection sub page
}
else {
  /// else do otherwise
}

Wenn Sie lieber keine Klasse zu Ihrer hinzufügen möchten body -Element können Sie Ihre boolesche Prüfung immer auf der Grundlage von etwas definieren, das bereits auf einer Version der Seite vorhanden ist und nicht auf der anderen. Obwohl ich persönlich gerne die Dinge sauber halte und nur dann auf diese Art von Überprüfungen zurückgreife, wenn ich weiß, dass sich das HTML-Markup in Zukunft nicht viel ändern wird.

Nahezu alle Browser, über die sich die Welt heute Sorgen machen sollte, unterstützen mehrere Klassen für Elemente. Das heißt, selbst wenn Sie mehrere Dinge überprüfen möchten, können Sie diese Klassen, solange es sinnvoll ist, auf Ihrem platzieren html oder body Tag und verwenden Sie die Sizzle-Implementierung von jQuery, um sie für Sie zu finden.

Question 3

Javascript serverseitig zu erstellen ist wahrscheinlich etwas, was wir alle getan haben, trotz der Hauptargumente dagegen – nämlich, dass das js nicht (einfach) validiert werden kann (mit zB jsLint) und nicht (einfach) sein kann in eine .js-Datei einfügen – es hat keinen Sinn, dem Browser zu erlauben, nur eine von zwei oder mehr möglichen Versionen des Skripts zwischenzuspeichern.

Sie könnten erwägen, die serverseitige Verzweigung gegen die clientseitige Verzweigung einzutauschen, was den Code wohl lesbarer macht, aber, was noch wichtiger ist, ein Zwischenschritt zu meinem letzten Vorschlag ist (nachsichtig) :

var $submenu = $('.submenu');
// SUBMENU animation
var isCollection = <?php echo in_category('Collection') ? 'false' : 'true' ?>;
if ( !isCollection ) { // if not a Collection subpage
    $('.menu li a').each(function() { 
        if ( $(this).text() == 'Collection' ) { // If is Collection link show submenu on hover
            $(this).mouseenter(function() {
                $submenu.slideDown(); 
            });
        } else { // else close submenu on hover over other menu links
            $(this).mouseenter(function() {
                $submenu.slideUp(); 
            });
        }
    });
    $('.nav').mouseleave(function() { // close submenu
        $submenu.slideUp();
    });
} else { // If a Collection subpage always show subnav
    $submenu.show();
}

Jedochwenn der boolesche Wert isCollection könnte auf andere Weise bestimmt werden (z. B. durch Abfragen eines Aspekts des DOM wie a data-xxx Attribut), dann kochst du mit Gas. Es wäre nur eine Version des js-Skripts erforderlich; es könnte leicht mit jsLint validiert werden; und könnte bei Bedarf in eine .js-Datei verschoben werden.

Natürlich müssen Sie die einstellen data-xxx -Attribut (oder was auch immer) an anderer Stelle im serverseitigen Code (komplett mit einem erklärenden Kommentar), was ein möglicher Nachteil ist, aber vielleicht kein großer.

Vielleicht wären nicht alle js für diesen Ansatz geeignet, aber ich denke, das Beispiel in der Frage wäre es.

Meiner Ansicht nach ist dies bei dieser Gelegenheit ein gangbarer Weg.

Question 4

Zumindest ist es kein Zeichen für großartigen Code. Es gibt Alternativen:

Generieren ein JSON-Objekt und analysieren Sie es in JavaScript
Dynamische Einbindung von JS-Dateien

Stellen Sie einfach Bedingungen ein:

if(<?= (int)$mybool ?>) {
    doSomething();
}