it-swarm.dev

Wird es als schlechte Praxis angesehen, PHP in Ihrem JavaScript zu haben)?

So oft sehe ich auf dieser Seite Leute, die versuchen, solche Dinge zu tun:

<script type="text/javascript">
  $(document).ready(function(){

     $('<?php echo $divID ?>').click(funtion(){
       alert('do something');
     });

  });
</script>

Ich denke nicht, dass dies eine Art Muster ist, in das Menschen auf natürliche Weise fallen. Es muss eine Art Tutorial oder Lernmaterial geben, das dies zeigt, sonst würden wir es nicht so oft sehen. Was ich frage ist, mache ich eine zu große Sache daraus oder ist das eine wirklich schlechte Praxis?

EDIT : Ich habe mit einem Freund darüber gesprochen, der oft Ruby in sein JavaScript einfügt und diesen Punkt angesprochen hat.

Ist es in Ordnung, anwendungsweite Konstanten dynamisch in Ihrem JavaScript zu platzieren, damit Sie nicht zwei Dateien bearbeiten müssen? zum Beispiel...

MYAPP.constants = <php echo json_encode($constants) ?>;

es ist auch in Ordnung, Daten, die Sie in einer Bibliothek verwenden möchten, direkt zu codieren

ChartLibrary.datapoints = <php echo json_encode($chartData) ?>;   

oder sollten wir jedes Mal einen AJAX Aufruf) machen?

55
Greg Guida

Normalerweise ist es ist schlechte Praxis, Sprache X zu verwenden, um Code in Sprache Y zu generieren.

Versuchen Sie, die beiden Sprachen zu entkoppeln, indem Sie Daten zu ihrer einzigen Schnittstelle machen - mischen Sie nicht den Code.

In Ihrem Beispiel können Sie den Code verbessern, indem Sie PHP] verwenden, um eine cfg -Struktur zu füllen, die für JavaScript verfügbar ist:

<script type="text/javascript">
  var cfg = {
    theId: "<?php echo $divID ?>",
    ...
  };

  $(document).ready(function(){
     $("#" + cfg.theId).click(funtion(){
       alert('do something');
     });
  });
</script>

Auf diese Weise kümmert sich PHP nur um das Auffüllen der Datenstruktur und JavaScript nur um das Konsumieren der Datenstruktur.

Diese Entkopplung führt auch in Zukunft zum asynchronen Laden der Daten (JSON).

pdate :

Um die zusätzlichen Fragen zu beantworten, die Sie mit Ihrem Update gestellt haben, empfiehlt es sich, das Prinzip DRY] anzuwenden und PHP und JavaScript verwenden dieselbe Konfiguration) Objekt:

<script type="text/javascript">
  var cfg = <?php echo json_encode($cfg) ?>;

  ...

Es schadet nicht, die JSON-Darstellung Ihrer Konfiguration wie folgt direkt in Ihre Seite einzufügen. Sie müssen es nicht unbedingt über XHR abrufen.

83
Ates Goral

Dynamisch generiertes JavaScript ist eine schreckliche, schlechte Praxis.

Was Sie tun sollen, ist zu verstehen, was Trennung von Bedenken und fortschreitende Verbesserung bedeutet.

Dies bedeutet im Grunde, dass Sie über dynamisches HTML und statisches JavaScript verfügen (wodurch das HTML verbessert wird).

In Ihrem Fall möchten Sie wahrscheinlich eine Klasse in Ihrem div und wählen Sie sie mit einem Klassenselektor aus

21
Raynos

Das größte Problem mit Ihrem Snippet ist, dass Sie den # Fehlen, um ihn zu einem gültigen jQuery-Selektor zu machen;).

Ich würde sagen, Sie sollten versuchen, möglichst zu vermeiden, PHP in Ihr JavaScript aufzunehmen. Was ist falsch daran, den Selektor in Ihrem click() - Handler in eine Klasse zu ändern und die Klasse dem hinzuzufügen fragliches Element, wenn der Handler ausgelöst werden soll, und nicht, wenn Sie dies nicht tun;

<script type="text/javascript">
  $(document).ready(function(){

     $('.foo').click(funtion(){
       alert('do something');
     });

  });
</script> 

<div id="bar" class="<?php echo ($someCond ? 'foo' : ''); ?>">Hello</div>

Es gibt sind Umstände, unter denen Sie PHP in Ihr JavaScript aufnehmen müssen; aber ich muss zugeben, dass dies nur wenige sind.

Ein Beispiel ist, wenn Sie verschiedene Umgebungen haben; testen, inszenieren und leben. Jeder von ihnen hat einen anderen Speicherort für Ihre Assets (hauptsächlich Bilder). Der einfachste Weg, den Pfad so festzulegen, dass er von JavaScript verwendet werden kann, ist wie folgt:

var config = { assets: "<?php echo $yourConfig['asset_url']; ?>" };
10
Matt

Dies ist meiner Meinung nach eine schlechte Praxis, da Sie diese Datei etwas.php aufrufen müssten und sie dann beispielsweise nicht komprimieren könnten, ohne zu erwähnen, dass es nicht in Ordnung ist, Ihre Server-Inhalte mit Ihrem JavaScript zu mischen. Versuchen Sie, die Mischung zwischen PHP und JS) so weit wie möglich zu begrenzen.

Sie können dies stattdessen immer tun:

function setOnClick(divid) {
 $(divid).click(funtion(){
   alert('do something');
 });
}

Und dann könnten Sie diese Funktion in einer PHP-Datei aufrufen, um diese Mischsachen so klein wie möglich zu machen.

$(function() {
  setOnClick('<?php echo $divId; ?>');
});

