OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

使用Backbone构建精美应用的7条建议


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1397954839676
注意 转载须保留原文链接,译文链接,作者译者等信息。  
(注*在之前的文章中,有人比较过Backbone和AngularJS两种MVC框架,下面是关于使用Backbone的一些心得)

我们在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分钟的。

这些小贴士帮助我们写干净的,更好的可读的代码。
原文地址: 点此
社区评论 ( Beta版 )
  • #0 redstone 1398041661000
    很有用的一些基础技巧。不过这些东西需要程序员很好的去理解,很多事情并不是看上去那么直观和简单。
  • #1 隔心岛 1398082897000
    做到一定程度后是水到汇成的事儿……
  • #2 隔心岛 1398082917000
    @隔心岛

    渠成
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. NODE.JS为什么会成为企业中的首选技术
  2. 为什么我不建议你将JavaScript作为主力语言
  3. 你用什么工具开发JavaScript?
  4. 我为什么不从NodeJS切换到Go
  5. 用纯CSS实现的箭头
  6. 在JavaScript里写类层次结构?别那么做!
  7. 静态web的回归
  8. HTML和CSS是什么玩意儿?
  9. OpenSSL是坑货写的
  10. 一系列JavaScript的基础工具
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  1. [译] JavaScript 开发者经常忽略或误用的七个基础知识点
  2. 通过javascript把图片转化为字符画
  3. 理解JavaScript中的Event Loop
  4. JavaScript教程:Airbnb代码规范
  5. JS学习:JavaScript的核心
  6. Node初学者入门,一本全面的NodeJS教程
  7. 编写更好的jQuery代码的建议
  8. Javascript模块化编程:AMD规范及require.js用法
  9. 我最喜欢的jQuery插件模板
  10. 快乐Node程序员的10个习惯

 关键字 - JavaScript
  1. 在JavaScript中创建命名空间的几种写法
  2. JavaScript中NaN的秘密
  3. JavaScript用Number/parseInt/parseFloat判断字符串是否为数字
  4. 为JavaScript设计一个指数操作(运算)符
  5. 用JavaScript将input/textarea中的文本复制粘贴到剪切板
  6. JS动态滑动切换到页面指定位置
  7. 纽约时报使用Html5 WebRTC记录访问者IP地址
  8. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  9. 40行JavaScript代码实现的3D旋转魔方动画效果
  10. JavaScript中的继承,构造函数以及new关键字的作用

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号