Yahoo! UI Library3（YUI3）の標準オブジェクト

Yahoo! UI Library Ver.3 を使ってみよう（3）

YUIの基本モジュール

　すべてのモジュールの基礎となるものが、モジュールyuiのクラスYUIにまとめられています。

　YUI3の最初の設定部分であるYUI()に続くメソッドのYUI().use()や、イベント処理の、on()などがあります。use()やon()は以前でてきたので、今回は、新たにモジュールを追加したいときにに使用するaddメソッド、関数をキャッシュするcachedメソッドについて説明したいと思います。

モジュールを追加したいときに使用するaddメソッド

　自作のモジュールを新たに追加したいときは、addメソッドを使用します。addメソッドについて見ていきましょう。以下構文です。

［構文］クラスYUIのaddメソッド

YUI().add ( name , fn , version , details )
  name:作成するモジュール名
  fn:モジュールの内容(function)
  version:バージョン番号
  details:読み込みたい既存のモジュール名

　YUI.use()を使用する前に追加します。addメソッドのみのjsファイルを作成し、YUI().use()のオプションで設定して読み込むこともできます。

　リスト1は、新しくadd_testモジュールを作成してjsファイルを作成し、YUI().use()で利用する例題です。

［リスト1］モジュールの追加（add_test.js と add.html）

//モジュール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を使用する場合、使用する関数をメモリーに読み込んでおくと、毎回読み込まずに、処理をスムーズに進めることができます。以下構文です。

［構文］クラスYUIのcachedメソッド

Y.cached(f)
  f:関数

　chachedの書き方はリスト2をみてください。

［リスト2］chachedの書き方（cached.html）

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はキャッシュメモリー上で動作しています。