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
また書きます。