モジュールの読み込みをテストする
UIZE Frameworkは、コアとなるJavaScriptファイル（Uize.js）と複数のモジュール（JavaScriptファイル）で構成されており、Webページ内で使いたいモジュールをその都度選んで指定します。
まず、scriptタグを使ってUize.jsファイルを読み込みます。今回はダウンロードした状態のまま使用しますので、jsフォルダ内にあるUize.jsファイルのパスを指定します。
<script type="text/javascript" src="js/Uize.js"></script>
続いてモジュールを読み込みます。ここではモジュールの動作を確認するために、「Sample.js」というテストモジュールを作成して読み込んでみましょう。Sample.jsはalert()を使ったシンプルなもので、Uize.jsと同じ階層（jsフォルダ内）に配置します。
●Sample.jsファイルの内容
alert('Sample.jsを読み込みました');
モジュールはUize.module()で読み込みます。引数にはrequiredプロパティを指定し、モジュールとして読み込むjsファイル名を指定します（拡張子は除く）。たとえば、Sample.jsファイルならrequiredに'Sample'と指定します。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>モジュール読み込みサンプル</title>
<script type="text/javascript" src="js/Uize.js"></script>
</head>
<body>
<script type="text/javascript"><!--
Uize.module({
required: 'Sample'
});
// --></script>
</body>
</html>
サンプル1を実行すると、以下のようなアラートダイアログが表示されます。
Sample.jsファイルが読み込まれアラートダイアログが表示される
サンプル1では1つのモジュールを読み込んでいますが、実際には、複数のモジュールを組み合わせて使う場合もあります。複数モジュールを読み込む場合は、requiredで指定する内容を配列形式にし、配列要素としてモジュール名を指定します。モジュール名はファイル名と対応していますから、どのファイルが読み込まれているか簡単に把握できます。
新たに、「SetBG.js」というモジュールファイルを作成し、先ほどのSample.jsと一緒に読み込んでみます。
●Sample.jsファイルの内容
alert('Set Background Color');
読み込みはSetBG.js、Sample.jsの順番です。サンプル1のscriptタグを以下のように変更して実行してみましょう。
Uize.module({
required: [ 'SetBG', 'Sample' ]
});
するとSetBGモジュールのとおり、「Set Background Color」というアラートダイアログが表示されます。これでうまくいきました……と言いたいところですが、一方のSampleモジュールの「Sample.jsを読み込みました」というアラートダイアログは表示されません。つまり、この状態ではSample.jsは読み込まれていません。
アラートダイアログは1回しか表示されない
原因はモジュールの書き方にあります。UIZE Frameworkで複数のモジュールを同時に使うためには、以下のようなルールに従ってモジュールを記述する必要があります。
Uize.module ({
name:'SetBG',
builder : function(){
alert('Set Background Color');
}
});
nameにはファイル名と同じ名前（拡張子は無し）を、builderには実行したいコードを関数として記述します。
UIZE Frameworkのルールに従ってSetBG.jsを修正し、複数のモジュールの読み込みに対応させたのがサンプル2です。おまけとしてalert()に加えて、モジュールの読み込み後に文字の背景色をオレンジ色に変更するようにSetBG.jsを改造しています。サンプル2を実行すると今度は2回、アラートダイアログが表示されます。
Uize.module ({
name:'SetBG',
builder : function(){
alert('Set Background Color');
document.getElementById("ascText").style.backgroundColor = "orange";
}
});
今度はアラートダイアログが2回表示される