Auf diese Weise (mit größeren JS-Dateien, nicht mit 2-3 Zeilen, wo es keine Rolle spielt) können Sie die JS-Datei komprimieren, und Front-End-Entwickler fühlen sich meiner Meinung nach sehr wohl, wenn sie nur mit JavaScript arbeiten (wie Sie schreiben könnten) Python, Ruby etc nicht nur PHP - und der Code könnte immer größer werden, je nachdem, was Sie dort tun müssen).

8
alessioalex

Ich denke nicht, dass dies eine schlechte Praxis ist. Wenn die in Ihrem JavaScript erforderliche ID dynamisch ist, gibt es keine andere Möglichkeit, dies zu tun.

6
CodeZombie

Ich würde diese schlechte Praxis in Betracht ziehen. Wenn Sie dynamischen Inhalt in Skriptblöcke einfügen, müssen Sie sich immer der Tatsache bewusst sein, dass das Entkommen in einem Javascript-Kontext nicht so einfach ist, wie Sie es sich erhoffen. Wenn Werte vom Benutzer bereitgestellt wurden, reicht es nicht aus, um sie durch HTML-Escape zu löschen.

Das OWASP XSS Spickzettel enthält weitere Details, aber im Grunde sollten Sie dieses Muster übernehmen:

<script id="init_data" type="application/json">
    <?php echo htmlspecialchars(json_encode($yourdata)); ?>
</script>

Laden Sie dann in einer separaten .js-Datei, die mit Ihrem Haupt-HTML-Code verknüpft ist, diesen Code:

var dataElement = document.getElementById('init_data');
var jsonText = dataElement.textContent || dataElement.innerText  // unescapes the content of the span
var initData = JSON.parse(jsonText);

Es gibt zwei Gründe für die Verwendung einer separaten .js-Datei:

  • Es kann zwischengespeichert werden, damit die Leistung besser ist
  • Der HTML-Parser wird nicht ausgelöst, daher besteht kein Risiko, dass ein XSS-Fehler durchrutscht, wenn jemand irgendwo ein schnelles <? Php-Tag einfügt
6
Joeri Sebrechts

Ich würde sagen, dass ich es im Allgemeinen nicht tue. Wenn Sie jedoch Daten von PHP -> Javascript) übergeben möchten, wäre es für mich nicht verrückt, einen Inline-Javascript-Block zu haben, in dem Sie den Code der unten gezeigten Form haben. Hier wird der Code gerade übergeben Daten von PHP zu Javascript, die keine spontane Logik oder ähnliches erzeugen. Der gute Teil bei einem Ajax-Aufruf besteht darin, dass die Daten verfügbar sind, sobald die Seite geladen wird und keine zusätzliche Fahrt zum Server erforderlich ist.

<script>
window.config = <?php echo json_encode($config);?>;
</script>

Eine andere Möglichkeit besteht natürlich darin, eine Javascript-Konfigurationsdatei aus PHP) über eine Art Build-Skript zu erstellen, das diese in eine .js-Datei einfügt.

5
Zachary K

Einige Leute würden argumentieren, dass es schlechte Praxis ist. Nicht weil es PHP in JS ist), sondern weil es Inline-JS ist und daher vom Browser nicht zwischengespeichert wird, um das Laden beim nächsten Mal zu vereinfachen.

IMO ist es immer besser, JSON zu verwenden, um Variablen zwischen den beiden Sprachen zu übergeben, aber ich denke, es liegt an Ihnen.

5
Nick

Das einzige, woran ich denken kann, was wirklich Probleme verursachen kann, ist, wenn PHP Fehler angezeigt werden sollen und daher eine Menge HTML mit dem PHP) angezeigt wird Fehler in Ihrem JavaScript.

Auch weil es im Skript ist, wird es daher nicht angezeigt und es kann manchmal eine Weile dauern, bis klar wird, warum Ihr Skript fehlerhaft ist.

4
Alex Coplan

Es hängt davon ab, von wem, und wenn Sie mich fragen, ja, ich halte es aus einigen Gründen für eine Übung. Zunächst möchte ich lieber Javascript-Code in einer eigenen JS-Datei haben, den der PHP-Parser nicht berühren kann.

Zweitens wird PHP nur zur Serverzeit ausgeführt. Wenn Sie also auf eine Variable in PHP angewiesen sind, um Ihr Javascript zu ändern, funktioniert dies möglicherweise nicht sehr gut. Wenn es eine Einstellung zum Laden von Seiten gibt, die Sie mit Javascript steuern möchten, ziehe ich es normalerweise vor, diesen Wert mit PHP zum DOM hinzuzufügen, damit Javascript ihn erreichen kann, wann und wenn er möchte (z. B. in einem versteckten Div).

Schließlich kann dies nur aus organisatorischen Gründen sehr ärgerlich werden. Es ist schon schlimm genug, HTML und PHP zu mischen (meiner Meinung nach).

3
Explosion Pills

Das Enthalten des PHP in einem config -Datenobjekt geht zu 90% aus dem Weg, aber es wird empfohlen, es vollständig zu trennen. Sie können eine RESTful-API verwenden, um nur die Daten anzufordern, die Sie benötigen brauchen, es ist ein bisschen mehr Javascript, aber mit ein paar Vorteilen.

  • Das Skript ist statisch und kann dauerhaft zwischengespeichert werden
  • PHP ist kein XSS-Vektor mehr
  • Vollständige Trennung der Bedenken

Nachteile:

  • Erfordert eine zusätzliche HTTP-Anforderung
  • komplexeres Javascript

Skript

//pure javascript
$.on('domready',function({
    //load the data
    $.get({
       url:'/charts/3D1A2E', 
       success: function(data){
           //now use the chart data here
           ChartModule.init(data);
       }
    });
})
1
roo2