201507271255_《Backbone之二——使用Backbone八条建议 》

标签：

1. 数据不要存在试图view中或dom中，存储在model中。

新建model：

this.viewState = new Backbone.Model();


2. 关于backbone中Mvc中的c。backbone中的mvc中的c是指：collection——提供一些丰富的API用于枚举功能，用于枚举型。

3. Dom事件只改变model

4. Dom只有在model发生改变时才改变

this.listenTo(this.stateModel, ‘change‘, this.render);
  更好方法，只有在需要的时候才改变：

this.listenTo(this.stateModel, ‘change:readMore‘, this.renderReadMore);

5. 绑定的东西必须解绑

　  当视图从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);

6.保持链式写法
例如：view.render().$el.appendTo(otherElement);

7. 事件比回调要好
Backbone模型（models）默认会触发‘sync‘和‘error‘事件，因此可以使用这些事件代替回调。考虑一下这两种情况。
例如：

model.fetch({
  success: handleSuccess,
  error: handleError
});
//这种更好：
view.listenTo(model, ‘sync‘, handleSuccess);
view.listenTo(model, ‘error‘, handleError);
model.fetch();

8. view是有作用域的

    如果你需要更新一个别的不同的视图，只要触发一个事件，让别的视图去做。你也可以使用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

201507271255_《Backbone之二——使用Backbone八条建议 》

标签：

原文地址：http://www.cnblogs.com/beesky520/p/4679890.html