Maison >interface Web >js tutoriel >Introduction à la synchronisation de fichiers et aux méthodes de chargement asynchrone en JavaScript

Introduction à la synchronisation de fichiers et aux méthodes de chargement asynchrone en JavaScript

黄舟original: 2017-08-20 09:49:101558parcourir

Concernant la référence des fichiers JS, bien qu'il existe actuellement de nombreux frameworks et outils (comme webpack, commonjs, requirejs, 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.

Chargement synchronisé

peut être inséré dans le fichier html avec la balise 3f1c4e4b6b16bbbd69b2ee476dc4f83a moyen le plus pratique pour commencer à apprendre.

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 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.

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>

Les résultats de débogage dans Chrome peuvent parfois être correctement affichés comme suit :

Mais parfois, comme clac1.js n'est pas chargé en premier, 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 .

Résumé

S'il s'agit d'un seul ou de quelques fichiers js, vous pouvez insérer une balise de script en 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.

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!

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 code pour implémenter le widget Snake en JavaScriptArticle suivant：Exemple de code pour implémenter le widget Snake en JavaScript

Articles Liés

Voir plus