初探Backbone.js

一、什么是Backbone.js

“Backbone.js通过模型，集合和视图构建web应用。模型是键-值绑定和自定义事件的，集合有丰富的API函数，视图用来声明事件操作，同时通过RESTful JSON 接口与已存在的API通信。”这句话出自Backbone官网介绍，很简单，也直接说明了Backbone的特点，如下：

1. 它是一个前端框架，设计原则遵循MVC模式
2. 它的Controller部分被collections所替代，controler被替代，只保留了Router的功能。
3. 支持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 href="http://xf.fangdd.com/' + 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"]){ %>
    <img class="house-img" src="<%= item["house_img"] %>" />
    <% } else {%>
    <img class="house-img" src="{= asset_url('web/img/dt_house_image_sample.png')}" />
    <% } %>
    <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等框架如今大行其道。鉴于本人项目经验有限，暂未接触过上述框架，但不免好奇心驱使，附上一下链接与同仁共享：

1. gitbug链接
2. Angular.js Backbone.js Ember.js