Backbonejs：.on vs .listenTo vs .bind [重复]

Question

.on、.listenTo、.bind 有什么区别？

我在这里对它们进行了测试，它们似乎在做同样的事情：回调。

var NewStatusView = Backbone.View.extend({

    events: {
        "submit form": "addStatus"
    },

    initialize: function(options) {

        // using .on
        //this.collection.on("add", this.clearInput, this);

        // or using bind: 
        //_.bindAll(this, 'addStatus', 'clearInput');
        //this.collection.bind('add', this.clearInput);

        // or using listenTo: 
         _.bindAll(this, 'addStatus', 'clearInput');
        this.listenTo(this.collection, 'add', this.clearInput) ;
    },

    addStatus: function(e) {
        e.preventDefault();
        this.collection.create({ text: this.$('textarea').val() });
    },

    clearInput: function() {
        this.$('textarea').val('');
    }
});

什么时候和在什么场景下使用哪个是最好的？

Answer 1

通常最好使用listenTo()

来自 Addy Osmani 的 Backbone Essentials：

虽然on() 和off() 直接向观察对象添加回调， listenTo() 告诉一个对象监听另一个对象的事件， 允许侦听器跟踪它所针对的事件 听。随后可以在侦听器上调用stopListening() 告诉它停止监听事件：

var a = _.extend({}, Backbone.Events);
var b = _.extend({}, Backbone.Events);
var c = _.extend({}, Backbone.Events);

// add listeners to A for events on B and C
a.listenTo(b, 'anything', function(event){ console.log("anything happened"); });
a.listenTo(c, 'everything', function(event){ console.log("everything happened"); });

// trigger an event
b.trigger('anything'); // logs: anything happened

// stop listening
a.stopListening();

// A does not receive these events
b.trigger('anything');
c.trigger('everything');

如果您使用 on 和 off 并删除视图及其对应的模型 同时，一般没有问题。但是有问题 当您删除已注册以收到通知的视图时出现 模型上的事件，但您不删除模型或调用 删除视图的事件处理程序。由于模型参考了 视图的回调函数，JavaScript 垃圾收集器不能 从内存中删除视图。这称为幻影视图，是一种形式 内存泄漏很常见，因为模型通常倾向于 在应用程序的生命周期中比相应的视图寿命更长。为了 有关该主题和解决方案的详细信息，请查看这篇优秀的文章 德里克·贝利。

实际上，在对象上调用的每个on 还需要一个off 调用以使垃圾收集器完成其工作。 listenTo() 更改，允许视图绑定到模型通知和取消绑定 只需一个电话即可获得所有人的支持 - stopListening()。

View.remove() 的默认实现会调用 stopListening()，确保所有使用 listenTo() 绑定的侦听器 在视图被销毁之前是未绑定的。

var view = new Backbone.View();
var b = _.extend({}, Backbone.Events);

view.listenTo(b, 'all', function(){ console.log(true); });
b.trigger('anything');  // logs: true

view.listenTo(b, 'all', function(){ console.log(false); });
view.remove(); // stopListening() implicitly called
b.trigger('anything');  // does not log anything