数冊JavaScript本を読んだところ、クラス（もどき）の記述方法が数パターンあるみたいなのでまとめておく。
サンプルとしては前回同様オライリーの「JavaScriptグラフィックス」で用いられているスプライト描画を使わせていただきました。
パターンその１：
関数を用いる方法。「JavaScriptグラフィックス」で推奨されている方法である。
myClass=function(引数){
that={
xxx.....
};
return that;
}
var インスタンス=myClass(引数）
http://www.oreilly.co.jp/pub/9784873115283/ch02/ex0201.html
パターン１のソースについてはオライリーの書籍と上記URLを参照いただきたい。
パターンその２：
「教科書的」と言われている方法。
クラス風にインスタンスを生成する。
var インスタンス=new MyClass( 引数 )
それではパターン１の関数を用いる方式から。
サンプルの流れは以下の通り
１．htmlでid指定されているエリア
<div id="draw-target"></div>
を取得し、背景画像にcssで幅・高さ・該当画像（スプライトシート：（いくつかの画像が固定ピクセル毎に行と列で描かれているもの）を指定する
var DHTMLSprite=function(params){
var width=params.width;
var height=params.height;
var imagesWidth=params.imagesWidth;
//html記載 id:draw-targetにdivを追加。
//そのdiv(即ち今追加したdiv)を$element変数に格納する
var $element= params.$drawTarget.append('<div/>').find(':last');
$element.css({
position:'absolute',
width:width ,
height:height,
backgroundImage:'url('+params.images+ ')'
});
var elemStyle=$element[0].style;//$elementのスタイルシートを格納。
２．スプライトシート中の何番目の画像を使うか指定するメソッドを作る
changeImage:function(index){
index*=width;
var vOffset=-mathFloor(index/imagesWidth)*height;//y座標
var hOffset=-index%imagesWidth; //x座標
elemStyle.backgroundPosition=hOffset+'px' + ' '+ vOffset +'px';
} ,
３．描画の際の座標を指定するメソッドを作る
darw:function(x , y){
elemStyle.left=x+'px';
elemStyle.top=y+'px';
},
生成は以下のとおり関数の受けで行う。
var sprite1=DHTMLSprite(params); var sprite2=DHTMLSprite(params);
サンプルではスプライトシート１つめ(指定していない場合デフォルト１つめ）の歯車の画像が座標x=64 y=64に、５つめのグラデーション画像がx=352 y=192に、それぞれ描画されている。
sprite2.changeImage(5); sprite1.draw(64 , 64); sprite2.draw(352 , 192);
一方、パターン２の教科書的方法は少々ややこしい。DHTMLSpriteクラスを作ってみた。全文記載。
function DHTMLSprite(params){
this.width=params.width;
this.height=params.height;
this.imagesWidth=params.imagesWidth;
this.$element=params.$drawTarget.append("<div/>").find(":last");
this.$element.css(
{
position:"absolute" ,
width:this.width ,
height:this.height,
backgroundImage:"url("+ params.images + ")"
}
)
this.elemStyle=this.$element[0].style;
//要素を引数にしたjQueryオブジェクトは
//DOM要素が配列で格納されている状態なので
//$('#xxxx')[0]でDOM要素の参照となる。
this.mathFloor=Math.floor;
//高速化のためMath.floorのローカル参照を持つ
}
DHTMLSprite.prototype.draw=function(x , y){
with(this){
elemStyle.left=x+"px";
elemStyle.top=y+"px";
}
}
DHTMLSprite.prototype.changeImage=function(index){
with(this){
index*=width;
var vOffset=-mathFloor(index/imagesWidth)*height ;
//y座標
var hOffset=-index%imagesWidth ;
//x座標
elemStyle.backgroundPosition
=hOffset+'px' + " "+vOffset+'px';
}
}
DHTMLSprite.prototype.show=function(){
with(this){
elemStyle.display="block";
}
}
DHTMLSprite.prototype.hide=function(){
with(this){
elemStyle.display="none"
}
}
DHTMLSprite.prototype.destroy=function(){
with(this){
$element.remove();
}
}
生成は
var sprite1=new DHTMLSprite(params); var sprite2=new DHTMLSprite(params);
で行う。描画の指定方法は変わらない。
thisが多いためやや汚く見えるが、生成がActionScript風なのでこちらの方が好みではある。次回は継承についてまとめる。
