Event in Backbone

本文主要讲下Bacbone中的事件系统,先声明一个工具类:

var slice = Array.prototype.slice;
    _ = (function () {
        var _ = function () { };
        _.extend = function (target) {
            var sources = slice.call(arguments, 1);
            sources.forEach(function (source) {
                if (source) {
                    for (var prop in source) {
                        target[prop] = source[prop];
                    }
                }
            });
            return target;
        }

        var idCounter = 0;
        _.uniqueId = function (prefix) {
            var id = ++idCounter + '';
            return prefix ? prefix + id : id;
        };
        return _;
})();

事件系统的大体框架:

jass=(function(){
var bone={};
bone.Events={
   on: function (event, callback, context) {
   },
   off: function (event, callback, context) {
   },
  listenTo: function (otherObj, event, callback) {
  },
  stopListening: function (otherObj, event, callback) {
  },
  trigger: function (event) {
  }

}
     return bone;
})();

on/off方法:

      on: function (event, callback, context) {
          this._events || (this._events = {});
          var events = this._events[event] || (this._events[event] = []);
          events.push({ callback: callback, context: context, ctx: context || this });
          return this;
      },
      off: function (event, callback, context) {
          if (!event && !callback) {
              this._events = {};
              return this;
          }
          delete this._events[event];
      }

这两方法的原理和zepto中的on/off两方法差不多,不同的是,这里不再处理DOM元素上的事件:

 listenTo/stopListening方法:

      listenTo: function (otherObj, event, callback) {
            var listeners = this._listeners || (this._listeners = {});
            var id = otherObj._listenerId || (otherObj._listenerId = _.uniqueId('1'));
            listeners[id] = otherObj;
            var onlyListener = !event && !callback;
            if (onlyListener) return this;

            if (typeof event === 'object') callback = this;

            otherObj.on(event, callback, this);

            return this;
      },
      stopListening: function (otherObj, event, callback) {
            var listeners = this._listeners;
            if (!listeners) return;
            var deleteListener = !event && !callback;
            if (typeof name === 'object') callback = this;
            if (otherObj) (listeners = {})[otherObj._listenerId] = otherObj;
            for (var id in listeners) {
                listeners[id].off(event, callback, this);
                if (deleteListener) delete this._listeners[id];
            }
            return this;
      }

我们看到,listenTo是通过本对象给另外一个对象注册事件的.其内部调用了on方法,但是把另外的对象记录在其listeners属性中:这样做的好处可以从stopListening方法就能看到,通过listenTo方法注册的事件,都能通本对象的stopListening方法移除掉其他对象上的事件,消除对其他对象的影响.

trigger方法:

    trigger: function (event) {
            if (!this._events) return this;
            var args = slice.call(arguments, 1);
            var events = this._events[event];

            if (events) {
                events.forEach(function (ev) { 
                    ev.callback.apply(ev.ctx, args);
                });
            }
           //处理all事件
            var allEvents = this._events.all;
            if (allEvents) {
                allEvents.forEach(function (ev) {
                    ev.callback.apply(ev.ctx,args);
                });
            }
        }

我们知道,在MVC中,视图层是会被频繁创建的,有创建就会有销毁。那一个视图关闭后，我们是不是要做些什么呢？看一个熟悉的场景:

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

Backbone的view类有个remove方法:

remove: function() {
      this.$el.remove();
      this.stopListening();
      return this;
}

看到这个方法,是不是有点要清理view的感觉呢?但是遗憾的是,Backbone是不会调用它的,我们要自己添加一个(dispose/destroy)清理方法来封装这个remove,来帮我们处理销毁一个视图后的善后工作.

想想这里为何用listenTo,而不用on ！