Structure

Backbone的整体Structure

webStorm的Structure是个很不错的功能。只是很多源码确实不是仅仅看这个就可以有相对清晰的脉络。但是这里似乎并不包括Backbone。

很清晰的结构，而且最重要的几个工具函数在上一篇已经有了相对深入的解读。
所以接下来我们对Backbone的若干个构造器来个相对粗略的了解。

Event结构

Event是个很重要的部分,不管是Model，Collection还是View，均在原型上继承了它的各种方法。
但是Event如果不论细节，它的实现原理还是非常简单的。
如果上图所示，Event有两个基础方法：evnetApi和trigerApi，其中eventApi在AOP编程思想基础上，构建了4个方法，internalOn,onApi,offApi和onceApi，这里internalOn是队opApi的进一步封装用于设置_listeners和_event以便进行跟踪,本篇主要侧重于结构分析，细节将下一篇开始分解。然后在看trigerApi，在它基础上还有一个triggerEvents。

在这两个基础方法基础上，Event封装如果暴露出来的方法。
eventApi:

on
off
once
listenToOnce
stopListening
ListenTo

onceApi

trigger

Model结构

首先要声明一点，Backbone.Model.extend()返回的是一个构造器。extend整个细节在上一篇已经深入讲过了。child.prototype.constructor被更改返回child以后，整个新的构造器已经被切断了和Backbone.Model的关联。Backbone.Model其实已经可以视为一个生产构造器工厂。

不独是Model，其他的View、Collection其实也是一样。extend使用了闭包将内部变量返回，当Backbone.Model.extend()执行完毕之后，返回值其实同Backbone.Model没有任何关联(除了特别设置的_super_)

这里看看Model生成新的构造器时候干了什么

回顾extend一段代码：

1	child = function(){ return parent.apply(this, arguments); };

这里this指向的是Model，Collection和View之类，以Model为例，它实质上将构造函数copy一个赋值给child了而已。

var Todo = Backbone.Model.extend({
  // Default attributes for the todo item.
  defaults: function() {
    return {
      title: "empty todo...",
      done: false
    };
  },

  // Toggle the `done` state of this todo item.
  toggle: function() {
    this.save({done: !this.get("done")});
  }

});
var test = new Todo();

console.log(test)的结果是：

这里attributes是存放数据的对象，代表的是，一个实例的数据。但是，toggle在原型上了，似乎忽略了一些细节。
回看extend代码，是这里运行导致的：

1	child.prototype = _.create(parent.prototype, protoProps);

Collection结构

实际上Collection同Model的构造环节几乎一模一样，只是构造函数有所不同。
看看构造函数：

  var Collection = Backbone.Collection = function(models, options) {
    //options如果没有传入将初始化为一个空对象
    options || (options = {});
    //options.model若指定则设置实例的model属性为该值
    if (options.model) this.model = options.model;
    //options.comparator若指定则设置实例的comparator属性为该值
    if (options.comparator !== void 0) this.comparator = options.comparator;
    //初始化实例的length，models和_byId属性
    this._reset();
    //this.initialize(arguments) 使用initialize来初始化实例
    this.initialize.apply(this, arguments);
    // 如果models存在
    if (models) this.reset(models, _.extend({silent: true}, options));
};

很明晰的构造函数，大致是分成三步

如果options传入且存在model或者comparator，那么将他们挂到实例属性上，否则设置为空对象。
然后使用先后使用_reset()和initialize来初始化实例属性。
最后一步，如果models传入了，那么调用reset来将models加入到实例的内部数据属性上。

这里稍微有点问题的是第二步和第三步：

_reset()

_reset是原型上自带的一个初始化函数，而initialize默认是空函数，但是可以通过extend中以下代码来设置一个，也就是说是可以配置的。

1	child.prototype = _.create(parent.prototype, protoProps);

reset

reset是另外一个初始化函数，这里贴一下细节：

// When you have more items than you want to add or remove individually,
// 当你有更多数据要逐个添加或者删除
// you can reset the entire set with a new list of models, without firing
// 你可以重置这个实例设置一个新的models列表，不用触发任何add和remove的事件
// any granular `add` or `remove` events. Fires `reset` when finished.
// 添加删除完毕后触发reset事件
// Useful for bulk operations and optimizations.
// 对批量操作和优化来说非常有用
reset: function(models, options) {
  //options存在则深拷贝一份，或设置为{}
  options = options ? _.clone(options) : {};
  //遍历models，切断模型和某个集合的关系。
  for (var i = 0; i < this.models.length; i++) {
    this._removeReference(this.models[i], options);
  }
  //将options的previousModels指向这个models
  options.previousModels = this.models;
  //初始化实例的length，models和_byId属性 ->此时this.models=[];
  this._reset();
  //调用add方法添加models到Collection
  models = this.add(models, _.extend({silent: true}, options));
  //如果options设置了silent=false,手动触发reset事件进行重置
  if (!options.silent) this.trigger('reset', this, options);
  return models;
},

