pirosikick's diary

君のハートにunshift

YUIではY.Baseが重要だと思ったのです。

なので調べるのです。今日もYUI(Yahoo User Library)ネタです。

Y.Baseとは

Base - YUI Library

baseモジュールで定義されているBaseクラスのことです。これ自体でインスタンスを生成することも可能ですが、他のY.AttributeやY.EventTargetベースとしたクラスのルートとして利用されるようにデザインされています。Y.Attributeベースのオブジェクトのテンプレ生成や、intializer chain/destructor chainを提供します。

Y.Baseの継承

Y.Baseを継承したクラスを定義するには下記のようにFunctionを定義して、Y.extendでprototypeをコピーする

// base module
YUI().use("base", function (Y) {

    function MyClass() {
        // Y.Baseのコンストラクタ関数を実行
        MyClass.superclass.constructor.apply(this, arguments);
    }

    // 継承
    Y.extend(MyClass, Y.Base, {
        // MyClass.prototypeに定義する関数やプロパテを記述
        hogehoge: function () {}
    });

    var obj = new MyClass();
    obj.hogehoge();

});

static proparty

NAME

クラスを認識するための名前。イベントのプリフィックスに使われる。

// base module
YUI().use("base", function (Y) {

    function MyClass() {
        MyClass.superclass.constructor.apply(this, arguments);
    }

    MyClass.NAME = "myClass";

    Y.extend(MyClass, Y.Base, {
        // "sample"イベントを発火するメソッドを定義
        fireSample: function () {
            this.fire("sample");
        }
    });

    // create MyClass instance
    var obj = new MyClass();

    function onSample () {
        alert("hogehoge");
    }

    // イベント設定
    // 下記2つは同じ
    obj.on("myClass:sample", onSample);
    obj.on("sample", onSample);

    // 2回アラートが出るはず!
    obj.fireSample();
ATTRS

クラスの属性(attribute)を定義するためのプロパティ。属性を定義するとset, getでアクセス可能になるし、readonlyや値の変更時にeventを設定したり等ができます。詳しくはこちら

YUI().use("base", function (Y) {

    function MyClass() {
        MyClass.superclass.constructor.apply(this, arguments);
    }

    MyClass.ATTRS = {
        a: {
            value: 3 // デフォルト値
        },

        b: {
            setter: function () { alert("set b"); },  // set時に呼び出される
            getter: function () { alert("get b"); }   // get時に呼び出される
        }
    };

    Y.extend(MyClass, Y.Base);

    var obj = new MyClass();

    alert( obj.get("a") ); // 3
    alert( obj.get("b") ); // get b
    alert( obj.set("b") )l // set b
});

コンストラクタとデストラクタ

initializerとdestructorをprototypeに定義すればnewしたときとdestroyを呼び出した時に実行されます。

YUI().use("base", function (Y) {

    function MyClass() {
        MyClass.superclass.constructor.apply(this, arguments);
    }

    Y.extend(MyClass, Y.Base, {
        // コンストラクタ
        initializer: function (cfg) {
             alert(cfg.a);
        },

        // デストラクタ
        destructor: function ()
        {
              alert("destroy");
        }
    });

    var obj = new MyClass({a:"hogehoge"});  // "hogehoge"
    obj.destroy(); // "destroy"

});

その他

PluginやらExtensionやらあったけど、眠くなったので寝ますw
また書きます。