初探Backbone.js
2016-02-23 20:41
621 查看
一、什么是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 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等框架如今大行其道。鉴于本人项目经验有限,暂未接触过上述框架,但不免好奇心驱使,附上一下链接与同仁共享:gitbug链接
Angular.js Backbone.js Ember.js
相关文章推荐
- Backbone.js 0.9.2 源码注释中文翻译版
- Backbone.js中的集合详解
- Javascript MVC框架Backbone.js详解
- backbone学习笔记—— 入门篇
- Backbone.js学习笔记——Collection篇
- 使用Backbone.js开发Chrome便签插件
- 构建移动Web应用程序的技术堆栈
- JAVASCRIPT MVC架构之旅
- 【10.06】关于SPA,以及Backbone.js基本用法学习摘要
- 初识MVC框架
- 关于js中全局和非全局以及立即运行的问题
- Backbone.js的技巧和模式
- Backbine.js实战第四章----数据模型
- Backbine.js实战第五章----模型集合
- Backbine.js实战第六章----视图
- 使用Backbone.js实现级联选择框
- Javascript SDK:轻松开发HTML5应用的必备工具
- C++真的能够王者归来吗?
- 50+ 个 JavaScript & HTML5 框架以及相关工具
- angularjs(二):前端开发框架三剑客—AngularJS VS. Backone.js VS.Ember.js