初探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 += '

  • ' + name + '' + strNewHouse + '' + address + '
  • ';

    在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"]){ %>
        class="house-img" src="<%= item["house_img"] %>" />
        <% } else {%>
        class="house-img" src="{= asset_url('web/img/dt_house_image_sample.png')}" />
        <% } %>
        <div>
          <%= parseInt(item["house_price"]) %>"_blank" href="<%= item["url"] %>">
            Test
          
        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

    你可能感兴趣的:(javascript,backbone.js)