hifiveのクラスモジュール紹介(その1)「基本的な定義方法」
JavaScript(ECMAScript5)ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。
JavaScriptではprototypeやdefinePropertyなどを使ってクラス(的なもの)を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。
今回はまず基本的な構造を紹介します。次のように書きます。重要なのは h5.cls.RootClass.extend
になります。そして、 _super (親クラス)を引数として、オブジェクトを返却します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var SampleClass = h5.cls.RootClass.extend(function (super_) { | |
return { | |
// クラス名(完全修飾名) | |
name: 'SampleClass', | |
// クラスのフィールド定義 | |
field: { | |
}, | |
// クラスのプロパティ(アクセサ)定義 | |
accessor: { | |
}, | |
// クラスのメソッド定義 | |
method: { | |
constructor: function (initialValue) { | |
}, | |
} | |
}; | |
}); |
オブジェクトには基本的なキーとして name/field/accessor/method があります。それぞれクラス名、フィールド名、プロパティ、メソッドの4つになります。
フィールドの利用
例えばフィールドは次のようになります。_ではじめるのがルールです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
field: { | |
_count: null | |
}, |
プロパティの利用
プロパティは次のようになります。こちらは_を使いません。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
accessor: { | |
scale: null | |
}, |
メソッドの利用
メソッドは初期で読み込まれるconstructor以外は自由に定義できます。クラスのインスタンスを作成する際に値を送ることもできます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
method: { | |
constructor: function (initialValue) { | |
// 親クラスのコンストラクタ呼び出し | |
super_.constructor.call(this); | |
// 初期値を設定(インスタンス生成時に指定) | |
this._count = initialValue; | |
// 初期値を設定(直接指定) | |
this.scale = 1; | |
}, | |
increment: function () { | |
++this._count; | |
return; | |
}, | |
getValue: function () { | |
return this._count * this.scale; | |
} | |
} |
インスタンス生成
そしてクラスのcreateメソッドを使ってインスタンスを生成します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var sample = SampleClass.create(1); |
後はこのインスタンスを使って自由にメソッドを呼び出せます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sample.getValue(); |
外部に公開する
最後に外部(グローバル)に公開する場合です。これは h5.u.obj.expose
を使います。例えば以下の例では hoge.fuga.SampleClass
でアクセスできます。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
h5.u.obj.expose('hoge.fuga', { | |
SampleClass: SampleClass | |
}); |
クラスを使ったサンプルをJSFiddleにアップしてあります。ごく基本的な機能だけですが、実装時の参考にしてください。
これから何回かに分けてクラスの使い方を紹介します。JavaやC#相当まではいきませんが、クラスを使うことでより生産性の高いコードが書けるようになるはずです。
コメントは受け付けていません。