scriptをインポートしないjsファイルのいくつかの方法

方法一:オーサイン

　adc.jsの内容は以下の通りです：

var hello = "H"9";

html.html

<script>
      var s = document.createElement("script");
      s.src = "abc.js";
      document.head.appendChild(s);
      s.addEventListener("load",function(){
        // sのloadイベントが読み込み完了した後に待機し、読み込みが完了していない状態で呼び出しを行うとエラーが発生するのを防ぎます
        console.log(hello);
      }
      setTimeout(function(){//またはタイマーを使用して読み込みが完了した後に呼び出す（安全ではありません、イベントリスナーのほうが良い）
        console.log(hello);
      },1000);
     // $.getScript("abc.js");
  </script>

方法二：jquery.js

$.getScript("abc.js",function(){ alert("ほっほほほ"); console.log(hello); });

<script type="text/javascript" src="../jquery.js"></script> 
<script type="text/javascript"> 
$(function()
{
$('#loadButton').click(function(){
$.getScript('new.js',function(){
newFun('"Checking new script"');//この関数は new.js 内にあります。click が実行されたときにこの関数が実行されます
});
});
});
</script> 
</head> 
<body> 
<button type="button" id="loadButton">Load</button>

方法3：require.js

require.js シェア2.1.1バージョン、大規模プロジェクトに対応していますが、通常は jQuery を使用します。

index.html

<script data-main="main" src="require.js"></script>

main.js

console.log("こんにちは世界");
require(["js1","js2","js3"],function () {
  // 非同期読み込みインポートです。js 接尾辞は省略できます
  console.log("皆さん、読み込み完了ですか？");
  var total = num1+num2+num3;
  console.log(total);
  hello1();
  hello2();
  hello3();
}

使用 requireJs で js ファイルを簡単にインポートできますが、js ファイル内の変数名、メソッド名の衝突問題に注意してください。原因：ブラウザの js ファイルはグローバルスコープを共有しており、スコープ内の変数名、メソッド名が上書きされる可能性があります。

基礎教程