使用Backbone构建精美应用的7条建议
我们在Bizzabo使用Backbone.js已经有两年的时间了。我们从一个小的网页应用为开始,这些小应用是由Backbone驱动的,而且他们看上去非常友好。
Backbone天生就不固执己见。你从文档上获取的一个最基本观点是:使用backbone.js提供的工具,做任何你想做的事。
这点非常好,因为有这么多不同的应用场合,而且对于开始写app来说也非常容易。这种途径可能避免我们在刚开始时犯尽可能少的错误。
当一件事做错的时错,我们要发现并找到改正的方法。
下面这些提示,可以让你避免我们在进行Backbone.js开发时所碰到错误:
1. 视图(Views)是数据无关的(Data-Less)
数据属于模型(models)不是视图。下次你发现 你在一个视图中存储数据(或者更糟:在DOM里),马上把它移到model里。
如果你没有model,创建一个非常简单:
this.viewState = new Backbone.Model();
真的不需要任何其它操作。
你可以在你的数据上侦听改变事件,甚至跟你的服务器在线同步。
2. DOM事件只改变models
当一个DOM事件触发时,比如点击了一个按钮,不要让它改变view本身。改变这个model.
改变DOM且不改变状态意味着你的状态还存储在DOM中。这条规则可以让你保持状态一致。
如果点击了一个“加载更多”边接,不要展开视图,只需要改变model:
this.viewState.set('readMore', true);
好了,但是视图何时发生改变?好问题,下一条规则会回答。
3.DOM只有在model发生改变时才改变
事件是很神奇的,请使用他们。最简单的方法是每次改变后触发一遍。
this.listenTo(this.stateModel, 'change', this.render);
更好的方法是只有在需要的时侯触发改变。
this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);
这个视图会一直同他的model保持一致。无论model是如何改变的:从命令接口或调试信息处响应动作,这个视图会一直保持更新。
4. 绑定的东西必须解绑
当视图从DOM上移除时,使用'remove'方法,它必须从所有绑定的事件上解绑上。
如果你使用'on'绑定,你的职责是使用'off'去解绑。如果没有解绑,内存回收器无法释放内存,从而造成你应用的性能下降。
这就是'listenTo'的由来。它会跟踪视图的绑定和解绑。Backbone把这个从DOM移动之前,会进行'stopListening'。
// Ok:
this.stateModel.on('change:readMore', this.renderReadMore, this);
// 神奇:
this.listenTo(this.stateModel, 'change:readMore', this.renderReadMore);
5. 保持链式写法
从render和remove方法里,总是返回'this'。这样可以让你写方法链。
view.render().$el.appendTo(otherElement);
这很方法,不要打破它。
6. 事件比回调要好
等待响应事件比回调要好
Backbone模型(models)默认会触发'sync'和'error'事件,因此可以使用这些事件代替回调。考虑一下这两种情况。
model.fetch({
success: handleSuccess,
error: handleError
});
//这种更好:
view.listenTo(model, 'sync', handleSuccess);
view.listenTo(model, 'error', handleError);
model.fetch();
model何时填充(fetched)并不重要,handleSucess/handleError会被调用。
7. Views是有作用域的
视图永远不要操作除了它本身以外的DOM。
view会引用它自己的DOM元素,如'el'或者jquery对象'$el'
那意味着你永远不要直接使用jQuery:
$('.text').html('Thank you');
请把DOM元素的选择限定到你自己的域里面:
this.$('.text').html('Thank you');
// 这等价于
// this.$el.find('.text').html('Thank you');
如果你需要更新一个别的不同的视图,只要触发一个事件,让别的视图去做。你也可以使用Backbone的全局Pub/Sub系统。
例如,我们阻止页面滚动:
var BodyView = Backbone.View.extend({
initialize: function() {
this.listenTo(Backbone, 'prevent-scroll', this.preventScroll);
},
preventScroll: function(prevent) {
// .prevent-scroll 有下面的CSS规则: overflow: hidden;
this.$el.toggleClass('prevent-scroll', prevent);
}
});
// 现在从任何其他地方调用:
Backbone.trigger('prevent-scroll', true); // 阻止 scrolling
Backbone.trigger('prevent-scroll', false); // 允许 scrolling
还有一件事
只要读读backbone的源代码,你会学到更多。看一看backbone.js的源代码,然后看看这些神奇的事情是怎么实现的。这个库非常小,而且可读性很好,整个读完不会超过10分钟的。
这些小贴士帮助我们写干净的,更好的可读的代码。
使用Backbone构建精美应用的7条建议的更多相关文章
- 【Web前沿技术】纯 CSS3 打造的10个精美加载进度条动画
之前向大家介绍8款优秀的 jQuery 加载动画和进度条插件,今天这篇文章向大家推荐10个纯 CSS3 代码实现精美加载进度条动画效果的方案.加载动画和进度条在网站和 Web 应用中的使用非常流行,特 ...
- 将Web应用性能提高十倍的10条建议
导读 提高 web 应用的性能从来没有比现在更重要过.网络经济的比重一直在增长:全球经济超过 5% 的价值是在因特网上产生的(数据参见下面的资料).这个时刻在线的超连接世界意味着用户对其的期望值也处于 ...
- 将 Web 应用性能提高十倍的10条建议
提高 web 应用的性能从来没有比现在更重要过.网络经济的比重一直在增长:全球经济超过 5% 的价值是在因特网上产生的(数据参见下面的资料).这个时刻在线的超连接世界意味着用户对其的期望值也处于历史上 ...
- 提高Axure设计效率的10条建议
http://www.woshipm.com/ucd/92153.html Axure 是创建软件原型的快速有力的工具.上手很容易,但是,其中存在一个危险.这款软件是如此的直观以至于很多用户可以在没有 ...
- 给备战NOIP 2014 的战友们的10条建议
应老胡要求,要写10条建议= = begin 1. 注意文件关联 比如 halt 前要close(input); close(output); 还有就是一定要打这两句话= = 2. 快排,大家都懂得. ...
- 提高Axure设计效率的10条建议 (转)
Axure 是创建软件原型的快速有力的工具.上手很容易,但是,其中存在一个危险.这款软件是如此的直观以至于很多用户可以在没有接受过任何正式培训的情况下进行使用.他们可能不知道的是他们可能没有以恰当的方 ...
- <转>“人脉投资”的10条建议
谁都知道人脉很重要,所以有些人非常勤奋的“做人脉”,他们往往会这样做—— 积极的参与各类线下活动,逢人就换名片.加微信. 见到名人或者重要人物必合影,而且他们还会掏出手机来给你看. 逢年过节,给所有他 ...
- C++编程开发学习的50条建议(转)
每个从事C++开发的朋友相信都能给后来者一些建议,但是真正为此进行大致总结的很少.本文就给出了网上流传的对C++编程开发学习的50条建议,总结的还是相当不错的,编程学习者(不仅限于C++学习者)如果真 ...
- 给360的六条建议(禁止异地登录,普通用户500G足够用了)
个人觉得,360云盘哪怕做个小改进,都不至于走到现在的地步,最后六条建议! 1.弄个实名制,身份证和手机号码双重绑定,每人限制申请一个账户. 2.禁止云盘的一切分享功能,采用封闭式,个人云盘资料其他人 ...
随机推荐
- Jmeter----逻辑控制器(Logic Controller)
前言: 1. Jmeter官网对逻辑控制器的解释是:“Logic Controllers determine the order in which Samplers are processed.”.意 ...
- JMeter学习笔记---性能分析
图像结果: 通过观察平均采样响应时长,用户可以直观地看到,随着并发压力的加大,以及性能测试时间的延长,系统性能所发生的变化.正常情况下,平均采样响应时长曲线应该是平滑的,并大致平行于图像下边界. 异常 ...
- SSAS 笔记
SQL SERVER 2000创建多维数据集对应的cub文件 http://blog.csdn.net/zklth/article/details/6367816 http://msdn. ...
- 进程在Linux内核中的角色扮演
在Linux内核中,内核将进程.线程和内核线程一视同仁,即内核使用唯一的数据结构task_struct来分别表示他们:内核使用相同的调度算法对这三者进行调度:并且内核也使用同一个函数do_fork() ...
- scrapy 项目实战(一)----爬取雅昌艺术网数据
第一步:创建scrapy项目: scrapy startproject Demo 第二步:创建一个爬虫 scrapy genspider demo http://auction.artron.net/ ...
- django中cookies和session
django中cookies和session是两个经常使用的用户认证工具.都是类似于字典的数据类型,都是request的内部属性 cookies的读写方法 cookies读,比如username us ...
- unity 获得子节点
transform.FindChild("childName") transform.FindChild("childName/grandChildName") ...
- HDU 1260 Tickets (动规)
Tickets Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
- SQL中的LIKE中用参数化查询
今天终于学会怎么在like中用参数化查询啦..哈哈..再也不用担心sql注入了...
- linux命令(26):Bash Shell 获取进程 PID
转载地址:http://weyo.me/pages/techs/linux-get-pid/ 根据pid,kill该进程:http://www.cnblogs.com/lovychen/p/54113 ...