代码已经注释了每一步的逻辑，这里有个需要说的是reset方法本身并不处理数据的增删，而是依赖add方法，add又依赖set方法，基本上set方法可以说是Collection最基础的方法之一了。

add: function(models, options) {
  return this.set(models, _.extend({merge: false}, options, addOptions));
}
...
// Update a collection by `set`-ing a new list of models, adding new ones,
// removing models that are no longer present, and merging models that
// already exist in the collection, as necessary. Similar to **Model#set**,
// the core operation for updating the data contained by the collection.
set: function(models, options) {
      //models为空直接返回false跳出函数
      if (models == null) return;

      // 合并setOptions和options赋值给options
      options = _.extend({}, setOptions, options);

      // 分支1：如果options设置了parse且models不是一个Model实例，那么使用parse方法来解析一下models
      if (options.parse && !this._isModel(models)) {
        models = this.parse(models, options) || [];
      }

      // 分支2：判断一下models是否是数组,如果是数组，返回一个副本，
      // 否则放到一个空素组作为元素并返回数组->统一转换成数组处理
      var singular = !_.isArray(models);
      models = singular ? [models] : models.slice();

      // 设置at 如果指定了at，那么排序就无意义
      // 如果at不为空强制转为数字(正常范围内)
      // 如果at大于数组长度: 设为数组长度
      // 如果at小余0：反向设置索引
      var at = options.at;
      if (at != null) at = +at;
      if (at > this.length) at = this.length;
      if (at < 0) at += this.length + 1;

      // 准备要放数据的设置，添加，合并，移除和modelMap的空数组
      var set = [];
      var toAdd = [];
      var toMerge = [];
      var toRemove = [];
      var modelMap = {};

      // 为各个数据设置引用
      var add = options.add;
      var merge = options.merge;
      var remove = options.remove;

      // 设置排序状态，是否可以排序和排序属性
      var sort = false;
      var sortable = this.comparator && at == null && options.sort !== false;
      var sortAttr = _.isString(this.comparator) ? this.comparator : null;

      // Turn bare objects into model references, and prevent invalid models
      // from being added.
      // 将纯对象变成model引用，防止无效的models被加进来。
      var model, i;
      for (i = 0; i < models.length; i++) {
        model = models[i];

        // If a duplicate is found, prevent it from being added and
        // optionally merge it into the existing model.
        // 如果一个副本已存在，防止被加进来，可选是否合并它到已存在的model
        var existing = this.get(model); //获取已经存在的model数组
        if (existing) {
          // 如果存在，判断options.merge是否存在&&option的merge是否没有加入过
            // 如果是 处理数据压入到toMerge
          if (merge && model !== existing) {
            var attrs = this._isModel(model) ? model.attributes : model;
            if (options.parse) attrs = existing.parse(attrs, options);
            existing.set(attrs, options);
            toMerge.push(existing);
            if (sortable && !sort) sort = existing.hasChanged(sortAttr);
          }
          // 如果存在且modelMap中没有这个cid
            // 那么设置modelMap对应的cid属性值为true，压入existing到set数组
          if (!modelMap[existing.cid]) {
            modelMap[existing.cid] = true;
            set.push(existing);
          }

          // models[i]设为处理后的existing
          models[i] = existing;

        // If this is a new, valid model, push it to the `toAdd` list.
        // 如果是一个新的有效的model，将它压入到toAdd数组
        } else if (add) {
          model = models[i] = this._prepareModel(model, options);
          if (model) {
            toAdd.push(model);
            this._addReference(model, options);
            modelMap[model.cid] = true;
            set.push(model);
          }
        }
      }

      // Remove stale models.
      // 移除过期的models
      if (remove) {
        for (i = 0; i < this.length; i++) {
          model = this.models[i];
          if (!modelMap[model.cid]) toRemove.push(model);
        }
        if (toRemove.length) this._removeModels(toRemove, options);
      }

      // See if sorting is needed, update `length` and splice in new models.
      // 判断是否需要排序，更新length并切片到新的models列表
      var orderChanged = false;
      var replace = !sortable && add && remove;
      if (set.length && replace) {
        orderChanged = this.length !== set.length || _.some(this.models, function(m, index) {
          return m !== set[index];
        });
        this.models.length = 0;
        splice(this.models, set, 0);
        this.length = this.models.length;
      } else if (toAdd.length) {
        if (sortable) sort = true;
        //如果at存在插入到at后面 不然插入到最后
        splice(this.models, toAdd, at == null ? this.length : at);
        this.length = this.models.length;
      }

      // Silently sort the collection if appropriate.
      // 静默排序
      if (sort) this.sort({silent: true});

      // Unless silenced, it's time to fire all appropriate add/sort/update events.
      // 除非设置了sliencd,是时候去触发所有的添加删除排序更新操作
      if (!options.silent) {
        for (i = 0; i < toAdd.length; i++) {
          if (at != null) options.index = at + i;
          model = toAdd[i];
          model.trigger('add', model, this, options);
        }
        if (sort || orderChanged) this.trigger('sort', this, options);
        if (toAdd.length || toRemove.length || toMerge.length) {
          options.changes = {
            added: toAdd,
            removed: toRemove,
            merged: toMerge
          };
          this.trigger('update', this, options);
        }
      }

      // Return the added (or merged) model (or models).
      return singular ? models[0] : models;
    },

