Backbone First Glance

昨夜開始實現利用github api 把文章評論丟到Issue裏面，選型時選擇了Backbone做爲基礎，對比以往研究過的其餘各種框架，Backbone是嶄新而讓我震驚的

先說結論：Backbone是framework of MV* frameworks，是框架的框架；或者說，Backbone僅僅抽象了web app framework中多數都須要的功能組織成api接口，但並無將本身限制在任何一種風格，而是要求開發者先以Backbone爲基礎本身定義出一種框架（完成MV*中「*」部分和V部分的定義），而後再實現本身的業務。

不是MVC, MVP, MVVM

MV*家族的差別在於*，也就是Model和View的中間代碼，中間代碼的職責、邊界、執行方式輸入輸出等決定了MV*框架的類別，Backbone不存在這樣的中間層。

Wikipedia和不少其餘人將Backbone定義爲MVP，我以爲這多是由於相對而言將Backbone完善爲一個MVP框架是成本比較低的，但即便一樣的MVP模式，Backbone也能夠展示出大相徑庭的組織結構來！

其實官網簡介正暗示了這個結論：

Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.

Backbone並無定死如何鏈接model和view，沒有定死app的結構究竟如何，而只是抽象了model和view，甚至Backbone.View不必定作MV*中的V部分。

Backbone Storm

幾分鐘的簡單brainstorm就讓我列出了很是多種以Backbone爲基礎的結構

將Backbone.View做爲MVP模式中的P，V層只留原生DOM/BOM。而Backbone.Router僅做爲處理HistoryAPI/Hashchange的輔助。這種結構中M、V、P三者都有很好的事件支持，比較適合事件驅動的開發思路，但估計模塊化、拆分View可能有難度

一樣MVP結構，也能夠邊緣化Backbone.View，將其僅做爲綁定dom的輔助，而將Backbone.Router做爲MVP模式中的P。Router爲核心的好處是若是單頁面狀態多的時候會比較輕鬆，另外Backbone.View被邊緣化後，可能會有利於動態切換、嵌套、拆分。而Router自己因爲自己邏輯主要是分發，自然來講不難拆分。

雖然Backbone.Router曾經被稱爲Controller，但在非單頁的webapp中這並不合適，額外單獨的Controller可能適用範圍更廣一點。這種結構中Backbone.View做爲View的一部分，主要負責屏蔽DOM/BOM的細節，Controller負責交互邏輯，比起以前的MVP顯得更靈活一些（Backbone.View瘦意味着易於移植到不一樣終端）

在MVVM模式中，VM負責將領域模型Model和視圖View對接，以Backbone爲基礎來看，VM能夠直接繼承Backbone.Model，而後在sync方法中對接實際的領域Model，也能夠直接手寫。不管如何，Backbone.View做爲View來屏蔽dom細節應該是沒有問題的。注意這種結構下Model須要經歷兩個類才最終影響到Dom結構，層數多每每同時意味着複雜性和靈活性。感受可能會比較難以把握VM和M之間的邊界。

除了*部分，咱們還要擔憂什麼？

• 操做DOM的方式：雖然Backbone.View相關代碼中有親jQuery的部分，但一樣也有render方法來承載模板引擎的渲染工做；或者用繼承的事件機制來完成一個數據綁定到dom的關係彷佛也並不突兀。至少我能想象到的三種dom操做風格，Backbone都能很好的承載。
• 嵌套
  
  
  • 嵌套Model。經過覆蓋initialize、sync等方法不難實現，更復雜的關聯關係也基本和其餘語言/框架相似處理便可。固然選用插件也是個不錯的主義。
  • 嵌套View。因爲不一樣的組織方式對View的職責、邊界的定義並不同，因此若是你有相似的需求，最好將嵌套View的方式最開始就考慮進你的設計中。另外，注意若是嵌套View的同時DOM元素也嵌套的話，當心處理事件冒泡。
  • 嵌套Router。若是單純只作純分發，通常問題不大，但若是同時要在Router裏面寫邏輯，那分Router嵌套Router就是必需要考慮的了

總結

其實MV*家族糾結的不外乎純領域的Model和純前端的View之間的這些代碼如何組織，哪些能夠侵入進入Model哪些能夠侵入View；整體思路其實都是解耦。那麼其實如何解耦的原則也很簡單：越有可能變化的地方越要解耦、抽象，而不容易變化的地方則能夠接受必定程度的耦合來爲其餘（效率、代碼量、系統複雜度）妥協。

Backbone將各種框架中有多種流派的、沒有標準答案的部分忽略，只實現最基礎、公認的最佳實踐，將決定權交還了開發者，由開發者決定究竟使用何種風格；正如官網上宣稱的There's More Than One Way To Do It，Backbone就是這樣一個自由的，不完整的，框架之框架

---

參考

• http://backbonejs.org/
• http://lostechies.com/derickbailey/2011/12/23/backbone-js-is-not-an-mvc-framework/
• http://geekswithblogs.net/dlussier/archive/2009/11/21/136454.aspx
• http://www.codeproject.com/Articles/228214/Understanding-Basics-of-UI-Design-Pattern-MVC-MVP

--EOF--

http://mcfog.github.io/2013/05/backbone-first-glance/

哎……剛看backbone兩天的拙做，爲了蹭書>_<