Résumé des exemples de méthodes de chargement dynamique de scripts dans les compétences js

L'exemple de cet article décrit la méthode de chargement dynamique de scripts en js. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Récemment, le produit cartographique frontal de l'entreprise doit être divisé en modules. On espère que les utilisateurs chargeront quel module en fonction de la fonction qu'ils utilisent, cela pourra améliorer l'expérience utilisateur.

J’ai donc cherché partout pour étudier le chargement des scripts dynamiques js, mais c’est vraiment dommage ! , il y a presque les mêmes articles sur Internet, 4 méthodes. Je déteste les gens qui copient les résultats des autres et n'ajoutent pas de lien vers l'article original. Pourquoi! Le fait est que la dernière méthode est encore un peu fausse. Après deux jours de recherche et d'informations, j'aimerais le partager avec vous ici.

Nous avons d'abord besoin d'un fichier js à charger. J'ai créé un package.js dans un dossier fixe, j'y ai écrit une méthode functionOne. Le code est le suivant :

function functionOne(){
  alert("成功加载");
}

Copier après la connexion

Les fichiers html suivants sont tous créés dans le même répertoire.

Méthode 1 : Direct document.write

Créez un function1.html sous le même dossier avec le code suivant :

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      //加载js脚本
      document.write("<script src='package.js'><\/script>");
      //加载一个按钮
      document.write("<input type=\"button\" value=\"测试运行效果\" onclick=\"operation()\"\/>");
      //如果马上使用会找不到，因为还没有加载进来，此处会报错
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="初始化加载" onclick="init()"/>
</body>
</html>

Copier après la connexion

Vous pouvez écrire des scripts sur la page via document.write. Comme indiqué dans le code, vous pouvez charger le fichier package.js après avoir cliqué sur le bouton "Chargement initial", mais si vous exécutez la méthode functionOne immédiatement, vous ne le ferez pas. être en mesure de trouver cette méthode. Signaler une erreur, mais en cliquant sur le deuxième bouton ("Test Running Effect" créé dynamiquement via document.write), il a été constaté qu'elle pouvait être exécutée à ce moment-là, le script a été chargé. Comme cette méthode est un chargement asynchrone (tout en continuant à exécuter le code suivant, un thread supplémentaire est ouvert pour exécuter le script qui doit être chargé), et document.write va réécrire l'interface, ce qui n'est évidemment pas pratique.

Méthode 2 : Modifier dynamiquement l'attribut src d'un script existant

Créez un function2.html sous le même dossier avec le code suivant :

<html>
<head>
  <title></title>
  <script type="text/javascript" id="yy" src=""></script>
  <script type="text/javascript">
    function init()
    {
      yy.src = "package.js";
      //如果马上使用会找不到，因为还没有加载进来，此处会报错
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
  <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

Copier après la connexion

L'avantage de cette méthode est qu'elle ne modifie pas les éléments de l'interface et ne réécrit pas les éléments de l'interface. Cependant, elle est également chargée de manière asynchrone et aura le même problème.

Méthode 3 : Créer dynamiquement des éléments de script (asynchrone)

Créez un function3.html sous le même dossier avec le code suivant :

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.src="package.js";
      document.body.appendChild(myScript);
      //如果马上使用会找不到，因为还没有加载进来
      functionOne();
    }
    function operation()
    {
      //可以运行，显示“成功加载”
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
  <input type="button" value="测试运行效果" onclick="operation()"/>
</body>
</html>

Copier après la connexion

L'avantage de cette méthode par rapport à la deuxième méthode est qu'il n'est pas nécessaire d'écrire une balise de script dans l'interface au début. L'inconvénient est le chargement asynchrone et le même problème.

Ces trois méthodes sont toutes exécutées de manière asynchrone, donc lors du chargement de ces scripts, les scripts de la page principale continuent de s'exécuter si les méthodes ci-dessus sont utilisées, le code suivant n'aura pas l'effet escompté.

Cependant, vous pouvez ajouter une alerte devant functionOne pour bloquer l'exécution du script de la page principale. Ensuite, vous constatez que functionOne peut s'exécuter, ou votre code ultérieur doit être exécuté sous un autre bouton. ou bien Définissez simplement un timer et exécutez le code suivant après un temps fixe. Cependant, il est définitivement impossible d'utiliser ces méthodes dans le projet.

En fait, la troisième méthode peut être modifiée en chargement synchrone avec quelques modifications.

Méthode 4 : Créer dynamiquement des éléments de script (de manière synchrone)

Créez un function4.html sous le même dossier avec le code suivant :

<html>
<head>
  <title></title>
  <script type="text/javascript">
    function init()
    {
      var myScript= document.createElement("script");
      myScript.type = "text/javascript";
      myScript.appendChild(document.createTextNode("function functionOne(){alert(\"成功运行\"); }"));
      document.body.appendChild(myScript);
      //此处发现可以运行
      functionOne();
    }
  </script>
</head>
<body>
  <input type="button" value="测试按钮" onclick="init()"/>
</body>
</html>

Copier après la connexion

Cette méthode ne charge pas les fichiers js externes, mais ajoute des sous-éléments à myScript. Dans Firefox, Safari, Chrome, Opera et IE9, ce code fonctionne correctement. Cependant, cela provoquera des erreurs dans IE8 et les versions inférieures. IE traite

Tutoriels populaires

Plus>

Tutoriels associés

Recommandations populaires

Derniers cours