YUIではY.Baseが重要だと思ったのです。
なので調べるのです。今日もYUI(Yahoo User Library)ネタです。
Y.Baseとは
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
また書きます。