Javascript ファイルの動的読み込みについて_JavaScript スキル-jsチュートリアル-php.cn

Javascript ファイルの動的読み込みについて_JavaScript スキル

WBOY

リリース： 2016-05-16 15:17:00

オリジナル

1110 人が閲覧しました

JavaScript ファイルの動的読み込みは、インターネット経由でアップロードする一般的な方法など、常に面倒な作業でした。

function loadjs(fileurl){
 var sct = document.createElement("script");
 sct.src = fileurl;
 document.head.appendChild(sct);
}

ログイン後にコピー

次に、結果をテストしてみましょう:

<html>
  <head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    function loadjs(fileurl){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     document.head.appendChild(sct);
    }
    loadjs("http://code.jquery.com/jquery-1.12.0.js");
    loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js")
    
    loadjs("http://bootboxjs.com/bootbox.js")
    </script>
  </body>
</html>

ログイン後にコピー

コードがロードされると、次のエラーが表示されます:

jquery は最初の処理でロードされるのは明らかですが、それでも jQuery が存在しないと報告されるのはなぜですか?

このようなロードは 3 つのスレッドを開くことに相当しますが、jquery ファイルが最初にスレッドを開始し、jquery がこのスレッドの実行を完了するまでにかかる時間が次の 2 回を超えるため、その後 jquery が見つからない可能性があります。このオブジェクトは後で実行されます。

この方法に対処するには?

実際には、ファイルの読み込みは状態で処理されます。これは、ファイルが読み込まれたかどうかを監視できるイベントです。

したがって、このメソッドを使用して、必要な結果を直感的に処理できると考えられます。改善されたコードは次のとおりです。

 <html>
  <head>
   <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" media="screen" />
  </head>
  <body>
    <script>
    
    function loadjs(fileurl, fn){      
     var sct = document.createElement("script");
     sct.src = fileurl;
     if(fn){
      sct.onload = fn;
     }
     document.head.appendChild(sct);
    }


    loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
     loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
        loadjs("http://bootboxjs.com/bootbox.js")
     })
    });
      
    
    </script>
  </body>
</html>

ログイン後にコピー

OK、このコードを実行すると、前のファイルがロードされるまでロードされたファイルはロードされないため、使用されているオブジェクトは見つかりません。

次に、ポップアップボックスの効果を実行します。コードでは Bootbox.js プラグインが使用されます。

loadjs("http://code.jquery.com/jquery-1.12.0.js",function(){
  loadjs("http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js",function(){
       loadjs("http://bootboxjs.com/bootbox.js",function(){
          bootbox.alert("Hello world!", function() {
           Example.show("Hello world callback");
          });
       })
   })
 });

ログイン後にコピー

ページを更新すると、ポップアップボックスが直接表示されます:

動的にロードされるコードは、多くの場合、ここでのデバッグに多くの時間を費やすのが簡単です。最も簡単な例を作成してその理由を理解することです。ここでのコードはカプセル化することができ、CSS ファイルをロードすることもできます。独自のプラグインとして使用します。