MACH3

MACH3.laBlog

WEB屋の音速実験室

jQueryでPrototype.js風のクラス定義をしてみる

Prototype.jsを使っていた時によく愛用していたのが、Class.create()というメソッド。
クラス定義がオブジェクトリテラルで簡単に書けるようになる機能ですが、
今回はそれと似たようなjQueryプラグインを書いてみました。

Class.create on jQuery

jquery.class.js

mach3′s js-jquery-class at master – GitHub

※Prototype.jsをモデルにしていますが、実装を複製したものではありません。
ですので、本家とは細かい部分で実装が異なり、本家同様に動くわけではありません。

伝統的なPrototype.jsライクな使い方(Class.create)

基本的な定義の仕方は本家のそれに則っています。
cf) Prototype JavaScript framework: Defining classes and inheritance

クラス定義

var Human = Class.create();
Human.prototype = {
    name:null,
    age:null,
    initialize:function( name, age ){
        this.name = name;
        this.age = age;
    },
    introduce:function(){
        alert("私の名前は" + this.name + "、" + this.age + "歳です");
    }
};
var mach3 = new Human("まっは", 3);
mach3.introduce();

Class.create()が渡されたオブジェクトは、
インスタンス生成時にinitializeメソッドを実行するようになります。
勿論、引数も渡せます。

継承

var Animal = Class.create();
Animal.prototype = {
    walk:function(){
        alert("てくてく");
    },
    eat:function(){
        alert("もぐもぐ");
    }
};
var Dog = Class.create( Animal );
Dog.prototype = {
    bark:function(){
        alert("ワンワン");
    }
};

Class.create()の引数にクラスオブジェクトを渡す事で、
それを親とする派生クラスを定義する事が出来ます。

よりコンパクトな使い方(Class.get)

こちらの書き方は、本家の物とは違うのでご注意を。
引数だけで完結できるClass.get()とやらを実装してみました。

クラス定義

var Human = Class.get({
    name:null,
    age:null,
    initialize:function( name, age ){
        this.name = name;
        this.age = age;
    },
    introduce:function(){
        alert("私の名前は" + this.name + "、" + this.age + "歳です");
    }
});

prototypeを定義しなくて良い分、少しだけコンパクトに。

継承

var Dog = Class.get({
    bark:function(){
        alert("ワンワン");
    }
}, Animal );

第二引数にクラスオブジェクトを渡せば継承が出来ます。

イベント管理(bind/trigger)

イベントの管理にはjQueryのbind/triggerを利用します。
生成されたクラスインスタンスにはbind/triggerメソッドを備えてありますので、
$(this)等して別途用意しなくても呼び出す事が出来ます。

var Data = Class.get({
    ITEM_ADDED:"item_added", //イベント名の定義
    items:[],
    addItem:function( item ){
        this.items.push( item );
        this.trigger( this.ITEM_ADDED ); //イベント着火
    },
    getItemCount:function(){
        return this.items.length;
    }
});

var myData = new Data();
// bindでイベントリスナーの追加
myData.bind( myData.ITEM_ADDED, function(e){
    alert("ItemsCount : " + this.getItemCount() );
});
myData.addItem( "hoge" );

おまけ機能(Firebug連携)

bind/triggerのついでですが、
Firebugのコンソールに出力するconsole.log()のラッパーも
log()として実装してみました。

var MyClass = Class.get({
    initialize:function(){
        this.log("Initialized !"); //Firebugのコンソールに出力
    }
});


自分用に作ったので当たり前ですが、個人的には大変使いやすいです。
色々ヒントをいただいたginpei_jp氏、nicericeさん、
この場を借りて、どうもありがとう!

Share |

コメントを投稿する

入力されたメールアドレスは公開されません。


*

「東北地方太平洋沖地震」義援金支援(Yahoo!基金)