Les bonnes pratiques javascript

poupilou · 19 Juin 2017

Salut à tous,

J'ai lu cet article avec intérêt, on l'on peut apprendre les bonnes pratiques concernant notre "ami" javascript, à savoir :

Ne pas utiliser :
- eval()
- le préfixe javascript:
- with()
- document.write();
- Des commentaires pour « cacher » le code javascript

Faire attention avec :
- setTimeout() et setInterval()
- innerHTML

Utiliser :
- le mot-clef var pour déclarer ses variables
- des accolades et des points-virgules partout où il en faut
- la syntaxe littérale pour créer des objets
- placer son code javascript après tout le contenu HTML de la page

Sur mon site c'est un peu le souk concernant javascript, jquery et ajax, j'ai des fichiers externes javascript, j'ai du code en dur dans mon code html (principalement pour des requêtes jquery et des requêtes ajax), etc... comme je suis entrain de faire le ménage, je souhaiterai avoir des conseils quand à l'utilisation des différents code javascript, jquery et ajax :

1) Faut-il toujours placer le code javascript, jquery et ajax dans un fichier externe ?

2) Faut-il créer un fichier externe par type de code (javascript, jquery, ajax, etc...) ou doit-on regrouper tous ces différents codes dans un même fichier ?

3) Comment faites vous sur vos sites pour gérer le code javascript, le code jquery et l'Ajax : un fichier externe par type de code, ou placez-vous ces fichiers externes (entre le <head></head> ou en bas du code html juste avant le </body> ?

4) Y a-t-il des règles concernant l'appel de ces différents codes (javascript, jquery, ajax, etc...), doivent-ils être appelé avant certains autres ?

Merci d'avance pour vos réponses et votre aide

spout · 19 Juin 2017

1) Oui c'est mieux
2) Je regroupe en 1 seul avec webpack, d'ailleurs je te conseille d'y jeter un oeil:
- http://putaindecode.io/fr/articles/js/webpack/
- http://www.theodo.fr/blog/2016/07/a-comprehensive-introduction-to-webp ... e-bundler/
3) Le JS avant le </body>
4) Heu ? Y'a des scripts qui ont besoin que le DOM soit ready, d'autres async, defer, etc ... c'est flou/vaste comme question.

Ressources complémentaires:
- https://blog.risingstack.com/node-js-best-practices-2017/
- http://www.planningforaliens.com/blog/2016/04/11/why-js-development-is-crazy/
- http://youmightnotneedjquery.com/

rick38 · 19 Juin 2017

3) le fichir js dans <head> avec la propriété "async". Ca permet de le charger en asynchrone sans attendre d'avoir chargé le html allant jusqu'au </body>. Bien sûr ça ne marche que s'il y a 1 seul fichier js ou qu'ils ne soient pas interdépendants (regrouper tous les fichiers en un seul pour une question de performance).

4) mettre le code jquery dans $(document).ready() comme ça ça attend que le dom soit chargé avant d'exécuter.

poupilou · 19 Juin 2017

Merci pour vos réponses.

Spout: je viens de regarder le webpack, désolé mais c'est trop compliqué pour moi

Je vais essayer de créer des fichiers javascript externe et voir si ça fonctionne.

Est-ce qu'il faut aussi externaliser le code jquery et le mettre dans un fichier .js spécifique ?

poupilou · 19 Juin 2017

J'ai un problème de javascript.

J'ai une liste déroulante et au-dessus de cette liste s'affiche une image qui change en fonction de la valeur sélectionnée dans cette liste déroulante, mais en plus lorsqu'on sélectionne une valeur dans cette liste déroulante il y a une <div></div> qui s'affiche (ou qui se masque) en-dessous de cette liste déroulante.

1) l'image ne s'affiche pas
2) les <div></div>ne se masquent pas

Mon code javascript ci-dessous est externalisé dans un fichier javascript et ce fichier .js est inclus juste avant la balise </body>.

Voici mon code javascript :

Code:

/* Affiche monture */
function Affiche_monture(){
  var Arg = arguments;
  var Obj;
  for( var i=0; i< Arg.length; i++){
    Obj = document.getElementById( Arg[i]);
    if( Obj){
      Obj.style.visibility = "visible";
      Obj.style.display = "";
    }
  }
}

/* Masque monture */
function Masque_monture(){
  var Arg = arguments;
  var Obj;
  for( var i=0; i< Arg.length; i++){
    Obj = document.getElementById( Arg[i]);
    if( Obj){
      Obj.style.visibility = "hidden";
      Obj.style.display = "none";
    }
  }
}

function update_type_bijou() {
var e = document.getElementById("caption_bijou");
var id = e.options[e.selectedIndex].id;
document.getElementById('image_bijou').src = "<?php echo "../services/images/catalogue/";?>" + id;
}
window.onload = update_type_bijou;

Mon code html :

Code:

