Maison >interface Web >js tutoriel >Code d'implémentation pour le chargement synchrone et asynchrone de fichiers JavaScript

Code d'implémentation pour le chargement synchrone et asynchrone de fichiers JavaScript

韦小宝original: 2018-01-19 10:32:211381parcourir

Cet article présente principalement le code d'implémentation de la synchronisation et du chargement asynchrone des fichiers JavaScript. Il a une certaine référence et valeur pour l'apprentissage de JavaScript. Ceux qui sont intéressés par JavaScript peuvent lire cet article

Quant à la référence des fichiers JS, bien qu'il existe actuellement de nombreux frameworks et outils (comme webpack, commonjs,

requiresjs, etc.), ils ont fait du bon travail. Mais en dehors de ces frameworks, il est toujours utile de comprendre la méthode de chargement native. Cet article décrit brièvement les méthodes de chargement synchrone et asynchrone de certains fichiers js. Le

Le chargement synchrone

peut être inséré dans le fichier html avec la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a quand vous apprenez pour la première fois.

Préparez deux fichiers js comme suit :

calc1.js

console.log(&#39;calc1 loading begin&#39;)

function add(...args) {
  return args.reduce((currentTotal, i) => currentTotal + i, 0);
}
console.log(&#39;calc1 loading end&#39;)

calc2.js

console.log(&#39;calc2 loading begin&#39;)

console.log(add(1,2,3))

console.log(&#39;calc2 loading end&#39;)

calc2.js Oui Dépend de calc1.js.

le fichier html est le suivant :

<body>

  <script src="calc1.js">
  </script>
  
  <script src="calc2.js">
  </script>
</body>

De cette façon, le chargement du fichier est synchrone. Autrement dit, calc2.js n'est chargé qu'après le chargement de calc1.js, il est donc garanti que calc2.js peut toujours appeler correctement la fonction d'ajout dans calc1. Les résultats du débogage dans Chrome sont les suivants :

Cependant, les inconvénients du chargement synchrone sont également évidents s'il y a plusieurs fichiers, le temps de chargement total sera très long et. l'interface utilisateur sera bloquée.

Chargement asynchrone via Script Element

L'avantage du chargement asynchrone est qu'il peut charger plusieurs fichiers js en même temps, et parce qu'il est asynchrone, il ne bloquera pas l'interface utilisateur et offrira une bonne expérience utilisateur. Bien entendu, l’inconvénient est que l’ordre de chargement des fichiers dépendants ne peut être garanti. Les résultats de débogage du

code HTML

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    var script1 = document.createElement(&#39;script&#39;);
    script1.src=&#39;calc1.js&#39;;
    script1.type=&#39;text/javascript&#39;;

    var script2 = document.createElement(&#39;script&#39;);
    script2.src=&#39;calc2.js&#39;;
    script2.type=&#39;text/javascript&#39;;

    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script1).appendChild(script2);
  </script>
</head>

dans Chrome peuvent parfois être correctement affichés comme suit :

Mais parfois en raison de clac1.js n'est pas chargé en premier et une erreur sera signalée lors de l'exécution de calc2.js.

Ensuite, nous devons résoudre le problème de l'ordre de chargement et nous assurer que calc1.js est chargé en premier.

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function loadScript(file, callbackFn) {
      var script = document.createElement(&#39;script&#39;);
      script.src= file;
      script.type=&#39;text/javascript&#39;;
      // 监听onload时间，当前js文件加载完成后，再加载下一个
      script.onload = callbackFn;
      document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script)
    }
    
    loadScript(&#39;calc1.js&#39;, function () {
      loadScript(&#39;calc2.js&#39;);
    } );

  </script>
</head>

De cette façon, le résultat correct sera toujours affiché.

Le chargement de fichiers JS via AJAX

 <script>
    function loadScript(file, callbackFn) {
      var xhr = new XMLHttpRequest();
      xhr.open(&#39;get&#39;, file, true);
      // for IE
      if (xhr.onreadystatechange) {
        xhr.onreadystatechange = function () {
          console.log(xhr.readyState, xhr.status);
          if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
              insertScriptText(xhr.responseText);
              if (callbackFn) {
                callbackFn();
              }
            }
          }
        }
      } else {
        xhr.onload = function () {
          insertScriptText(xhr.responseText);
          if (callbackFn) {
            callbackFn();
          }
        }
      }
      xhr.send(null);
    }

    function insertScriptText(scriptText) {
      var script = document.createElement(&#39;script&#39;);
      script.type = &#39;text/javascript&#39;;
      script.text = scriptText;
      document.body.appendChild(script);
    }

    loadScript(&#39;calc1.js&#39;, function () {
      loadScript(&#39;calc2.js&#39;);
    });

  </script>

peut également afficher les résultats correctement .

S'il s'agit d'un seul ou de quelques fichiers js, vous pouvez insérer une balise de script à la fin du corps html à charger de manière synchrone. Webpack fusionne en fait plusieurs fichiers js en un seul, puis insère des références de script dans le corps.

Recommandations associées :

Fonction de vérification en temps réel d'imitation du nombre de mots d'entrée original de Sina Weibo implémentée par JavaScript

Javascript génère des nombres aléatoires Résumé des méthodes

Code d'implémentation JavaScript pour bloquer la touche Retour arrière

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript ajax chrome html webpack JS 异步

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de JavaScript complétant la vérification du formulaire sur la page d'inscriptionArticle suivant：Exemple de JavaScript complétant la vérification du formulaire sur la page d'inscription

Articles Liés

Voir plus