让你的App飞一会

在基于Backbone的单页应用中，我们可能会有下面这些疑问:

1 如果多次访问同一个页面（hash）时，被多次实例化的视图所占内存释放了么？

2 当你关闭视图后，是不是会发现，它上面的事件还没有移除掉？

3 你是不是在为进一个新页面之前的清理工作而懊恼呢？

因为Backbone是事件驱动的，在Backbone App 应用的许多地方你都能看到事件的身影：

在View中，通过events属性来配置事件的注册：

MyView = Backbone.View.extend({
  events: {
    "click #someButton": "doThat",
    "change #someInput": "changeIt"
  },
  doThat: function(){ ... },
  changeIt: function(){ ... }
});

我们会监听model的变化来渲染页面：

MyView = Backbone.View.extend({
  initialize: function(){
    this.listenTo(this.model, this.render, this);
  },
  render: function(){ ... }
});

我们还可以用全局/应用级的事件对象，来触发页面渲染：

MyView = Backbone.View.extend({
  initialize: function(){
    this.options.vent.bind("app:event", this.render, this);
  },
  render: function() { ... }
});
var vent = new _.extend({}, Backbone.Events);
new MyView({vent: vent});
vent.trigger("app:event");

事件在给我们带好处的同时，也有其负面影响。通过事件，多个对象会被绑在一起，它们之间也就有了引用关系。而这种引用关系如果不被清除，对象所占内存很可能不会被回收，引发内存泄露。

很常见的场景：

MyRouter = Backbone.Router.extend({
  routes: {
    "": "home",
    "post/:id": "showPost"
  },
 
  home: function(){
    var homeView = new HomeView();
    $("#mainContent").html(homeView.render().el);
  },
 
  showPost: function(id){
    var post = posts.get(id);
    var postView = new PostView({model: post});
    $("#mainContent").html(postView.render().el);
  }
});

如你所想，页面运行是没问题的。但你想过，当进入PostView视图时，HomeView视图上的事件有被清理过吗？它的实例会被回收吗？

我们来简单构造一个类，它专门负责视图上的清理工作：

function AppView(){
 
   this.showView(view) {
    if (this.currentView){
      this.currentView.close();
    }
 
    this.currentView = view;
    this.currentView.render();
 
    $("#mainContent").html(this.currentView.el);
  }
 
}

那之前的代码可优化如下：

MyRouter = Backbone.Router.extend({
  routes: {
    "": "home",
    "post/:id": "showPost"
  },
 
  initialize: function(options){
    this.appView = options.appView;
  },
 
  home: function(){
    var homeView = new HomeView();
    this.appView.showView(homeView);
  },
 
  showPost: function(id){
    var post = posts.get(id);
    var postView = new PostView({model: post});
    this.appView.showView(postView);
  }
});

关闭视图

上面的例子中，当移除一个视图时，都会调用一个close方法，但Backbone.View是没有这个方法的，先讨论下，close方法要具备什么样的功能呢？

1 移除DOM元素上面的事件；

2 移除视图上面的事件；

3 从DOM树中移除相关HTML；

所以，我想close方法大概是这么个样子：

Backbone.View.prototype.close = function(){
  this.remove();
  this.off();
}

首先我们这里调用Backbone.View的remove方法：

   // Remove this view by taking the element out of the DOM, and removing any
   // applicable Backbone.Events listeners.
   remove: function () {
            this.$el.remove();
            this.stopListening();
            return this;
  }

“this.$el.remove()” 从DOM树中移除HTML，“this.stopListening()” 移除视图监听的其他对象上面的事件，” this.off()”移除视图自身的事件，但是看了zepto的remove方法：

remove: function(){
      return this.each(function(){
        if (this.parentNode != null)
          this.parentNode.removeChild(this)
      })
},

对于视图里通过”events”来配置注册的事件是否被移除我持怀疑态度，这个暂不作讨论。

设计视图

    Jass.extend = Backbone.View.extend;
    Jass.View = Backbone.View.extend({
        initialize: function () {
           var data=arguments;
           if(this.beforeRender) data=this.beforeRender.apply(this,arguments)||{};
           this.render(this.tpl(data));
           if(this.afterRender) this.afterRender.call(this,data);
        },
        close: function () {
            if(this.beforeClose) this.beforeClose();
            this.remove();
            this.off();
            if(this.onClosed) this.onClosed();
            //this.trigger('close');
            //delete this;
        },
        render: function (el) {
            this.$el.html(el);
        },
    });

在视图的渲染时，渲染前调用beforeRender,渲染后调用afterRender，可看成其生命周期的两个不同阶段，其中this.tpl= _.template(html模板)。

 在close方法中，也有调用beforeClose和onClosed，做你想做的事情吧。

清道夫说，没有我，你们都是瞎忙活：

   Jass.region = function (node) {
        this.node = $(node);
    }
   Jass.region.prototype.show = function (view) {
        var node = this.node;
        var currentView = this.currentView;
        if (!view.el) {
            var err = new Error('View Must Extend from Jass.View');
            err.name = 'NoError';
            throw err;
        }
        if (view != currentView) {
            if (currentView) {
                currentView.close();
                delete this.currentView;
            }
        }
        node.html(view.el);
        if(view.onShow) view.onShow();
        view.trigger('render',view);
        this.currentView = view;
        return view;
}

在框架里，先做些事情：

    Jass.Application = function () {
        this.vent = _.extend({}, Backbone.Events);
        this._initCallbacks = new $.Callbacks();
    };

    App = _.extend(new Jass.Application,{
        "header": new Jass.region("#header"),
        "body": new Jass.region("#main"),
    });

然后在我们的App里会这样用：

  var head=new headView();
  App.header.show(head);

  var body=new homeView();
  App.body.show(body);

打完收工，希望对你有所启示！

http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/