<div id="block_menu" style="display:block">
<div class="boite_jewelry">
<div align="center">
<img id="image_bijou" class="photoagauche" width="140" height="140" src="">
<br>
<select name='caption_bijou' id="caption_bijou" class="listederoulante" onChange='update_type_bijou()'>
<option value="solitaire" id="solitaire-diamant.jpg" OnClick="Masque_monture('pendentif');Masque_monture('boucles-oreilles');Masque_monture('alliance');Affiche_monture('bague');">Bague Solitaire</option>
<option value="bague_pavage" id="bague-pavage-diamant.jpg" OnClick="Masque_monture('pendentif');Masque_monture('boucles-oreilles');Masque_monture('alliance');Affiche_monture('bague');">Bague Pavage</option>
<option value="bague_epaulee" id="bague-epaulee-diamant.jpg" OnClick="Masque_monture('pendentif');Masque_monture('boucles-oreilles');Masque_monture('alliance');Affiche_monture('bague');">Bague Epaulée</option>
<option value="bague_trilogie" id="bague-trilogie-diamant.jpg" OnClick="Masque_monture('pendentif');Masque_monture('boucles-oreilles');Masque_monture('alliance');Affiche_monture('bague');">Bague Trilogie</option>
<option value="tour_complet" id="alliance-diamant.jpg" OnClick="Masque_monture('pendentif');Masque_monture('boucles-oreilles');Masque_monture('bague');Affiche_monture('alliance');">Alliance Diamant</option>
<option value="demi_tour" id="demi-alliance-diamant.jpg" OnClick="Masque_monture('pendentif');Masque_monture('boucles-oreilles');Masque_monture('bague');Affiche_monture('alliance');">Demi Alliance Diamant</option>
<option value="pendentif" id="pendentif-diamant.jpg" OnClick="Masque_monture('bague');Masque_monture('boucles-oreilles');Masque_monture('alliance');Affiche_monture('pendentif');">Pendentifs Diamant</option>
<option value="boucles-oreilles" id="boucles-oreilles-diamant.jpg" OnClick="Masque_monture('pendentif');Masque_monture('bague');Masque_monture('alliance');Affiche_monture('boucles-oreilles');">Boucles d'Oreilles</option>
</select>
</div>
<br>
<div id="bague" style="display: yes">
<form name="recherche" method="post" action="recherche.html">
Bagues
<br>
<input type="submit" name="ok" value="Recherche">
</form>
</div>
<div id="alliance" style="display: none">
<form name="recherche" method="post" action="recherche.html">
Alliances
<br>
<input type="submit" name="ok" value="Recherche">
</form>
</div>
<div id="pendentif" style="display: none">
<form name="recherche" method="post" action="recherche.html">
Pendentif
<br>
<input type="submit" name="ok" value="Recherche">
</form>
</div>
<div id="boucles-oreilles" style="display: none">
<form name="recherche" method="post" action="recherche.html">
Boucles oreilles
<br>
<input type="submit" name="ok" value="Recherche">
</form>
</div>
</div>

Voyez-vous ce qui déconne ?

spout · 19 Juin 2017

poupilou a dit:
Voici mon code javascript :

Un script .js avec du <?php dedans ?

poupilou · 19 Juin 2017

Oui ça va un mieux en supprimant le php du code javascript :? mais la première image ne s'affiche pas lorsqu'on charge la page !

L'image s'affiche ensuite lorsqu'on sélectionne une autre valeur de la liste déroulante.

Je pense que le problème vient du

Code:

window.onload = update_type_bijou;

A quel endroit du code html faut-il placer ce code ?

D'autre part, lorsque je déplace mon fichier jquery-1.7.2.min.js juste avant la balise </body> certaines fonctionnalités jquery de mon site ne fonctionnent plus. Si je laisse ce fichier jquery-1.7.2.min.js entre les balises <head></head> ça fonctionne correctement...

poupilou · 19 Juin 2017

Les fichiers javascript jquery doivent rester entre les balises <head</head>, j'ai testé le code html ci-dessous sur ce site https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_ready et si vous permutez les 2 includes de fichiers javascript (jquery-1.12.4.js et jquery-ui.js) à la fin du code html avant la balise </body> les widgets jquery ne fonctionnent plus !

Code:

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Collapse content</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
   $( "input" ).checkboxradio({
      icon: false
    });

  } );
  </script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
  </div>
  <h3>Section 2</h3>
  <div>
<div class="widget">
  <fieldset>
    <label for="checkbox-nested-1">2 Double
      <input type="checkbox" name="checkbox-nested-1" id="checkbox-nested-1">
    </label>
    <label for="checkbox-nested-2">2 Queen
      <input type="checkbox" name="checkbox-nested-2" id="checkbox-nested-2">
    </label>
    <label for="checkbox-nested-3">1 Queen
      <input type="checkbox" name="checkbox-nested-3" id="checkbox-nested-3">
    </label>
    <label for="checkbox-nested-4">1 King
      <input type="checkbox" name="checkbox-nested-4" id="checkbox-nested-4">
    </label>
  </fieldset>
</div>


  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
  </div>
</div>
</body>
</html>