MVC的な設計の話

gistfile1.md

MVC的な設計の話

こんなアプリ

• 四角い枠の中にボール
• フリックでこすると転がる
• ※ボールはtransform:translate()で移動する

http://jsfiddle.net/ginpei/y7hZf/

処理

• 初期処理
  1. 枠要素取得
  2. ボール要素取得
  3. ボール位置を初期化
  4. タッチ位置を初期化
• 枠でtouchmoveしたら
  1. ボールの位置を更新()
  2. ボール要素を移動
• ボールの位置を更新()
  1. タッチ位置を取得 (event.touches[0].pageX)
  2. スライド方向を取得 (最後のタッチ位置と比較)
  3. スライドした方向へ移動したボール位置を記憶
  4. タッチ位置を記憶

課題

• 全然再利用出来ないよね
• 処理がバラバラ
• I/Oが固定

改造

http://jsfiddle.net/ginpei/343ve/

• 再利用出来ない→オブジェクト化
  • extendして複製できる
  • 本当はprototypeに入れておくとなお良し
• 処理がバラバラ→オブジェクト化
  • thisで参照できる
  • 関係する処理と情報がひとまとめになった
• I/Oが固定→引数でもらう
  • 初期処理でアレコレする

また課題

• 管理範囲が広い
  • ユーザー操作、情報、表示
  • ので、見づらい
• 枠とボールが密結合
  • あの枠以外で、他の操作でボールを動かしたいとか

また改造

http://jsfiddle.net/ginpei/RPmbj/

• 管理範囲が広い→分割
  • 全体管理
  • 枠画面
  • ボール画面
  • ボール情報
• 枠とボールが密結合→分割
  • [枠]での操作を[ボール情報]へ保存
  • [ボール情報]での変更を[ボール画面]へ反映

＿人人人＿
＞ MVC ＜
￣Y^Y^Y￣