第232期 / February 6, 2017

研發新視界

分享到臉書!分享到維特!分享到噗浪!分享到Google+!分享到微博!轉寄友人友善列印

Backbone.js 前端框架之基本介紹

作者/林秤毅

[發表日期:2017/2/6]

前言-甚麼是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上。


《圖二》Model物件儲存


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


《圖三》Server互動


除了對 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 即可:


《圖五》collection宣告



《圖六》collection-add 範例


三、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模板中對應的佔位符裡面去。


《圖八》render範例



《圖九》view 綁定 model 範例


結論

本文針對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