前言-甚麼是Backbone.js

當網站的應用程式開發越來越複雜的時候，即使你已經把HTML、CSS和JavaScrpipt分開了，仍然會有覺得JavaScript缺乏好的架構。MVC框架通常能讓你進一步把JavaScript為要角的Web應用程式做好架構上的規劃，而Backbone.js就是其中的一種。

簡單來說 Backbone.js 就是一套幫助開發重量?javascript應用的框架，其包含了 Model、View、Controller來讓使用者操作，Model 提供了key-value 結構，以及可以 binding 大量 event，開發者可以透過 RESTful JSON interface 來跟 Backbone.js 的 Model 及 Collection 搭配。以下針對其中Model、View、Controller作基本的介紹。

基本架構介紹



一、Model

可表示應用中所有數據，當Client端要使用變數來暫存，可以把變數存在Model物件內，把Model當作一般物件般，做資料儲存。本身內建fetch、save等method，只要設定好相關參數(url)Model即可自行與Server溝通取得資料，也就是當由Server取得資料暫存在Client時，會將取得的資料以Model物件方式儲存在Client上。



本身也內建fetch、save等method，只要設定好相關參數(url)Model即可自行與Server溝通取得資料，也就是當由Server取得資料暫存在Client時，會將取得的資料以Model物件方式儲存在Client上。



除了對 Model 的基本 get/set 操作之外，我們也可以透過listen一些 event，像是 view 或是 model 的變化。



當models中值被改變時自動觸發一個"change"事件、所有用於展示models數據的views都會偵聽到這個事件，然後進行重新渲染。

二、Collection

collection是model對象的一個有序的集合，如果有一堆 Model 需要被當做陣列（或類似的有序資料結構–ordered set）來操作，而更重要的是，Collection 可以無縫的整合 RESTful web service，大大減低與後端溝通的阻礙。此外，Collection 可以直接對監聽 Collection 本身或 Collection 裡的 Model 所發出的各種事件（event），例如 change、add、remove 等等。

舉例來看，假設我們有一種 Model 叫做 Book，如果我們想要有一個代表一群人的物件，可以用 Collection 建出代表一群人的 Collection：Library，只要在建構的屬性裡面指定 Model為 Book 即可：





三、View

View中可以綁定dom el和客戶端事件。頁面中的html就是通過views的render方法渲染出來的，當新建一個view的時候通過要傳進一個model作為數據，例如：



而render 是 View 內建的 method，可以透過重新定義 (override) 這個 method 讓我們可以操作改變el(用來表示對應的頁面元素，其值為字串類型，可以是標籤名稱或 id 名稱等 selector)的外觀。例如把從 model 裡面拿出資料塞入 template，再置換 DOM 的外觀。

template中使用的方法_.template($('#item-template').html())是underscore.js中提供一個工具方法，可以通過界面的HTML模板和一個JSON生成動態的HTML ，說白了就是把JSON裡面的值填充到HTML模板中對應的佔位符裡面去。





結論

本文針對Backbone.js的基礎架構(Model、View、Collection)作了一些簡單的介紹，以實際使用上來說，其最好的應用場景是單頁面應用，且在頁面上有大量數據模型，模型之間需要進行複雜的信息溝通。Backbone在這種場景下，能很好的實現事件驅動等等。以下列舉幾項Backbone在此方面的優勢：

• View 的劃分將頁面上的視圖元素一一切割。View 間通過事件和Model 通訊，避免了DOM 事件的濫用。



• Model 和Restful 的通訊方式對於後端維護有相當的幫助。



• MVC 架構清晰。



• Collection/Model 抽象了以前雜亂的AJAX 請求，CRUD 請求變得方便。



• 檔案輕量。

相對的，若應用在較複雜的數據關係如One-To-One或者One-To-Many時便顯得困難，原因是Model 只有基本的CRUD 操作，不能很好的擴展；此外View 層沒有很強的Page 管理機制，比如通過URL 切換改變整個頁面時，頁面上尚存的View 應該如何處理對開發者而言是一大挑戰。

參考資料

1.http://icodingtw.blogspot.tw/2012/05/backbonejs.html
2.http://123.56.156.13/api/backbone/#examples
3.http://icodding.blogspot.tw/2015/08/backbonejs_18.html
4.https://blog.wu-boy.com/2012/04/backbonejs-framework-tutorial-example-1/
5.http://ithelp.ithome.com.tw/articles/10091431
6.http://developer.51cto.com/art/201202/316329.htm
7.https://www.zhihu.com/question/19720745