BackBone 事件源码

backbone 简介

当我们在开发大量 JavaScript 的 web 应用的时候，很大的工作就是处理 DOM 以及 DOM 中数据的问题。如果没有很好的组装架构，那么就会带来混乱的结构与越来越复杂和麻烦的问题。

backbone 是一个重量级的 JavaScript 应用框架。
为复杂的 JavaScript 应用程序提供了模型（models）、集合（collections）、视图（views）的结构。

• 模型：用于绑定键值数据和自定义事件
• 集合：附加有可枚举函数的丰富API
• 视图：声明事件处理函数，通过RESRful JSON接口连接到应用程序。

backbone.js 对于 Underscore.js 是重度依赖，对于RESTful，history则依赖与Backbone.Router，DOM处理依赖于 Backbone.View，json2.js，Jquery或者Zepto。
Backbone 将数据呈现为模型，可以创建模型、验证模型、销毁模型和保存模型至服务器。当 UI 的改变引起模型属性变化的时候就会触发 "change" 事件，所显示模型数据的 视图 会接受到更改通知，重新渲染。

backbone 使用

backbone.Events

backbone 中的 event 模块可以被拓展到任意对象，使任何对象都可以使用自定义事件。

var Events = Backbone.Events = {

    // 对一个事件绑定回调函数. 传递 "all" 则将绑定回调在所有事件触发时调用
    on: function(name, callback, context) {

      // API 检测
      if (!eventsApi(this, 'on', name, [callback, context]) || !callback) return this;

      //相当于 this._events = this._events || {} 下面语法更容易用来赋值 如下下句
      //在绑定时间的对象中 建立事件池 来进行事件管理
      this._events || (this._events = {});

      // name 事件在事件池中的形式（数组形式） 存放当前对象绑定在name的所有事件
      var events = this._events[name] || (this._events[name] = []);
      // 将当前需要绑定的事件 push到事件池中的具体事件名称中
      events.push({callback: callback, context: context, ctx: context || this});
      return this;
    },
    off: function(){},
    once: function(){},
    trigger: function(){},
    stopListening: function(){}
  }

其实以上方法和 Jquery 的实现类似，只不过更为简单，Jquery 中还对当前需要绑定事件的对象如果为 DOM 元素的话需要进一步处理来保证 IE 中内存遇到的问题。

    // 解绑一个或者多个回调.
    // 如果 `context` 是 null, 移除所有有该函数的回调.
    // 如果 `callback` 是 null, 移除该事件下的所有回调.
    // 如果 `name` 是 null, 移除所有帮定的回调函数
    off: function(name, callback, context) {
      var retain, ev, events, names, i, l, j, k;
      if (!this._events || !eventsApi(this, 'off', name, [callback, context])) return this;

      // obj.off() 移除所有事件
      if (!name && !callback && !context) {
        this._events = {};
        return this;
      }

      // 使用 underscore 的 获取对象键值方法
      names = name ? [name] : _.keys(this._events);
      for (i = 0, l = names.length; i < l; i++) {
        name = names[i];
        // 移除某一事件下的回调
        if (events = this._events[name]) {
          this._events[name] = retain = [];
          if (callback || context) {
            for (j = 0, k = events.length; j < k; j++) {
              ev = events[j];
              if ((callback && callback !== ev.callback && callback !== ev.callback._callback) ||
                  (context && context !== ev.context)) {
                // 不是所需要删除的事件 则重新扔回 事件池中的对应名称中
                retain.push(ev);
              }
            }
          }
          //如果对应的名称中没有事件，那么删除事件池对象的该属性
          if (!retain.length) delete this._events[name];
        }
      }

      return this;
    }