set方法实在是个很重量级的方法了，逻辑很长，考虑到的东西非常多。
我们重点说说这个set方法，他的用途是什么呢？我们先翻译一遍这个注释

更新一个集合，通过set一个新的集合列表。添加一个新集合，或者删除不再存在的集合，
同时，合并已经存在的集合——如果需要的话。类似Model的set方法，是collection更新数据的
核心方法。

set方法如果全部记住的话实在太复杂了，一个函数长度达到一百行实际项目中也见到的不多。还是那句，先宏观到微观，步步为营深入它。

准备后面函数需要用到的数据:

line11-23:设置options，然后设置model：

– parse存在且不为模型时,用parse处理model；
– 判断是否是数组,如果是数组返回副本，否则放到一个空素组作为元素并返回数组

line26-50:设置at索引,临时容器数组，和排序属性(状态,能力,属性)

数据操作流程：

将纯对象变成model引用，方式是遍历数组，取出每个属性到以下流程

– 判断是否已有这个数据
— 是->如果设置了合并相关选项，那么进行相关事宜
— 否->进入添加流程

移除过期的models
更新lenght&排序
触发绑定的事件

这样就够了。里面更多细节我认为已经不需要去深究了。阅读代码更多是在读架构。这里如果没有以后发现有补充必要，暂时先跳过了。实际上注释已经加的不少了。

View

view的结构和上面都一样，但是相比上列，它的构造函数实在简洁的不行。

var View = Backbone.View = function(options) {
  this.cid = _.uniqueId('view');
  _.extend(this, _.pick(options, viewOptions));
  this._ensureElement();
  this.initialize.apply(this, arguments);
};

加起来一共也就4行,第一行设置cid；第二行从options中过滤出[‘model’, ‘collectgition’, ‘el’, ‘id’, ‘attributes’, ‘className’, ‘tagName’, ‘events’]数组中的属性；第三行用到了_ensureElement方法，用来确保获取dom(class,id或者选择器字符串),同时这个函数里面还对事件进行了绑定；第四行用来初始化，默认是个空函数，可以自定义。

除此以外View几乎没有其他的API被暴露出来。View的主要的API只有渲染、绑定事件和移除3种。但是简单不代表View不重要，后面文章再深入尝试使用。

History&&Route

说实话History这个模块确实没有想到，可能是因为过去项目尚没有这方面的苛刻要求。
至于在html5的pushState和hashchange事件的基础上进行简单前进后退的实践却确实有不少，但是Histroy这个环节里面的处理方式确实让我始料未及。

这里随便列举一下里面包含的没有想过的：

getSearch:在更多时候个人往往使用location.query来获取这个，但是没想过ie6会存在bug，这里使用正则获取
getHash:个人用的location.hash来获取，没遇到过firefox这个bug过
decodeFragment解码location.pathname这个%25的例外也不知道

至于细节暂时搁置一下。毕竟Backbone我更想看看MVC三个模块之间的数据是怎样的。收拾一下，准备开始实例看数据。

就这样吧。此篇暂结。

Que's Blog

backbone初探(三)-整体结构