Más contenido relacionado
La actualidad más candente (20)
Similar a 5分でわかる?Backbone.js ことはじめ (20)
Más de Kohei Kadowaki (17)
5分でわかる?Backbone.js ことはじめ
- 2. 自己紹介
• 名前:門脇 恒平 @kadoppe
• 職業:ソフトウェアエンジニア
Webアプリケーション / iOSアプリケーション /
Backbone.js
• 所属:
ShareWis Inc. CTO / HTML5-West.jpコアメンバ
2
- 4. Backbone.js のメリット
• 役割ごとにソースコードを分割・整理できる
• Model, View, Collectionそれぞれのコードを独立して
開発しやすくなる
• 特に大規模JavaScriptプロジェクトで有用
Model View Collection
4
- 5. Model
の役割 (1)データ管理
• データ管理
• アプリケーションに必要なあらゆるデータを管理
• 例)Person Modelの firstName プロパティ に Taro
を値として設定
• イベント管理
• プロパティの変化などのイベントを他のオブジェクトに
伝える
5
- 6. Model
の役割
(2)ビジネスロジックの実装
• ビジネスロジック
• データの変換、結合、バリデーションなどを実現す
るメソッド
• 例)firstName と lastNameをくっつけて返す
fullName というメソッドを実装
6
- 8. View
の役割 (1)DOMツリーの管理
body div ul li
li
li
div form input
View: input
8
- 9. View
の役割 (1)DOMツリーの管理
body div ul li
li
li
div form input
View: input
8
- 10. View
の役割 (1)DOMツリーの管理
body div ul li
li
li
div form input
View: input
8
- 11. View
の役割 (1)DOMツリーの管理
body div ul li
li
li
div form input
View: input
8
- 12. View
の役割 (1)DOMツリーの管理
body div ul li
li
jQueryなどを使って
DOM操作・イベント監視 li
div form input
View: input
8
- 13. View
の役割
(2)Model・Collectionの管理
• Model・Collectionの操作
• Modelのプロパティ値変更
• CollectionへのModel追加・削除
• イベント監視
• ModelやCollectionが発生させるイベントの監視
9
- 14. View
の役割 (3)中継
• DOMツリーとModel・Collectionの橋渡し
:イベント :操作
Model
View
Collecti
on
10
- 15. まとめ
• Backbone.js
• Model,
View, Collectionを提供してくれるフレー
ムワーク
• 大規模JavaScriptプロジェクトでも各部分を独立し
て開発しやくすなる
• 紹介していない他の機能はまた別の機会に
• Router, RESTful JSONインタフェースなど
11
- 16. 学習に役立つページ
• Backbone.js 公式ドキュメント
• http://backbonejs.org/
• Backbone.js Advent Calendar 2011
• 特に「Backbone.js入門」シリーズ
• http://qiita.com/advent-calendar/2011/backbone
• これまでの「MVC」とBackbone.jsの関係について少し理解した。
• http://kadoppe.com/archives/2012/04/relation-between-
traditional-mvc-and-backbonejs.html
12