6. SPAs and RESTful
It’s difficult to build Single Page Applications that
by simply using jQuery or MooTools. They don’t
have formal structure.
The browser is no longer the only client, we now
have mobile devices, tablet devices, Google
Goggles and electronic fridges etc.
Single-page web apps are the future. Backbone.js
is essentially MVC for the client and allows you
to make your code modular.
http://backbonetutorials.com/why-would-you-use-backbone/
21. 沒有 MVC 架構
• 典型沒有 MVC 架構的寫法
var dataMapping = function(data) {!
for (i = 0; i < data.length; i++) {!
var htmlCode = !
"<div class="alert alert-dismissable alert-info">"!
+ " <button type="button" class="close" data-dismiss="
alert" aria-hidden="true">×</button>"!
+ " <h4>jollen</h4>"!
+ data[i].message!
+"</div>";!
!
$('#message').append(htmlCode);!
}!
}
22. 關於 RESTful
• 現代的 Web App 開發,以 REST API 的⽅方式
整合 Client(Device)與 Server
• RESTful 是 Web Service 主流架構
• RESTful 易於 Web Service 與不同裝置的整
合,例如:Desktop、Phone、Tablet 與
TV 等
30. Work with Front-End Developers
Use MVC, MVP and MVVM
Call REST API in Backbone way
Customizable CSS
CSS generation and minify
31. Model, View and Control
Views and Templating
Handlebars.js and Underscore’s
template
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
33. Model, View and Control
manage the data for an application
e.g. Backbone "collections"
34. MPV
Models, Views & Presenters
MVP is generally used most often in
enterprise-level applications where it's
necessary to reuse as much
presentation logic as possible.
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
35. Model View ViewModel
an architectural pattern based on MVC
and MVP,
!
which attempts to more clearly
separate the development of user-interfaces
(UI) from that of the business
logic and behavior in an application.
http://addyosmani.com/resources/essentialjsdesignpatterns/book/#jquerypluginpatterns
37. 認識 View.$el
• A cached jQuery object for the
view's element.
• ⼀一個 jQuery 物件
var message = $('input[name="message"]').val();
var message = this.$el.find('input[name="message"]').val();!
38. 認識 this 物件
• this 是⼀一個物件,代表「這個 View」的意思
• this 為 Backbone.View 類別
53. 關於 Backbone Data Model
• Backbone.Model 除了表⽰示資料外,還提供
各種處理模型
• 最重要的處理模型:manage changee
• ⼀一但 Model 裡的資料有變動(例如:新增、
刪除等),就要重新做 "Data Mapping"
• Backbone Way 的處理⽅方式,是透過
Backbone.Model.fetch
54. 使⽤用 Backbone Data Model 的理由
• 使⽤用 *$.ajax() 來呼叫 REST API 雖然是可⾏行
的做法,但是有⼀一個缺點:處理 Response
data 的架構不夠嚴謹
• 使⽤用 *$.ajax() 來呼叫 REST API 時,是直接
把 API 當做 *ajax() 的參數,這個做法有⼀一
個缺點:API 與 Response data 是⼀一種⽐比較
鬆散的關係
55. Backbone Data Model 優點
• 使⽤用 Model fetch 的⽅方式,讓 Response
data 的處理更嚴謹
• 使⽤用 Data model 的⽅方式,,讓 Data 與
API 偶和(Aggregation)在⼀一起
58. 設定 Data Model
• 呼叫 Backbone.Model.fetch 後,
Backbone 會幫我們呼叫 REST API,並且取
得 Response data
• 成功取得 Response data,
Backbone.Model.fetch 就會 Callback
success 函數。
59. 關於 Data State 的變化
• self.model.set 的意思是,將取得的
response data 儲存到 Data model裡
• 由於 Data model 有了變動,所以
Backbone 便會呼叫 render() 函數
• 在 render() 函數裡,再 Render 出新的內容
60. 觀念⼩小結
• 透過 Data model 整合 REST API,以及
Response data
• 將 REST API 與 Response data 封裝成
Data model
• 在 Data model 變動時,重新 Render 畫⾯面