05.ロジック
概要
hifiveでは、「ロジック」は
- 複雑な計算
- サーバとの通信
- ローカルDB操作
などの純粋な（画面操作を含まない）通信・計算処理のみを記述するものと定めています。
「処理」だけをまとめることによって、可読性・保守性・再利用性・テスト容易性が向上します。
また、次のステップで紹介する非同期処理機構を用いることで、
ロジックの内部実装の変更がコントローラに影響しないようにすることができます。
ロジックの定義
ロジックは以下のように定義します。
1. ロジックを定義する
__name: 'DateLogic',
dateFormat: '{0}年{1}月{2}日',
getCurrent: function(time) {
var year = time.getYear();
var month = time.getMonth() + 1;
var date = time.getDate();
return this._format(year, month, date);
},
_format: function(year, month, date) {
return h5.u.str.format(this.dateFormat, year, month, date);
}
};
__name
- ロジック名を指定します。コントローラと同様必須プロパティであり、記述がない場合エラーが発生します。
publicMethod
- パブリックメソッドは_以外の文字で始まるようにします。
privateMethod
- プライベートメソッドは_で始まるようにします。
2. コントローラでロジックを宣言する
__name: 'DateController',
dateLogic: dateLogic,
__ready: function(context) {
var current = this.dateLogic.getCurrent(new Date());
alert(current);
}
};
- このコントローラで使用するロジックを宣言します。サフィックスを必ずLogicにする必要があります。
- 指定されたロジックはフレームワークによって自動的に"ロジック化"され、hifiveのロジックオブジェクトになります。
実装例
1. HTMLを用意します。
<html>
<head>
<meta charset="UTF-8">
<script src="jquery.js"></script>
<script src="jquery.blockUI.js"></script>
<script src="ejs-1.0.h5mod.js"></script>
<script src="h5.js"></script>
<!-- ここで作成したjsファイルを読み込む -->
<script src="step6.js"></script>
<title>hifive Step6</title>
</head>
<body>
<div id="container">
<input type="text" id="left" value="" /> +
<input type="text" id="right" value="" />
<input type="button" id="calc" value="=" />
<span id="result"> </span>
</div>
</body>
</html>
2. step6.jsというファイルを作成します。
// ロジックを定義
calcLogic = {
__name: 'CalcLogic',
add: function(left, right) {
return left + right;
}
};
// コントローラの元となるオブジェクトを作成
var controller = {
// コントローラ名
__name: 'CalcController',
// ロジックの宣言
calcLogic: calcLogic,
'#calc click': function() {
// 左辺の値を取得
var left = this.$find('#left').val();
// StringからNumberへ変換。変換に失敗したら終了
left = parseInt(left);
if (isNaN(left)) {
return;
}
// 右辺の値を取得
var right = this.$find('#right').val();
// StringからNumberへ変換。変換に失敗したら終了
right = parseInt(right);
if (isNaN(right)) {
return;
}
// CalcLogicのaddメソッドを呼び出す
var ret = this.calcLogic.add(left, right);
// 結果を画面に出力
this.$find('#result').html(ret);
}
};
// id="container"である要素にコントローラをバインド
h5.core.controller('#container', controller);
});
3. HTMLをブラウザで表示させます。
4. 左辺、右辺に数値を入力し=ボタンをクリックします。
動作確認
ロジック化されることによって追加されるメンバ、メソッド
ロジック化されると以下のメソッドが追加されます。
deferred
deferred()
Deferredオブジェクトを返します。
Deferredを使った実装例は次のステップで説明します。
よくある質問
どうしてロジックで画面操作をしてはいけないの？
ロジックで行うような処理、すなわち通信・計算処理と画面更新処理を混ぜてしまうと、
ビュー（タグ）の構造を変えたい、スタイルを少し変えたいといったときにJavaScriptコードまで
読み解いて手を入れなければならなくなります。
逆に、処理が変わった時に画面操作が混ざってしまっているため、保守性が低下してしまいます。
さらに、jQuery等で複雑なタグ構造を生成すると最終的にタグがどうなるかが
非常にわかりにくくなってしまい、これもメンテナンス性を落とす原因となります。
そのため、
- 最初に書くときにはほんの少し手間はかかるかもしれませんが
- 仕様上はロジック内でビューを操作することもできてしまいますが
指針に従って処理を分離しておくことを強くお勧めしています。
また、ビュー操作を楽にするために、テンプレートエンジンなども提供しています。
ロジックを画面操作から独立させておくことは、通信など非同期処理を行う場合に真価を発揮します。
次は、その非同期処理の扱い方について説明します。
次のステップ ⇒ チュートリアル06.非同期処理
参照
ロジック化されることで追加されるメンバ、メソッドはAPIドキュメントをご覧ください。
追加されるプロパティ名と同名のプロパティをロジック定義オブジェクトが持っている場合、それらは上書きされます。