一、什么是Backbone.js
"Backbone.js通過模型，集合和視圖構建web應用。模型是鍵-值綁定和自定義事件的，集合有豐富的API函數，視圖用來聲明事件操作，同時通過RESTful JSON 接口與已存在的API通信。"這句話出自Backbone官網介紹，很簡單，也直接說明了Backbone的特點，如下：
- 它是一個前端框架，設計原則遵循MVC模式
- 它的Controller部分被collections所替代，controler被替代，只保留了Router的功能。
- 支持RESTful形式的API調用
簡而言之，像在Backbone.js官網里“Getting Started”中提到的，backbone.js 的存在，作用之一是為了在大量調用javascript時不再把數據與DOM綁定在一起，不再使用混亂的選擇器和回調。保持數據在HTML樣式，javascript邏輯和服務端數據庫之間同步。不難發現，當一個web應用存在大量變化的數據和豐富的交互時，使用backbone.js是個不錯的選擇。
二、Backbone特點和使用體會
--
Backbone的特點：
- 輕量（8kb）
- 第三方模板（通常是underscore.js）
- View層直接操作DOM，這樣使得View上含有大量業務代碼， 從而controler層面上只剩下Router
- 不支持雙向綁定
Backbone的View可以在HTML頁面中局部使用，這樣做的好處是可以獲得模板兼容，甚至是同后端View層和諧相處。在我具體的業務代碼中，后端使用了PHP的CI框架支持View，同時，在頁面被CI執行了View.render()之后。Backbone接著通過Ajax返回的數據進行局部頁面的下一步渲染，并不需要像Angular那樣對寫整個HTML文檔改寫，這樣的使用方式可以窺見Backbone輕量快捷的特點。
在JS代碼中使用字符串拼接HTML結構是一種簡單粗暴的辦法，然而諸如下面這樣的代碼十分不便于維護和閱讀。
str += '<a + g_city_pinyin + '/' + house_id + '.html"><li><var>' + name + '</var>' + strNewHouse + '<span class="pull-right">' + address + '</span></li></a>';
在Backbone所唯一依賴的庫understore中，提供了一種很簡單的方式來構造HTML結構：
<script type="text/template" id="same-cost-template">
<% _.each(data, function(item, index) {%>
<div class="others-house<% if(index == 2) { %> last <%}%>">
<% if(item["house_img"]){ %>
" />
<% } else {%>
})
<% } %>
<div>
<span><%= parseInt(item["house_price"]) %></span>￥
<a target="_blank" href="<%= item["url"] %>">
Test
</a>
</div>
</div>
<% }) %>
</script>
上面是一個Backbone中View層使用的模板，通過在實例化View層是，既實現了需要輸出的HTML片段，也同時將業務邏輯包含在其中。這樣做卻使得View很重，后來發現，也正是因為這一點，Backbone不適合用來渲染局部HTML，因為View太重反而使得實例化一個View層時需要做一些工作，有點牛刀殺雞，暫時還沒有找到更好的替代品。Angular需要從HTML根節點開始對頁面進行解析，所以也不適合，同時Angular比Backbone來說體積更大。到這里也提出一個問題：如何優化Backbone的View層，尤其是當View層只是負責展示內容，沒有任何交互時，調用View.render()時，盡可能減少與Model層聯系。更好簡單的方式，或許可以直接從responseText中直接渲染，畢竟當Model()不需要數據變化時，直接把獲取的數據交給View渲染或許可以更加省力，盡管這么做不符合Backbone的MVC模式。但利用Backbone輕量的優勢，再提供一個更輕量的模板渲染功能可能會更有魅力。可以嘗試Backbone所依賴的Underscore，或許作為第三方插件，它自己也可以將自定義的Model渲染出正確的View來，這個方法值得一試，如果可行，在當前的業務代碼中，又可以把Backbone“干掉”，只使用Underscore來進行局部渲染！
三、小結
--
有痛點的地方就會有抱怨，就會有需求。這也是為什么現在Angular,React等框架如今大行其道。鑒于本人項目經驗有限，暫未接觸過上述框架，但不免好奇心驅使，附上一下鏈接與同仁共享：
