2014/04/17

JavaScriptでClass的なものを定義する

/**
 * 唯一のGlobalオブジェクトとして作る。
 * アプリケーションのプログラムは全部MyAppの下にぶら下げる。
 */
MyApp = {
   version : '1.0.0'
};
/**
 * パッケージ
 */
MyApp.graph = {};

/**
 * 点を現すクラス。
 */
MyApp.graph.Point2D = function(x_, y_) {
   this.x = x_;
   this.y = y_;
};
MyApp.graph.Point2D.prototype = {
   getX : function() {
      return this.x;
   },
   getY : function(){
      return this.y;
   }
};

/**
 * 四角形を左上の点と右下の点で現すクラス。
 */
MyApp.graph.Dimention = function(topLeft_, bottomRight_) {
   this.topLeft = topLeft_;
   this.bottomRight = bottomRight_;   
};
MyApp.graph.Dimention.prototype = {
   getAreasquare : function() {
      var self = this;
      var width = Math.abs(self.topLeft.getX() - self.bottomRight.getX());
      var height = Math.abs(self.topLeft.getY() - self.bottomRight.getY());
      return width * height;
   }
};
/**
 * 一応のメイン関数
 */
MyApp.main = function(){
   var p1 = new MyApp.graph.Point2D(1,1);
   var p2 = new MyApp.graph.Point2D(10,20);
   var d1 = new MyApp.graph.Dimention(p1, p2);

   var areas = d1.getAreasquare();
   alert(areas);
};

// テスト実行
MyApp.main();

必要なものは全てサンプルコードの中に

スクリプト言語で本格的なクラスや設計が必要になるっていう状況はその時点で何か間違っているのかもしれない。
しかし、クライアントサイドのJavaScriptが動作と処理のほとんどを占めるというWebアプリケーションを作ったことがあるのでメモ。
ブラウザ上のユーザインターフェースはJQueryなどのライブラリを使い、クラス設計や内部処理はPureJavaScriptでやるという方法で十分作れるということが分かった。
クラス変数はコンストラクタとなるfunctionの処理でthis変数に定義、そして関数はprototypeに定義するのがポイント。
JavaScriptは関数言語なので正確にはクラスではないのだがクラスと同等なものを実現できるので良しとする。
あとクラスを継承したいときは面倒なのでライブラリのextends関数を使った(大抵のJavaScriptライブラリに用意されていると思う)。でも少し調べればライブラリを使わないでも実装できるはず。
ソースをファイル分割したりpackage管理したりというのは人力でフォルダ管理するしかないか。

0 件のコメント:

コメントを投稿