YUIの基本モジュール
すべてのモジュールの基礎となるものが、モジュールyuiのクラスYUIにまとめられています。
YUI3の最初の設定部分であるYUI()に続くメソッドのYUI().use()や、イベント処理の、on()などがあります。use()やon()は以前でてきたので、今回は、新たにモジュールを追加したいときにに使用するaddメソッド、関数をキャッシュするcachedメソッドについて説明したいと思います。
モジュールを追加したいときに使用するaddメソッド
自作のモジュールを新たに追加したいときは、addメソッドを使用します。addメソッドについて見ていきましょう。以下構文です。
YUI().add ( name , fn , version , details ) name:作成するモジュール名 fn:モジュールの内容(function) version:バージョン番号 details:読み込みたい既存のモジュール名
YUI.use()を使用する前に追加します。addメソッドのみのjsファイルを作成し、YUI().use()のオプションで設定して読み込むこともできます。
リスト1は、新しくadd_testモジュールを作成してjsファイルを作成し、YUI().use()で利用する例題です。
//モジュールadd_textのjsファイル YUI().add('add_test',function(Y){ //.add Y.demo="モジュール「add_test」";//(1) Y.comment =function(){ //(2) alert("モジュール「add_test」のファンクション"); } },"1.00", {requires: ['node']}); //バージョン、既存モジュール指定 //モジュールadd_textを使うための指定 YUI({ modules: { //書き方は、configクラスの所で説明 'add_test': { fullpath: './add_test.js', requires: ['node'] } } }).use('add_test', function(Y) { //作成モジュールを指定 var button1 = Y.one('#button'); button1.on('click', function(e) { alert(Y.demo); //(3) Y.comment(); //(4) }); });
リストの上の段が、追加したいモジュールのリストです。(1)(2)は新しく変数と関数を定義しています。JavaScriptは、オブジェクト指向言語なので、オブジェクトに任意のプロパティ/メソッド(変数や関数)を追加することができます。オブジェクトYに変数名(プロパティ)「demo」と関数(メソッド)「comment」を追加しています。オブジェクトYを受け取った下の段のリストでは、(3)(4)のような使い方ができます。
モジュールadd_testでモジュールnodeを参照しているので、YUI().use()でのモジュール宣言はadd_testのみで構いません。
関数をキャッシュするcachedメソッド
cachedメソッドは、関数をキャッシュするメソッドです。再読込みをよく行うページの作成にYUI3を使用する場合、使用する関数をメモリーに読み込んでおくと、毎回読み込まずに、処理をスムーズに進めることができます。以下構文です。
Y.cached(f) f:関数
chachedの書き方はリスト2をみてください。
YUI().use('node', function(Y) { var button1 = Y.one('#button'); var r1 = ""; var f1 = function(a) { //(1) r1 += a; }; var c1 = Y.cached(f1); //(2) button1.on('click', function(e) { c1('a'); //'a' alert(r1); c1('b'); //'ab' alert(r1); c1('c'); //'abc' alert(r1); }); });
(2)で(1)の関数をc1の名前でメモリーに読み込みます。ボタンを押したとき、c1はキャッシュメモリー上で動作しています。