使用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分钟的。

　　这些小贴士帮助咱们写干净的，更好的可读的代码。

　　原文：geeks.bizzabo.com