Est-il considéré comme une mauvaise pratique d'avoir PHP dans votre JavaScript

Tant de fois sur ce site, je vois des gens qui essaient de faire des choses comme celle-ci:

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

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

  });
</script>

Je ne pense pas que ce soit une sorte de modèle dans lequel les gens tombent naturellement. Il doit exister une sorte de didacticiel ou de matériel didactique sur ce sujet, sinon nous le verrions moins. Ce que je demande, c’est: est-ce que je fais beaucoup trop de choses ou est-ce vraiment une mauvaise pratique?

EDIT: J'en parlais à un de mes amis qui mettait souvent Ruby dans son code JavaScript et il a soulevé ce point.

Est-il possible de placer dynamiquement des constantes d'application dans votre JavaScript afin de ne pas avoir à éditer deux fichiers? par exemple...

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

Vous pouvez également encoder directement les données que vous prévoyez d'utiliser dans une bibliothèque.

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

ou devrions-nous faire un appel AJAX à chaque fois?

En règle générale, il est déconseillé d’utiliser le langage X pour générer du code dans le langage Y.

Essayez de découpler les deux langues en faisant des données leur seule interface - ne mélangez pas le code .

Dans votre exemple, vous pouvez améliorer le code en utilisant PHP pour renseigner une cfgstructure disponible pour JavaScript:

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

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

De cette façon, PHP ne s'occupe que de renseigner la structure de données et JavaScript de consommer uniquement la structure de données.

Ce découplage ouvre également la voie au chargement futur des données de manière asynchrone (JSON).

Mise à jour:

Pour répondre aux questions supplémentaires que vous avez posées avec votre mise à jour, oui, il serait judicieux d'appliquer le principe DRY et de laisser PHP et JavaScript partager le même objet de configuration:

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

  ...

Il n'y a pas de mal à insérer la représentation JSON de votre configuration directement dans votre page comme ceci. Vous n'êtes pas obligé de le récupérer via XHR.

JavaScript généré dynamiquement est une pratique horrible et mauvaise.

Ce que vous êtes censé faire, c'est comprendre ce que signifie séparation des préoccupations et amélioration progressive.

Cela signifie essentiellement que vous avez du code HTML dynamique et du code JavaScript statique (qui améliore le code HTML).

Dans votre cas, vous voulez probablement une classe sur votre div et sélectionnez-la avec un sélecteur de classe

Le plus gros problème avec votre extrait de code est qu'il vous manque le #pour en faire un sélecteur valide de jQuery;).

Je dirais que vous devriez essayer d'éviter d'inclure PHP dans votre JavaScript si possible. Qu'est-ce qui ne va pas avec le changement de sélecteur dans votre click()gestionnaire en classe et l'ajout de la classe à l'élément en question si vous souhaitez que le gestionnaire soit déclenché, et non si vous ne le faites pas;

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

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

  });
</script> 

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

Il y a des circonstances où vous devez inclure dans votre PHP JavaScript; mais je dois admettre que ceux-ci sont rares.

Un exemple est lorsque vous avez des environnements différents; tester, mettre en scène et vivre. Chacun d'entre eux a un emplacement différent de vos actifs (images, principalement). Le moyen le plus simple de définir le chemin d'accès de sorte qu'il puisse être utilisé par JavaScript est quelque chose comme:

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

C'est une mauvaise pratique à mon avis, car vous auriez besoin d'appeler ce fichier quelque chose.php et ensuite vous ne pourriez pas le compresser par exemple, ne dites pas qu'il n'est pas correct de mixer votre contenu de serveur avec votre JavaScript. Essayez de limiter autant que possible le mélange entre PHP et JS.

Vous pouvez toujours le faire à la place:

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

Et ensuite, vous pouvez appeler cette fonction dans un fichier php, pour rendre ces opérations de mixage aussi petites que possible.

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

En faisant cela (avoir des fichiers JS plus volumineux, pas deux ou trois lignes là où ça ne fait rien), vous pouvez tirer parti de la compression du fichier JS et les développeurs front-office se sentiront plus à l'aise de travailler uniquement avec JavaScript, à mon avis (comme vous pourriez l'écrire). Python, Ruby, etc. non seulement PHP - et le code pourrait devenir de plus en plus gros selon ce que vous devez faire là-bas).

