Javascript Girl
  1. Javascript Girl
  3. La liaison des fichiers javascript dans le corps plutôt que dans l'en-tête entraînera-t-elle un problème?
Intereting Posts
Créer une capture d'écran de la page Web à l'aide de html2canvas (incapable de l'initialiser correctement) Javascript / jQuery $ .get (url) L'analyse de titre ne fonctionne pas JQuery fadeIn sur position: cause absolue problème z-index Erreur de sérialisation JavaScript ASP.Net AJAX Importation de XML vers HTML sans serveur Variable in for loop est une chaîne L'élément positionné fixe scintille dans IE uniquement, comment résoudre? RxJS: concattez trois promesses, distinguez les résultats Déterminez si la touche Shift est enfoncée pendant l'événement mousedown D3 Multiline Chart with Information Tool Vérifiez quel contrôle a lancé la requête AJAX Comment puis-je exécuter un script après avoir appelé window.location.href? Variables globales en météorite Cordova Angular Get to Web Api Connection Refused Sondage pour un résultat n fois (avec des retards entre les tentatives) avant d'échouer

La liaison des fichiers javascript dans le corps plutôt que dans l'en-tête entraînera-t-elle un problème?

C'est ce que j'essaie de faire 

<script type="text/javascript" src="resources/application.js"></script> <script type="text/javascript" > $(document).ready(createHeader()); $(document).ready(scriptSet()); </script>

Id aime éviter d'avoir à séparer les deux, et bien que, généralement, je vois des liens de script uniquement à l'intérieur de l'en-tête, les fonctions document.ready ne semblent pas fonctionner lors de leur mise en place. Cependant, tout semble fonctionner complètement bien lorsqu'il est placé à la fin du corps, donc cela causerait-il des problèmes ou est-ce bien?

Fonctionnellement, tant que vous joignez votre code à l'intérieur d'un $(document).ready(function(){ }); Et il vient après le fichier jQuery comprend, peu importe si c'est dans la head ou le body . $(document).ready garantit que le DOM est complètement chargé avant que n'importe quel script ne soit exécuté.

TOUTEFOIS , la mise en page de votre script comprend et les scripts au bas du body sont les meilleurs pour le chargement des performances.

Cet article l'explique bien.

Exemple: 

  <body> <!-- MY HTML CODE --> <!-- START javascript --> <script type="text/javascript" src="/javascript/jquery/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin.js"></script> <script type="text/javascript" src="/javascript/jquery/plugins/jquery.random_plugin2.js"></script> <script type="text/javascript" src="/javascript/some_other_scripts.js"></script> <script type="text/javascript" language="JavaScript"> //<![CDATA[ $(document).ready(function(){ // my code }); //]]> </script> <!-- END javascript --> </body>

Il n'y a aucun problème avec les étiquettes de script dans le corps. Rappelez-vous simplement que la page est analysée de haut en bas, de sorte que les scripts doivent être inclus avant qu'ils ne soient utilisés.

Vous vous rendez compte que les fonctions que vous avez placées dans $(document).ready() n'attendent pas que DOMContentLoaded déclenche? Vous devez les envelopper dans un appel de fonction (gestionnaire d'événements) afin d'éviter de les appeler instantanément lorsqu'ils apparaissent dans le code. Une fonction anonyme est généralement très bien. 

 $(document).ready(function(){ createHeader(); scriptSet(); });

J'ai déployé un certain nombre d'applications Web et je n'ai jamais eu de problème avec le script dans la balise du corps. J'aime le placer au bout de la page afin de ne pas entraver la progression du téléchargement des éléments visibles sur la page. Je crois que Google a également fait cela avec certains de leurs scripts (peut-être Analytics?).

Comme certains d'entre eux l'ont dit, assurez-vous d'avoir votre référence jQuery avant le $ (document) .ready (); appel. Il est facile de passer, et difficile à dépanner 🙂

JMax

Nop, en fait, il est bon pour la «performance» de mettre vos scripts à la fin de votre HTML.

Encore une bonne pratique est d'avoir tout votre javascript dans un autre fichier et de simplement définir un en-tête appelant, voire même compresser le fichier.

Maintenant, je changerais ce code pour cela 

 $(document).ready(function(){ createHeader(); scriptSet(); });

Donc vous n'appelez pas $ (document) .ready deux fois 🙂

Il est généralement peu important que vous mettiez votre script à inclure et bloquer dans votre élément BODY ; Ils fonctionneront parfaitement bien dans la plupart des cas. Certaines personnes le croient une mauvaise pratique, mais ce n'est pas une mauvaise pratique. Cela arrive tout le temps.

Cependant, j'aimerais souligner que peu importe où vous mettez un appel de fonction $.ready() , tant qu'il est après l'inclusion de jQuery, car il fonctionnera toujours après le DOM est prêt (ce qui se produira APRÈS Chargement de la page). Donc, dans ce cas, cela ne fait aucune différence.

Notez la fonction anonyme dans l'appel de fonction. Cela passe une référence à $.ready() pour la fonction anonyme, qui permet à son corps de fonction d'être exécuté ultérieurement, d'où vos fonctions seront appelées ultérieurement. 

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