JavascriptのMVC開発について調べてみた〜BACKBONE.JS〜

JavascriptのMVC開発について調べてみた
∼BACKBONE.JS∼
未
発
表
13年5月26日日曜日

http://www.amazon.co.jp/Backbone-js%E3%82%AC
%E3%82%A4%E3%83%89%E3%83%96%E3%83%83%E3%82%AF-%E9%AB%98%E6%A9%8B-%E4%BE
%91%E4%B9%85/dp/4899773501

ボタン
2 回押したよ！

Controller
View Model
①画面のボタン押した
ボタン

Controller
View Model
②ボタン押されたに気づく
Viewは知らないかも
ボタン

Controller
View Model
③モデルを操作する
押した回数++
ボタン

Controller
View Model
押した回数++
④モデル変更に気づく
Modelは気づいてないかも
ボタン

Controller
View Model
押した回数++
④モデル変更に気づく
Modelは気づいてないかも
ボタン
ボタン

Controller
View Model
この３つ役割がはっきりしているから
どこに何が記述されているのか分かりやすいのです！

テスト駆動開発（TDD - Test Driven Development）とは
テスト駆動開発は，小さなステップを繰り返してプログラムの設計と開発を行っていくソフト
ウェア開発手法です。テスト駆動開発は次の3ステップから構成されています。
• ステップ1：これから書く機能に対するテストを1つ書き，テストが失敗することを確認する
（レッド）
• ステップ2：ステップ1のテストを通す最低限のコードを実装する（グリーン）
• ステップ3：リファクタリングを行う（リファクタリング）
リファクタリングを行ったあとは，再度ステップ1に戻り，次に作成する機能のテストを書いてテ
ストを失敗させ，コードを書き，またリファクタリングを行い……というサイクルを回していき
ます。
http://tddbc.doorkeeper.jp/events/3472

http://tddbc.doorkeeper.jp/events/3472

Modelのお仕事
データの管理と計算をする係です。
もくもくと自分の仕事をこなします。
描画など他の処理に関心がありません。
➡誰にも依存しません！
Model
Controller
View Model

Viewの仕事
ユーザとの窓口です。
ユーザ操作を受け付けます。
Modelデータを分かりやすい形で表示します。
Modelの事に関心があってデータ変更を感知する
事が出来ます。Modelに依存してます。
View
Controller
View Model

Controllerの仕事
仲介人です。
Viewの操作イベントを感知して
Modelを操るのがお仕事です。
Viewの事もModelの事も良く知っている反面
ViewとModelに依存してます。
Controller
Controller
View Model

// Backbone.Modelクラスをベースに拡張します。
var CountDataModel= Backbone.Model.extend({
// モデルが管理するデータの初期値
defaults: {
"count": 0 // :int 押した回数
},
// 押した回数取得
getCount: function (){
return this.get('count');
},
// 押した回数追加
countUp: function (){
var count= this.get('count');
count++;
this.set('count', count);
}
});
Model

Model // Backbone.Modelクラスをベースに拡張します。
defaults: {
},
},
count++;
}
});
Backbone.Model.extend({
Backbone.Modelをベースに
プロパティやメソッドを追加できます。
機能を拡張(extend)してModelを作ります。

defaults: {
},
},
count++;
}
});
defaults:
Modelが持つデータの初期値を書きます。
未設定の時に自動で値が設定されます。

defaults: {
},
},
count++;
}
});
Controller向けメソッドを準備
外部Controllerからの操作を受け付けます。

el:'#count_View',
},
render:function(){
},
events:{
},
}
});
Controller
View
Backbone.View.extend
Backbone.Viewをベースに
プロパティやメソッドを追加できます。
機能を拡張 (extend) して作ります

el:'#count_View',
},
render:function(){
},
events:{
},
}
});
el:‘セレクタ’
このViewが管理するHTMLのDOMを指定します。
<section id="count_View" class="drop-shadow lifted" >
<div>
<span class="countUpNo" >0</span>回押したよ！
</div>
<div>
<button>押して！</button>
</div>
</section>

el:'#count_View',
},
render:function(){
},
events:{
},
}
});
backboneの機能でインスタンス生成に呼ばれます。
listenTo(監視対象,‘イベント名’,動かすメソッド)
backboneの機能でModelの変更を監視してます。

},
render:function(){
this.$('.countUpNo').text( count );
},
events:{
},
}
});
<div>
</div>
Model変更時に起動する関数を書きます
主に描画処理になります。
this.$(‘セレクタ’)
Viewが管理している範囲で検索して高速です。
$(‘セレクタ’)=$el.find(‘セレクタ’)

el:'#count_View',
},
render:function(){
},
events:{
},
}
});
<div>
</div>
<div>
<button>押して！</button>
</div>
events:{’イベント名セレクタ名’:呼出メソッド}
View内部で発生するイベントを監視します。

el:'#count_View',
},
render:function(){
},
events:{
},
}
});
Modelを操作するメソッド
Modelを操作します。(Controllerの役割)

// DOMの読み込み完了時
// 最初に起動する処理( jQueryの機能 )
$(function(){
var model = new CountDataModel();
var view = new CountView({model:model});
});
ModelとView生成
画面が読込みの所でModelとViewを生成して完成です！

http://jsdo.it/itoKami1123/xMqT/

JavascriptのMVC開発について調べてみた〜BACKBONE.JS〜

Recommended

Recommended

More Related Content

More from Toshio Ehara

More from Toshio Ehara (20)