事件移除，简单地说因为事件绑定是使用了 事件池 的方法处理，那么对于移除事件只需要在事件池中 delete 掉响应的事件即可，唯一需要做的是兼容参数个数不同情况下的移除事件情况。

    // 触发一个或多个事件, 触发所有绑定的回调.
    // 除了事件名称，回调函数会被传递'trigger'相同的参数。
    // (如果你监听了 'all', 会让你的回调函数将事件名称作为第一个参数).
    // obj.trigger("change",function(){});
    // obj.trigger("all",function(eventName){ alert(eventName) });
    trigger: function(name) {
      if (!this._events) return this;
      var args = slice.call(arguments, 1);
      if (!eventsApi(this, 'trigger', name, args)) return this;
      var events = this._events[name];
      //别忘了任何事件触发都要调用 all 中的事件
      var allEvents = this._events.all;
      if (events) triggerEvents(events, args);
      if (allEvents) triggerEvents(allEvents, arguments);
      return this;
    },

    // 使这个对象或者所有监听特定事件的对象停止监听该特定的事件
    stopListening: function(obj, name, callback) {
      var listeners = this._listeners;
      if (!listeners) return this;
      var deleteListener = !name && !callback;
      if (typeof name === 'object') callback = this;
      if (obj) (listeners = {})[obj._listenerId] = obj;
      for (var id in listeners) {
        listeners[id].off(name, callback, this);
        if (deleteListener) delete this._listeners[id];
      }
      return this;
    }

触发与停止监听。

  // 分割事件字符串.
  var eventSplitter = /s+/;

  // 实现多样式化的事件功能的API
  //比如现有API中的多名称的"change blur"` 和jquery风格的事件映射 `{change: action}`
  var eventsApi = function(obj, action, name, rest) {
    if (!name) return true;

    // 处理事件映射
    if (typeof name === 'object') {
      for (var key in name) {
        obj[action].apply(obj, [key, name[key]].concat(rest));
      }
      return false;
    }

    // 处理空间分割的事件名称.
    if (eventSplitter.test(name)) {
      var names = name.split(eventSplitter);
      for (var i = 0, l = names.length; i < l; i++) {
        obj[action].apply(obj, [names[i]].concat(rest));
      }
      return false;
    }

    return true;
  };

  // A difficult-to-believe, 在触发事件时优化内部调用. 尽可能快速到达最有可能的情况
  // (核心的3个 Backbone 事件参数).
  var triggerEvents = function(events, args) {
    var ev, i = -1, l = events.length, a1 = args[0], a2 = args[1], a3 = args[2];
    switch (args.length) {
      case 0: while (++i < l) (ev = events[i]).callback.call(ev.ctx); return;
      case 1: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1); return;
      case 2: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2); return;
      case 3: while (++i < l) (ev = events[i]).callback.call(ev.ctx, a1, a2, a3); return;
      default: while (++i < l) (ev = events[i]).callback.apply(ev.ctx, args);
    }
  };

  var listenMethods = {listenTo: 'on', listenToOnce: 'once'};

  // 使用listenTo 和 listenToOnce反转 `on` and `once` 控制. 将 *this* 对象监听另外一个对象中的事件
  // 保持对监听的跟踪
  _.each(listenMethods, function(implementation, method) {
    Events[method] = function(obj, name, callback) {
      var listeners = this._listeners || (this._listeners = {});
      var id = obj._listenerId || (obj._listenerId = _.uniqueId('l'));
      listeners[id] = obj;
      if (typeof name === 'object') callback = this;
      obj[implementation](name, callback, this);
      return this;
    };
  });

  // 向后兼容的名称.
  Events.bind = Events.on;
  Events.unbind = Events.off;

使用的实例为

var object = {};

_.extend(object, Backbone.Events);

