一唤冈、什么是Backbone.js
"Backbone.js通過模型牍帚，集合和視圖構(gòu)建web應(yīng)用。模型是鍵-值綁定和自定義事件的安疗，集合有豐富的API函數(shù)抛杨，視圖用來聲明事件操作，同時(shí)通過RESTful JSON 接口與已存在的API通信荐类。"這句話出自Backbone官網(wǎng)介紹怖现，很簡單，也直接說明了Backbone的特點(diǎn)玉罐，如下：
- 它是一個(gè)前端框架屈嗤，設(shè)計(jì)原則遵循MVC模式
- 它的Controller部分被collections所替代，controler被替代厌小，只保留了Router的功能恢共。
- 支持RESTful形式的API調(diào)用
簡而言之，像在Backbone.js官網(wǎng)里“Getting Started”中提到的璧亚，backbone.js 的存在讨韭，作用之一是為了在大量調(diào)用javascript時(shí)不再把數(shù)據(jù)與DOM綁定在一起脂信，不再使用混亂的選擇器和回調(diào)。保持?jǐn)?shù)據(jù)在HTML樣式透硝，javascript邏輯和服務(wù)端數(shù)據(jù)庫之間同步狰闪。不難發(fā)現(xiàn)，當(dāng)一個(gè)web應(yīng)用存在大量變化的數(shù)據(jù)和豐富的交互時(shí)濒生，使用backbone.js是個(gè)不錯(cuò)的選擇埋泵。
二、Backbone特點(diǎn)和使用體會(huì)
--
Backbone的特點(diǎn)：
- 輕量（8kb）
- 第三方模板（通常是underscore.js）
- View層直接操作DOM罪治，這樣使得View上含有大量業(yè)務(wù)代碼丽声， 從而controler層面上只剩下Router
- 不支持雙向綁定
Backbone的View可以在HTML頁面中局部使用，這樣做的好處是可以獲得模板兼容觉义，甚至是同后端View層和諧相處雁社。在我具體的業(yè)務(wù)代碼中，后端使用了PHP的CI框架支持View晒骇，同時(shí)霉撵，在頁面被CI執(zhí)行了View.render()之后。Backbone接著通過Ajax返回的數(shù)據(jù)進(jìn)行局部頁面的下一步渲染洪囤，并不需要像Angular那樣對(duì)寫整個(gè)HTML文檔改寫徒坡，這樣的使用方式可以窺見Backbone輕量快捷的特點(diǎn)。
在JS代碼中使用字符串拼接HTML結(jié)構(gòu)是一種簡單粗暴的辦法瘤缩，然而諸如下面這樣的代碼十分不便于維護(hù)和閱讀喇完。
str += '<a + g_city_pinyin + '/' + house_id + '.html"><li><var>' + name + '</var>' + strNewHouse + '<span class="pull-right">' + address + '</span></li></a>';
在Backbone所唯一依賴的庫understore中，提供了一種很簡單的方式來構(gòu)造HTML結(jié)構(gòu)：
<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>
上面是一個(gè)Backbone中View層使用的模板款咖，通過在實(shí)例化View層是何暮，既實(shí)現(xiàn)了需要輸出的HTML片段奄喂，也同時(shí)將業(yè)務(wù)邏輯包含在其中铐殃。這樣做卻使得View很重，后來發(fā)現(xiàn)跨新，也正是因?yàn)檫@一點(diǎn)富腊，Backbone不適合用來渲染局部HTML，因?yàn)閂iew太重反而使得實(shí)例化一個(gè)View層時(shí)需要做一些工作域帐，有點(diǎn)牛刀殺雞赘被，暫時(shí)還沒有找到更好的替代品。Angular需要從HTML根節(jié)點(diǎn)開始對(duì)頁面進(jìn)行解析肖揣，所以也不適合民假，同時(shí)Angular比Backbone來說體積更大。到這里也提出一個(gè)問題：如何優(yōu)化Backbone的View層龙优，尤其是當(dāng)View層只是負(fù)責(zé)展示內(nèi)容羊异，沒有任何交互時(shí)，調(diào)用View.render()時(shí)，盡可能減少與Model層聯(lián)系野舶。更好簡單的方式易迹，或許可以直接從responseText中直接渲染，畢竟當(dāng)Model()不需要數(shù)據(jù)變化時(shí)平道，直接把獲取的數(shù)據(jù)交給View渲染或許可以更加省力睹欲，盡管這么做不符合Backbone的MVC模式。但利用Backbone輕量的優(yōu)勢一屋，再提供一個(gè)更輕量的模板渲染功能可能會(huì)更有魅力窘疮。可以嘗試Backbone所依賴的Underscore冀墨，或許作為第三方插件考余，它自己也可以將自定義的Model渲染出正確的View來，這個(gè)方法值得一試轧苫，如果可行楚堤，在當(dāng)前的業(yè)務(wù)代碼中，又可以把Backbone“干掉”含懊，只使用Underscore來進(jìn)行局部渲染身冬！
三、小結(jié)
--
有痛點(diǎn)的地方就會(huì)有抱怨岔乔，就會(huì)有需求酥筝。這也是為什么現(xiàn)在Angular,React等框架如今大行其道。鑒于本人項(xiàng)目經(jīng)驗(yàn)有限雏门，暫未接觸過上述框架嘿歌，但不免好奇心驅(qū)使，附上一下鏈接與同仁共享：
