0

importjs() タイプの関数 (例については以下を参照) を使用する場合、jQuery はそれに続くコードの前にロードされていないようです。

サンプルの html ファイルを次に示します。

<html>
  <head></head>
  <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      function importjs(jsFile) {
        var body = document.getElementsByTagName('head').item(0);
        var scpt = document.createElement('script');
        scpt.src = jsFile;
        scpt.type = 'text/javascript';
        body.appendChild(scpt);
      }
      var f1="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
      //importjs(f1);
      var $j=jQuery;
      alert("hello stackoverflow!");
    </script>
  </body>
</html>

上記のコードでは、アラートが正常に発生するはずです。

次に、最初のスクリプト ブロック、つまり jQuery を明示的にロードするスクリプト ブロックをコメント アウトし、2 番目のスクリプト ブロックの importjs(f1) 行のコメントを外します。今回は、少なくとも firefox と safari ではアラートは発生しません。

ここで、「var $j=jQuery」行の前に追加のアラートを挿入します。私にとっては、待ち時間に関係なく、両方のブラウザーで機能します。setTimeout もおそらくうまくいくでしょうが、このようなプログラムを作成する理想的な方法でもありません。

javascript がシングルスレッドの場合、importjs が失敗するのはなぜですか? importjs によって作成された新しい要素が最初のブロックが終了するまで「実行」されないためですか、それとも新しい要素が作成されるとすぐに実行されるべきですか?

4

1 に答える 1

7

ここにはいくつかの問題があります。

  • jQueryが複製されています.1つはhtmlに、もう1つはjsにあります

  • この方法でスクリプトをロードすると、動的に追加された JavaScript はすぐには使用できなくなります。依存コードはコールバック関数にある必要があります。

    function importjs(jsFile, callback) {
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.src = jsFile;
    script.type = 'text/javascript';
    script.onload = script.onreadystatechange = function() {
      // execute callback
      if (callback) callback();
      // prevent memory leak in IE
      script.onload = null;
      head.removeChild(script);
    };
    head.appendChild(script);
}

    次に、次のように使用する必要があります。

    importjs("jquery.js", function(){
    // all jQuery dependant code
    // goes here...
});​

アップデート

次のことを可能にする JavaScript ファイルを含めるためのより堅牢なソリューションがあります。

  • 関連する複数のファイルを含める
  • それらが順番に実行されるようにする
  • ブロックしない方法でそれらをロードします（他のリソースと並行して）

私はまだこのスクリプトに取り組んでいますが、現在はほとんど機能しています。必ずチェックしてください。

さまざまな手法の利点を組み合わせて、ページの読み込み時間を大幅に短縮します。関連記事: Loading Scripts Without Blocking

構文は次のとおりです。

include(['jquery.js','jquery-ui.js'], myjQueryCode); // executed in order
于 2010-07-07T21:52:28.727 に答える