object.bind("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "");

object.unbind("change", onChange); // 只移除onChange回调函数

object.unbind("change"); // 移除所有 "change" 回调函数

object.unbind();

backbone.sync

backbone.sync( method, model, [option] )

•  method - CRUD 方法 ("create", "read", "update", 或 "delete") 
•  model - 要被保存的模型（或要被读取的集合） 
•  options - 成功和失败的回调函数，以及所有 jQuery 请求支持的选项

是对于模型在服务器中读取和保存的函数,都为 json 格式进行数据传输。默认情况下是依赖于 jQuery或者Zepto 的 Ajax 方法进行的发送 RESTful json 请求。（关于 REST Representational State Transfer 表现层状态转化 可见阮一峰老师的 理解RESTful架构）。额~反正本人不是很了解。

// Backbone.sync  同步
  // -------------

  // 重载这个方法来改变 Backbone 持久模型在服务器中的方式、
  // 通过请求类型和问题中的模型
  // 默认情况发送 RESTful Ajax 请求到模型中的`url()`.
  // 一些可行的自定义为:
  //
  // * 使用 `setTimeout` 在一个请求中批量的触发更新.
  // * 发送 XML 而不是 JSON.
  // * 坚持模型通过 WebSockets 而不是 Ajax.
  //
  // 开启 `Backbone.emulateHTTP` 为像 `POST` 一样发送 `PUT` 和 `DELETE` 请求
  // `_method` 参数中包含真正的 HTTP 方法,
  // 以及主体的所有请求 as `application/x-www-form-urlencoded`
  // 替换为 `application/json`参数名为 `model`的模块.
  // 当接口为服务器端语言，如**PHP**时很有用， 使得主体的'PUT'请求难以读取
  Backbone.sync = function(method, model, options) {
    var type = methodMap[method];

    // 默认设置, 除非指定.
    _.defaults(options || (options = {}), {
      emulateHTTP: Backbone.emulateHTTP,
      emulateJSON: Backbone.emulateJSON
    });

    // 默认 JSON-request 设置.
    var params = {type: type, dataType: 'json'};

    // 确保有一个 URL.
    if (!options.url) {
      params.url = _.result(model, 'url') || urlError();
    }

    // 确保我们有正确的请求数据.
    if (options.data == null && model && (method === 'create' || method === 'update' || method === 'patch')) {
      params.contentType = 'application/json';
      params.data = JSON.stringify(options.attrs || model.toJSON(options));
    }

    // 对于老的服务器, 模拟JSON以HTML形式的.
    if (options.emulateJSON) {
      params.contentType = 'application/x-www-form-urlencoded';
      params.data = params.data ? {model: params.data} : {};
    }

    // 对于老的服务器, 模拟 HTTP 通过用 `_method` 方法仿造 HTTP
    // 和一个 `X-HTTP-Method-Override` 头.
    if (options.emulateHTTP && (type === 'PUT' || type === 'DELETE' || type === 'PATCH')) {
      params.type = 'POST';
      if (options.emulateJSON) params.data._method = type;
      var beforeSend = options.beforeSend;
      options.beforeSend = function(xhr) {
        xhr.setRequestHeader('X-HTTP-Method-Override', type);
        if (beforeSend) return beforeSend.apply(this, arguments);
      };
    }

    // 在 non-GET 请求中不传递数据.
    if (params.type !== 'GET' && !options.emulateJSON) {
      params.processData = false;
    }

    // 如果我们发送 `PATCH` 请求,
    // 我们在一个老版本ActiveX默认启动的情况下，使用XHR来取代jQuery方法。
    // 删除它当IE8支持  `PATCH` 的时候.
    if (params.type === 'PATCH' && window.ActiveXObject &&
          !(window.external && window.external.msActiveXFilteringEnabled)) {
      params.xhr = function() {
        return new ActiveXObject("Microsoft.XMLHTTP");
      };
    }

    //提出请求, 允许用户自定义Ajax选项.
    var xhr = options.xhr = Backbone.ajax(_.extend(params, options));
    model.trigger('request', model, xhr, options);
    return xhr;
  };

  // 映射 CRUD 到 HTTP 为了默认的 `Backbone.sync` 执行.
  var methodMap = {
    'create': 'POST',
    'update': 'PUT',
    'patch': 'PATCH',
    'delete': 'DELETE',
    'read': 'GET'
  };

  // 通过 `$` 代理来设置 `Backbone.ajax` 的默认执行.
  // 如果想要使用另一个库那么重载它.
  Backbone.ajax = function() {
    return Backbone.$.ajax.apply(Backbone.$, arguments);
  };

backbone 源码注释

以上为 bockbone 的2个核心的模块，另外模块将在下两篇中简单介绍。

 由于源码过长，请  。这里只为对 backbone 原文注释的简单翻译，具体还需要研究。

对于 backbone 的中文文档，请  这是一个不错的中文文档，各个接口均有详细说明。