Je ne pense pas que ce soit une mauvaise pratique. Si l'ID requis dans votre JavaScript est dynamique, il n'y a pas d'autre moyen de le faire.

Je considérerais cette mauvaise pratique. Lorsque vous insérez du contenu dynamique dans des blocs de script, vous devez toujours être conscient du fait que s’échapper dans un contexte javascript n’est pas aussi simple que vous le souhaiteriez. Si les valeurs ont été fournies par l'utilisateur, il ne suffit pas de les échapper en HTML.

La feuille de triche OWASP XSS contient plus de détails, mais vous devriez fondamentalement adopter ce modèle:

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

Ensuite, dans un fichier .js séparé, lié à votre code HTML principal, chargez le code suivant:

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

La raison d'utiliser un fichier .js séparé est double:

• Il est cacheable donc la performance est meilleure
• L'analyseur HTML n'est pas déclenché, il n'y a donc aucun risque qu'un bogue XSS passe par quelqu'un qui insère une balise <? Php rapide quelque part

Certaines personnes diraient que c'est une mauvaise pratique. Non pas parce que c'est PHP dans JS, mais parce que c'est un JS en ligne qui ne sera donc pas mis en cache par le navigateur pour faciliter le chargement la prochaine fois.

IMO, il est toujours préférable d'utiliser JSON pour passer des variables entre les 2 langues, mais je suppose que cela dépend de vous.

Je dirais qu'en général ne le fais pas. Cependant, si vous voulez transmettre des données de PHP -> Javascript, cela ne me semblerait pas fou d’avoir un bloc Javascript intégré dans lequel vous avez le code de la forme montrée ci-dessous. Ici, le code ne fait que transmettre des données de php à javascript, sans créer de logique à la volée, etc. Le bon côté de cette opération, par rapport à un appel ajax, est que les données sont disponibles dès le chargement de la page et ne nécessitent pas de déplacement supplémentaire sur le serveur.

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

Bien sûr, une autre option consiste à créer un fichier de configuration javascript à partir de PHP via une forme de script de construction qui le mettra dans un fichier .js.

La seule chose qui puisse vraiment poser problème, c’est lorsque les erreurs PHP sont configurées pour être affichées, ce qui entraîne une charge HTML qui affiche l’erreur PHP dans votre code JavaScript.

Aussi, parce que c'est écrit dans le script, il ne s'affiche donc pas et il faut parfois un certain temps pour comprendre pourquoi votre script est endommagé.

Cela dépend de qui, et si vous me le demandez, oui, je considère cela comme une pratique en retour pour plusieurs raisons. Tout d’abord, je préférerais avoir du code javascript dans son propre fichier JS que l’analyseur php ne pourrait pas toucher.

Deuxièmement, php s’exécute uniquement à l’heure du serveur. Par conséquent, si vous comptez sur une variable php pour modifier votre code javascript, il se peut que cela ne fonctionne pas très bien. S'il y a des paramètres de chargement de page que vous voulez contrôler avec javascript, je préfère généralement ajouter cette valeur au DOM avec php pour que javascript puisse l'atteindre quand et si il le souhaite (dans un div masqué, par exemple).

Enfin, juste à des fins d'organisation, cela peut devenir très ennuyeux. Il est déjà assez difficile de mélanger html et php (à mon avis).

Le fait de contenir PHP dans un configobjet de données représente 90% du chemin, mais la meilleure pratique consiste à le séparer entièrement. Vous pouvez utiliser une API RESTful pour demander uniquement les données dont vous avez besoin. C’est un peu plus javascript, mais avec quelques avantages.

• Le script est statique et peut être mis en cache de manière permanente
• PHP n'est plus un vecteur XSS
• Séparation complète des préoccupations

Inconvénients:

• Requiert une requête HTTP supplémentaire
• javascript plus complexe

Scénario

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

Ce n’est pas une mauvaise pratique UNIQUEMENT si elle est utilisée pour l’initialisation de code javascript (dans mes thèmes WordPress, j’initialise mes objets javascript avec des fonctions php telles que site_url () car c’est le seul moyen de gérer cela (nous pourrions peut-être utiliser une requête ajax pour obtenir un json, et alors ... mais c'est une douleur dans le cul).

Bonnes pratiques:

Mauvaise pratique: