この記事のURL
Haxe + jQuery で外部 js ファイルを読み込むサンプル
HTML5 Canvas 用ゲーム制作などで JavaScript ファイル容量が大きくなってくると、任意のタイミングで js ファイルの読み込みを行いたい、という場合が出てきます。
今回の記事では Haxe + jQuery で 外部 js ファイルを読み込むサンプルを記述します。
ファイルディレクトリ構成
js ディレクトリ内 file1.js, file2.js, file3.js を外部読み込み対象とします。
├ index.html └ js/ ├ index.js --- Haxe から変換された外部 JavaScript ファイル読み込み処理用 js ファイル ├ file1.js --- 読み込み対象 js ファイル1 ├ file2.js --- 読み込み対象 js ファイル2 └ file3.js --- 読み込み対象 js ファイル3
読み込み対象 js ファイル
file1.js 内には、読み込みが完了した事を示すため以下の一行の記述を行っています。
console.log("file1 loaded");
file2.js, file3.js にもそれぞれ同様の記述を行っています。
index.html
index.html の内容は以下となります。
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script>
<script src="js/index.js"></script>
</head>
<body>
</body>
</html>
Haxe から変換された index.js ファイル利用の旨の他、jQuery ライブラリファイルの利用の旨の記述も行っています。
Haxe ソースコード(index.js)
Haxe の処理は以下となります。js/index.js としてコンパイルします。
package;
import js.Lib;
import haxe.Timer;
import jQuery.JQuery;
import jQuery.JqXHR;
class JavaScriptFilesLoadingSampleUsingJQuery
{
private static var JAVASCRIPT_FILE_NAME_SET = [
"file1",
"file2",
"file3"
];
private static inline var JAVASCRIPT_DIRECTORY = "js/";
private static inline var JAVASCRIPT_EXT = ".js";
private static inline var TIMER_INTERAVL = 100; //millisecond
private var mainFunction:Void->Void;
private var loaded:Bool;
private var timer:Timer;
private var fileIndex:Int;
public static function main(){
new JavaScriptFilesLoadingSampleUsingJQuery();
}
public function new(){
new JQuery(function(){ initialize(); });
}
private function initialize()
{
trace("start");
fileIndex = 0;
initializeToLoadJavascript();
timer = new Timer(TIMER_INTERAVL);
timer.run = run;
}
private function run(){
mainFunction();
}
private function initializeToLoadJavascript()
{
loaded = false;
var fileUri = JAVASCRIPT_DIRECTORY + JAVASCRIPT_FILE_NAME_SET[fileIndex] + JAVASCRIPT_EXT;
JQuery._static.getScript(fileUri, function(script:String, status:String, jqxhr:JqXHR){
loaded = true;
});
mainFunction = loadJavascript;
}
private function loadJavascript()
{
if(!loaded) return;
fileIndex++;
if(fileIndex < JAVASCRIPT_FILE_NAME_SET.length){
initializeToLoadJavascript();
}
else{
timer.stop();
trace("finish");
}
}
}
実行・出力結果
index.html を開いた後の ブラウザ console.log 出力結果は以下となります。
start file1 loaded file2 loaded file3 loaded finish
トラックバック
コメント
