includeとかrequireとかいう別ファイルのソースを読み込む方法

調べて出てくるのが間違ってはないけど使えない情報が多い…

調べてよく出てくるのが
document.writeln()
を使って
"<script src='読み込むURL'></script>"
を出力する方法

書くときは </script> と書くとスクリプトタグが終了と判断されてエラーが出るので
<\/script> ってエスケープするか "</"+"script>" のように途中で分けて文字列結合する


他にも、
document.createElement()
で srcタグのエレメント作って
appendChild()
使って作ったエレメントを追加する方法がある

この2つはどっちも今のscriptタグが終わってから読み込まれるので基本的にincludeしたいって考える場合には使えない
[a.js]
include("b.js");
alert_test("aaaaaa");
 
[b.js]
function alert_test(str){
alert(str);
こういう場合、a.jsのalert_test関数を実行するときにincludeしてるb.jsが読み込まれていてalert_test関数が宣言されてる必要があるのに、上の方法でのincludeを使ってるとa.jsが終わってからb.jsが読みこまれるのでalert_testは宣言されてませんエラーが出る

そんなinclude関数の場所で読み込みを完了していてほしいっていうときのinclude方法

・XHRを使ってファイルを読み込みます
・evalで読み込んだファイルを実行します
これだけ

XHRはAjaxで非同期ってイメージだったけどopenメソッドの第三引数をfalseにすれば同期になるらしく使えた
一応XHRがないIE対応もしてるけど使わないからあまり自信がなかったり…
ついでにすでにincludeされてるファイルは二度読みしないようにもしてる
javascriptだと何度読んでも上書きされるだけで問題なさそうだけど一応…
もしかしたら二度読みもできるほうがいいのかなぁ

唯一の問題は、このinclude関数があるファイルを最初に読み込む必要があること
これは別にscriptタグを用意して書いておかないとダメ
あと、XHR使ってるので別ドメインのファイルをincludeできないことに注意です

includejs.js