backbone库学习-Collection
backbone库的结构：
http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html
本文所有例子来自于http://blog.csdn.net/eagle_110119/article/details/8842007
1.1 collection结构
var Collection = Backbone.Collection = function(models, options){} var setOptions = {add: true, remove: true, merge: true}; var addOptions = {add: true, remove: false}; _.extend(Collection.prototype, Events,{}) var methods = []; _.each(methods, function(method){}) var attributeMethods = ['groupBy', 'countBy', 'sortBy']; _.each(attributeMethods, function(method){})
先看第一个例子1.1.1
// 定义模型类 var Book = Backbone.Model.extend({ defaults : { name : '' } }); // 定义集合类 var BookList = Backbone.Collection.extend({ model : Book }); // 创建一系列模型对象 var book1 = new Book({ name : 'Effective Java中文版(第2版)' }); var book2 = new Book({ name : 'JAVA核心技术卷II：高级特性（原书第8版）' }); var book3 = new Book({ name : '精通Hibernate：Java对象持久化技术详解（第2版）' }); // 创建集合对象 var books = new BookList([book1, book2, book3]);
先看第一部分1.1.1-1
// 定义集合类 var BookList = Backbone.Collection.extend({ model : Book });
找到Backbone.Collection.extend()方法
Model.extend = Collection.extend = Router.extend = View.extend = History.extend = extend; var Collection = Backbone.Collection = function(models, options) {}
extend方法
var extend = function(protoProps, staticProps) {//第一个参数传入子类原型上，第二个参数传入子类构造器中 var parent = this; var child; // The constructor function for the new subclass is either defined by you // (the "constructor" property in your `extend` definition), or defaulted // by us to simply call the parent's constructor. if (protoProps && _.has(protoProps, 'constructor')) {//检查protoProps是否拥有constructor属性(不考虑原型上) child = protoProps.constructor; } else { child = function(){ return parent.apply(this, arguments); };//借用构造器，this指向model构造器,让子类实例化时，可以获取父类构造器的成员 } // Add static properties to the constructor function, if supplied. _.extend(child, parent, staticProps);//将父类和staticProps上的属性成员统统传给child的构造器上 // Set the prototype chain to inherit from `parent`, without calling // `parent`'s constructor function. var Surrogate = function(){ this.constructor = child; }; Surrogate.prototype = parent.prototype; child.prototype = new Surrogate;//临时构造器的方式完成继承，Surrogate属于中间件，子类实例修改不会影响父类原型，可以让子类实例获取父类原型上的成员 // Add prototype properties (instance properties) to the subclass, // if supplied. if (protoProps) _.extend(child.prototype, protoProps);//将自定义信息绑定到子类原型上 // Set a convenience property in case the parent's prototype is needed // later. child.__super__ = parent.prototype; //_super_属性方便子类直接访问父类原型 return child; //返回子类构造器 };
跟Backbone.model.extend一样，这里就不过多解释了。例子中的{model:Book}将被绑定到Collection的原型上，实例化Collection后，即可调用。
继续看例子1.1.1-2
// 创建集合对象 var books = new BookList([book1]);
我们不用之前的例子，我先来个简单的。
看一下构造器
var Collection = Backbone.Collection = function(models, options) { options || (options = {}); if (options.model) this.model = options.model; if (options.comparator !== void 0) this.comparator = options.comparator; this._reset();//原型上的_reset方法，第一次初始化，以后就是重置 this.initialize.apply(this, arguments);//空的init方法，用的时候，可以自己修改 if (models) this.reset(models, _.extend({silent: true}, options)); };
实例化时，有三个方法，分别是_reset，initialize和reset三个方法。先看_reset方法
// 重置 _reset: function() { this.length = 0; this.models = []; this._byId = {}; }
算是重置，也算是初始化。
initialize方法
initialize: function(){}
用的时候，需要我们自己去定义。
最后看一下reset方法
reset: function(models, options) { options || (options = {}); for (var i = 0, l = this.models.length; i < l; i++) { this._removeReference(this.models[i]); } options.previousModels = this.models; this._reset();//重置 this.add(models, _.extend({silent: true}, options)); if (!options.silent) this.trigger('reset', this, options); return this; },
reset这个方法关联到两个方法_removeReference和add方法。
先看下_removeReference方法
_removeReference: function(model) { if (this === model.collection) delete model.collection; model.off('all', this._onModelEvent, this); }
如果this.models存在model实例，这个方法主要是实现清除工作，删除掉model的collection属性(后面会提)，去掉绑定的事件。
再看一下add方法
add: function(models, options) { return this.set(models, _.extend({merge: false}, options, addOptions)); }
这里给出addOptions的初始值：
var addOptions = {add: true, remove: false};
进入set方法
set: function(models, options) { options = _.defaults({}, options, setOptions);//如果options的某个参数名对应的参数值为空，则将setOptions对应参数名的参数值赋给它 if (options.parse) models = this.parse(models, options);//没重写之前，只返回models if (!_.isArray(models)) models = models ? [models] : [];//转成数组 var i, l, model, attrs, existing, sort; var at = options.at; var sortable = this.comparator && (at == null) && options.sort !== false; var sortAttr = _.isString(this.comparator) ? this.comparator : null; var toAdd = [], toRemove = [], modelMap = {}; var add = options.add, merge = options.merge, remove = options.remove;//默认情况 true false false var order = !sortable && add && remove ? [] : false; // Turn bare objects into model references, and prevent invalid models // from being added. for (i = 0, l = models.length; i < l; i++) { if (!(model = this._prepareModel(attrs = models[i], options))) continue;//主要是将Model实例绑定上collection属性 // If a duplicate is found, prevent it from being added and // optionally merge it into the existing model. if (existing = this.get(model)) { //对象队列，在初始化没有任何信息 if (remove) modelMap[existing.cid] = true; if (merge) { attrs = attrs === model ? model.attributes : options._attrs; existing.set(attrs, options); if (sortable && !sort && existing.hasChanged(sortAttr)) sort = true; } // This is a new model, push it to the `toAdd` list. } else if (add) { toAdd.push(model);//将model实例推进数组中，保存 // Listen to added models' events, and index models for lookup by // `id` and by `cid`. model.on('all', this._onModelEvent, this);//绑定all事件，这样是执行两遍all事件 this._byId[model.cid] = model;//用cid与对应的mode实例关联 if (model.id != null) this._byId[model.id] = model;//有id的话，再用id与对应的model实例关联 } if (order) order.push(existing || model);//初始化时order为false delete options._attrs; } // Remove nonexistent models if appropriate. if (remove) {//初始化时remove为false for (i = 0, l = this.length; i < l; ++i) { if (!modelMap[(model = this.models[i]).cid]) toRemove.push(model); } if (toRemove.length) this.remove(toRemove, options); } // See if sorting is needed, update `length` and splice in new models. if (toAdd.length || (order && order.length)) { if (sortable) sort = true; this.length += toAdd.length;//length保存model实例的个数 if (at != null) { splice.apply(this.models, [at, 0].concat(toAdd)); } else { if (order) this.models.length = 0; push.apply(this.models, order || toAdd);//实例上创建models属性，存放toAdd } } // Silently sort the collection if appropriate. if (sort) this.sort({silent: true});//默认sort为false if (options.silent) return this; // Trigger `add` events. for (i = 0, l = toAdd.length; i < l; i++) { (model = toAdd[i]).trigger('add', model, this, options); } // Trigger `sort` if the collection was sorted. if (sort || (order && order.length)) this.trigger('sort', this, options); return this; }
重要的部分在for循环这块，详细看一下for部分
for (i = 0, l = models.length; i < l; i++) { if (!(model = this._prepareModel(attrs = models[i], options))) continue;//主要是将Model实例绑定上collection属性 // If a duplicate is found, prevent it from being added and // optionally merge it into the existing model. if (existing = this.get(model)) { //对象队列，在初始化没有任何信息 if (remove) modelMap[existing.cid] = true; if (merge) { attrs = attrs === model ? model.attributes : options._attrs; existing.set(attrs, options); if (sortable && !sort && existing.hasChanged(sortAttr)) sort = true; } // This is a new model, push it to the `toAdd` list. } else if (add) { toAdd.push(model);//将model实例推进数组中，保存 // Listen to added models' events, and index models for lookup by // `id` and by `cid`. model.on('all', this._onModelEvent, this);//绑定all事件，这样是执行两遍all事件 this._byId[model.cid] = model;//用cid与对应的mode实例关联 if (model.id != null) this._byId[model.id] = model;//有id的话，再用id与对应的model实例关联 } if (order) order.push(existing || model);//初始化时order为false delete options._attrs; }
先看一下this._prepareModel方法
_prepareModel: function(attrs, options) { //这里判断attrs，如果是Model创建的，那直接在attrs上加上collection即可 if (attrs instanceof Model) {//instanceof 能在实例的原型对象链中找到该构造函数的prototype属性所指向的原型对象,attrs实际上通过Model构造器new出来的 if (!attrs.collection) attrs.collection = this;//让实例的collection保存Collection的n实例化对象 return attrs; } //如果不是，那系统会自动实例化一次，并为Model实例绑上collection属性 options || (options = {}); options.collection = this; //在options中也加入这个属性,这里为什么要在options里面加入该属性，其实是因为this的问题，此时this是Collection的实例， //一旦new过Model后，Model里的this就是model了，这里设置options.collection主要是让其传入Model中，实例化的时候，便于绑定，这样model实例也拥有collection属性 var model = new this.model(attrs, options);//调用model的构造器，实例化对象 根据具体信息创建model实例 if (!model.validationError) return model; this.trigger('invalid', this, attrs, options);//触发invalid事件 return false;//返回不是Model实例 }
if后面的continue，表示代码始终往下走，实例化对Model对象，为每个实例化对象添加collection属性。
再看一下get方法
get: function(obj) { if (obj == null) return void 0; return this._byId[obj.id] || this._byId[obj.cid] || this._byId[obj]; }
因为this._byId在_reset方法中初始化中是空对象，默认get取出undefined，将加工好的每个model实例放入toAdd数组中，为所有model绑定all事件，触发函数是this._onModeEvent()，最后用cid与每个对应的model实例关联。
ok，回到reset方法
if (!options.silent) this.trigger('reset', this, options);
因为_.extend({silent: true}, options)，这个reset事件没有触发。返回this，以上完成collection的实例化。
1.2 往collection添加model
集合提供了3个方法允许我们动态地向集合中动态插入模型：
add()：向集合中的指定位置插入模型，如果没有指定位置，默认追加到集合尾部
push()：将模型追加到集合尾部（与add方法的实现相同）
unshift()：将模型插入到集合头部
1.2.1 add
先看下例子1.2.1-1：
var Book = Backbone.Model.extend({ defaults : { name : '', price : 0 } }); // 创建集合对象 var books = new Backbone.Collection(null, { model : Book }); books.add({ name : '构建高性能Web站点', price : 56.30 });
注意这个collection实例化的方式，它传入的参数是null和{model:Book}，和之前的定义比较一下
var books = new Backbone.Collection(null, { model : Book }); var BookList = Backbone.Collection.extend({ model : Book });
collection需要有一个与之关联的model，这两种方式都可以将model与collection关联，这里有疑问为什么一定要呢？原因在这(_prepareModel方法中)
var model = new this.model(attrs, options);//调用model的构造器，实例化对象
如果不将model与collection相互关联这个this.model将没有值，上述的两种方法都可以是现实this.model指向Model构造器。
看一下add方法
add: function(models, options) { return this.set(models, _.extend({merge: false}, options, addOptions)); }
之前将实例化collection的时候描述过了将add的信息传入set方法中。我们看一下最后一部分的set代码：
if (sort) this.sort({silent: true});//默认sort为false if (options.silent) return this; // Trigger `add` events. for (i = 0, l = toAdd.length; i < l; i++) {//处理toAdd数组的model实例 (model = toAdd[i]).trigger('add', model, this, options);//触发add事件 } // Trigger `sort` if the collection was sorted. if (sort || (order && order.length)) this.trigger('sort', this, options); return this;
添加会触发add的监听事件。这个事件需要你自己定义，事件名为add。库会在这个时候从toAdd中依次取model实例来触发add事件。
add执行添加部分的代码
if (order) this.models.length = 0; push.apply(this.models, order || toAdd);//实例上创建models属性，存放toAdd。原型add所走的
1.2.2 push
例子1.2.2-1：(跟1.2.1-1差不多)
books.push({ name : '深入分析Java Web技术内幕', price : 51.80 });
看一下原型上的push方法
push: function(model, options) { model = this._prepareModel(model, options); this.add(model, _.extend({at: this.length}, options)); return model; }
push方法调用了add和_prepareModel方法，这里我们大概总结下，_prepareModel的作用
_prepareModel：主要将你传入的对象类似{name:xxx,price:xxxx}的形式，制作成Model的实例，这里我们需要强调一点就是，你可以将这些对象先传入Model的构造器生成model实例，再传入collection里来，也可以将这些对象直接传入collection中，collection会检测这写对象是否为Model的实例，如果不是会调用Model构造器，根据这个信息生成Model的实例。最后为每一个model添加collection属性
1.2.3 unshift
先上例子
books.unshift({ name : '编写高质量代码:Web前端开发修炼之道', price : 36.80 });
看一下unshift方法
unshift: function(model, options) { model = this._prepareModel(model, options); this.add(model, _.extend({at: 0}, options));//注意这个at的值，这个值会影响插入的顺序 return model;//返回插入的model实例 }
at值的影响在set方法中的体现在这：
if (at != null) { splice.apply(this.models, [at, 0].concat(toAdd));//使用splice方法完成插入，因为apply的参数需要一个数组，at值将决定在哪插入 } else { if (order) this.models.length = 0; push.apply(this.models, order || toAdd);//实例上创建models属性，存放toAdd }
可以清楚的看到当我们使用unshift时，传入的at为0，也就是在数组的第一个位置插入，刚才的push则是传递的this.length,这个this.length哪里定义的，就在set方法中
this.length += toAdd.length;//length保存model实例的个数
这样push操作，就是在数组的最后一位插入。而add底层就是数组的原生push，也是在最后添加。
1.3 从collection中删除model
集合类提供了3个方法用于从集合中移除模型对象，分别是：
remove()：从集合中移除一个或多个指定的模型对象
pop()：移除集合尾部的一个模型对象
shift()：移除集合头部的一个模型对象
1.3.1 remove
先看下例子1.3.1-1
// 定义模型类 var Book = Backbone.Model.extend({ defaults : { name : '', price : 0 } }); // 定义初始化数据 var data = [{ name : '构建高性能Web站点', price : 56.30 }, { name : '深入分析Java Web技术内幕', price : 51.80 }, { name : '编写高质量代码:Web前端开发修炼之道', price : 36.80 }, { name : '基于MVC的JavaScript Web富应用开发', price : 42.50 }, { name : 'RESTful Web Services Cookbook中文版', price : 44.30 }] // 创建集合对象 var books = new Backbone.Collection(data, { model : Book }); books.remove(books.models[2]); books.pop(); books.shift(); // 在控制台输出集合中的模型列表 console.dir(books.models);
先看remove方法。
remove: function(models, options) { //console.log(models); //console.log(options); models = _.isArray(models) ? models.slice() : [models];//将models这个类数组集合转成数组 options || (options = {}); var i, l, index, model; for (i = 0, l = models.length; i < l; i++) { model = this.get(models[i]);//根据cid取到该对象 if (!model) continue; delete this._byId[model.id];//删除id关联的信息 delete this._byId[model.cid];//删除cid关联的信息 index = this.indexOf(model);//返回要删除Model所在的位置 this.models.splice(index, 1);//获取该位置删除该Model实例 this.length--;//长度减一 if (!options.silent) {//如果设置了silent属性，将不执行remove回调。 options.index = index; model.trigger('remove', model, this, options); } this._removeReference(model);//删除该Model实例拥有的collection属性 } return this; }
看一下_removeReference()方法
_removeReference: function(model) { if (this === model.collection) delete model.collection;//删除掉对collection属性，即对 model.off('all', this._onModelEvent, this);//去除all监听事件 }
1.3.2 pop
将例子修改下1.3.2-1
books.pop();
看一下pop
pop: function(options) { var model = this.at(this.length - 1);//调用原型上的at方法,返回最后一个成员 console.log(model); this.remove(model, options);//调用remove方法，删除最后一个 return model; }
再来看下at方法
at: function(index) { return this.models[index];//类数组拥有这个属性 }
pop实际上还是调用的remove方法，通过at方法找到最后一个成员将其删除
1.3.3 shift
将例子修改一下1.3.3-1
books.shift();
看一下shift方法
shift: function(options) { var model = this.at(0);//取到第一个成员 this.remove(model, options);//执行remove方法 return model; }
跟pop很类似。
1.4 在集合中查找模型
Collection定义了一系列用于快速从集合中查找我们想要的模型的方法，包括：
get()：根据模型的唯一标识（id）查找模型对象
getByCid()：根据模型的cid查找模型对象
at()：查找集合中指定位置的模型对象
where()：根据数据对集合的模型进行筛选
1.4.1 get
先看个例子1.4.1-1
// 定义模型类 var Book = Backbone.Model.extend({ defaults : { name : '', price : 0 } }); // 定义初始化数据 var data = [{ id : 1001, name : '构建高性能Web站点', price : 56.30 }, { id : 1002, name : '深入分析Java Web技术内幕', price : 51.80 }, { id : 1003, name : '编写高质量代码:Web前端开发修炼之道', price : 36.80 }, { id : 1004, name : '基于MVC的JavaScript Web富应用开发', price : 42.50 }, { id : 1005, name : 'RESTful Web Services Cookbook中文版', price : 44.30 }] // 创建集合对象 var books = new Backbone.Collection(data, { model : Book }); // 根据id和cid查找模型对象 var book1 = books.get(1001); var book2 = books.getByCid('c2'); // 在控制台输出模型 console.dir(book1); console.dir(book2);
我们一个个来，先看get
var book1 = books.get(1001);
下面是get代码：
get: function(obj) { if (obj == null) return void 0; return this._byId[obj.id] || this._byId[obj.cid] || this._byId[obj]; }
这段代码，我们之前有见过。在我们创建Model实例的时候，给每个Model实例配上一个id，我们可以根据这个id来查找。这个this._byId设定值的过程，是在set方法中完成的，如果有记不清的可以翻看之前的set方法部分。
1.4.2 getByCid
例子：
var book2 = books.getByCid('c2');
关于cid的生成，我们在Model部分已经说过了。大家查看underscore的uniqueId方法,这里我的源码中没有getByCid的方法，这段我们先滤过。
1.4.3 at
例子
var book3 = books.at(1);
at方法之前也已经说过，它传入的参数是数组的索引。还是看一下源码吧
at: function(index) { return this.models[index];//类数组拥有这个属性 }
1.4.4 where
例子：
var book4 = books.where({ price : 51.80 });
我们来看一下where方法
where: function(attrs, first) { if (_.isEmpty(attrs)) return first ? void 0 : []; //检测attrs是否为空 return this[first ? 'find' : 'filter'](function(model) {//这里调用的filter是underscore里的方法 for (var key in attrs) { if (attrs[key] !== model.get(key)) return false; } return true; }); }
这里调用的是this.filter方法，但是原型上并没有很明显的命名出来，那它是在声明的呢？看代码：
var methods = ['forEach', 'each', 'map', 'collect', 'reduce', 'foldl', 'inject', 'reduceRight', 'foldr', 'find', 'detect', 'filter', 'select', 'reject', 'every', 'all', 'some', 'any', 'include', 'contains', 'invoke', 'max', 'min', 'toArray', 'size', 'first', 'head', 'take', 'initial', 'rest', 'tail', 'drop', 'last', 'without', 'difference', 'indexOf', 'shuffle', 'lastIndexOf', 'isEmpty', 'chain']; // Mix in each Underscore method as a proxy to `Collection#models`. _.each(methods, function(method) { Collection.prototype[method] = function() { var args = slice.call(arguments); args.unshift(this.models); return _[method].apply(_, args);//调用underscore相应的方法执行 }; });
看一下underscore的each方法
var each = _.each = _.forEach = function(obj, iterator, context) { if (obj == null) return; if (nativeForEach && obj.forEach === nativeForEach) { //是否支持原生forEach方法 obj.forEach(iterator, context);//采用原生的forEach方法 } else if (obj.length === +obj.length) {//如果obj是数组或者是类数组 for (var i = 0, length = obj.length; i < length; i++) { if (iterator.call(context, obj[i], i, obj) === breaker) return;//让数组中的成员作为参数传入过滤器中运行 } } else { var keys = _.keys(obj);//返回值集合，考虑对象的情况 for (var i = 0, length = keys.length; i < length; i++) { if (iterator.call(context, obj[keys[i]], keys[i], obj) === breaker) return;//让对象中的成员作为参数传入过滤器中运行 } } }
我们简单理解下，_.each帮助了Collection.prototype绑定一系列方法，当Collection的实例需要调用这些方法时，注意看_.each的返回值是_[method].apply(_,args)，表示调用的实际是underscore.js中对应的方法。注意之前还有一段代码
args.unshift(this.models);
将上下文也传给underscore，这样运行不会出错。
这样，分析where方法实则变得非常简单，核心也就是那个筛选器了。我们看一下
function(model) {//这里调用的filter是underscore里的方法 for (var key in attrs) { if (attrs[key] !== model.get(key)) return false; } return true; }
通过get方法，去匹配model实例集中相应属性的值，相同则返回true，在underscore中，filter方法会将其记录，存放入数组中，返回给你。
1.5 自动排序
在backbone集合对象中，为我们提供了实时排序，当任何模型对象被插入到集合中时，都会按照预定的规则放到对应的位置。
例子：
// 定义模型类 var Book = Backbone.Model.extend({ defaults : { name : '', price : 0 } }); // 创建集合对象 var books = new Backbone.Collection(null, { model : Book, comparator : function(m1, m2) { var price1 = m1.get('price'); var price2 = m2.get('price'); if(price1 > price2) { return 1; } else { return 0; } } }); books.add({ name : '构建高性能Web站点', price : 56.30 }); books.push({ name : '深入分析Java Web技术内幕', price : 51.80 }); books.unshift({ name : '编写高质量代码:Web前端开发修炼之道', price : 36.80 }); books.push({ name : '基于MVC的JavaScript Web富应用开发', price : 42.50 }, { at : 1 }); books.unshift({ name : 'RESTful Web Services Cookbook中文版', price : 44.30 }, { at : 2 }); // 在控制台输出集合中的模型列表 console.dir(books.models);
注意实例化Collection时，传入的参数
// 创建集合对象 var books = new Backbone.Collection(null, { model : Book, comparator : function(m1, m2) { var price1 = m1.get('price'); var price2 = m2.get('price'); if(price1 > price2) { return 1; } else { return 0; } } });
在我们分析comparator之前，我们回头看一下Collection的构造器
var Collection = Backbone.Collection = function(models, options) { options || (options = {}); if (options.model) this.model = options.model; if (options.comparator !== void 0) this.comparator = options.comparator; this._reset();//原型上的_reset方法，第一次初始化，以后就是重置 this.initialize.apply(this, arguments);//空的init方法，用的时候，可以自己修改 if (models) this.reset(models, _.extend({silent: true}, options));//models没有值，使用options的model };
如果我们将comparator:function(){}传入构造器中，这里的options.comparator将不等于undefined。将实例的comparator属性指向该方法。
在set方法中，找到相关内容：
var sortable = this.comparator && (at == null) && options.sort !== false; var sortAttr = _.isString(this.comparator) ? this.comparator : null;
例子中用了如add，push，unshift等方法。之前我们分析发现像push和unshift方法使用时，都传递一个at值，前者为数组长度减一，后者为0.其实这里的代码存在问题，导致排序不成功。为了实现效果，我们先修改一下。
var sortable = this.comparator && options.sort !== false; var sortAttr = _.isFunction(this.comparator) ? this.comparator : null;
只要设置了comparator，就不需要管是通过如何方式加入model的sortable就一直会是true。
if (sortable) sort = true;//将sort置为true
继续
if (sort) this.sort({silent: true});//默认sort为false
我们看一下sort方法
sort: function(options) { if (!this.comparator) throw new Error('Cannot sort a set without a comparator'); options || (options = {}); // Run sort based on type of `comparator`. if (_.isString(this.comparator) || this.comparator.length === 1) {//判断是否是函数 this.models = this.sortBy(this.comparator, this); } else { this.models.sort(_.bind(this.comparator, this));//调用数组原生的sort进行排序 } if (!options.silent) this.trigger('sort', this, options);//系统设置了silent，这里不触发sort事件 return this; }
底层看来是调用了数组的sort方法进行排序，如果设置了silent将不会触发sort事件。细心的朋友会看到_.bind这个方法。我们来简单看一下：
_.bind = function(func, context) { var args, bound; if (nativeBind && func.bind === nativeBind) return nativeBind.apply(func, slice.call(arguments, 1));//是否支持原生bind if (!_.isFunction(func)) throw new TypeError; args = slice.call(arguments, 2); return bound = function() { if (!(this instanceof bound)) return func.apply(context, args.concat(slice.call(arguments)));//判断调用者是否是function，如果不是调用传入的上下文context执行func ctor.prototype = func.prototype;//如果是的话,缺少上下文。 var self = new ctor;//将self的原型指向func的原型 ctor.prototype = null;//清空ctor构造器的原型 var result = func.apply(self, args.concat(slice.call(arguments)));//调用func，此时func的上下文是self，那self的空间又可以扩展到func的原型。 if (Object(result) === result) return result;//只有当是字符串是才返回匹配结果，这里也存在问题。 return self; }; };
这个_.bind提供了三种方式
1.第一种：使用原生bind，不清楚的朋友可以查询一下API
2.第二种：传入的信息拥有上下文的，采用func.apply(context)调用
3.第三种：如果没有上下文，我们需要创建上下文。文中给出了一个很不错的创建上下文的方式，这里源代码的判断写的并不是非常好，最后的判断有问题，应该修改一下：
return result
直接返回result，不用判断了。这是本人的一点想法，有问题或者不同意见的，大家一起讨论。
1.6 从服务器获取集合数据
backbone库的Collection提供几种方式与服务器交互
fetch()：用于从服务器接口获取集合的初始化数据，覆盖或追加到集合列表中
create()：在集合中创建一个新的模型，并将其同步到服务器
1.6.1 fetch
例子1.6.1-1
// 定义模型类 var Book = Backbone.Model.extend({ defaults : { name : '', price : 0 } }); // 定义集合类 var BookList = Backbone.Collection.extend({ model : Book, url : '/service' }); // 创建集合对象, 并从服务器同步初始化数据 var books = new BookList(); books.fetch({ success: function(collection, resp) { // 同步成功后在控制台输出集合中的模型列表 console.dir(collection.models); } });
看一下fetch方法：
fetch: function(options) { options = options ? _.clone(options) : {}; if (options.parse === void 0) options.parse = true;//将options.parse设置为true var success = options.success;//获取自定义的success方法，正确回调 var collection = this; options.success = function(resp) { var method = options.reset ? 'reset' : 'set'; collection[method](resp, options); if (success) success(collection, resp, options); collection.trigger('sync', collection, resp, options); }; wrapError(this, options);//绑定错误回调 return this.sync('read', this, options);//调用sync方法，参数名read }
这里可以看出，系统在内部，将我们自定义的success封装在系统定义的success方法中，因为系统还要在成功回调之后，触发一个叫sync的监听事件。
进入sync方法看一下：
sync: function() { return Backbone.sync.apply(this, arguments);//调用Backbone.sync，上下文为this }
好吧，到了Backbone.sync，这个方法之前model中分析过了。通过第三方ajax发送请求，这个方法主要是组装了请求内容。
1.6.2 create
看下例子1.6.2-1
var books = new BookList(); // 创建一个模型 books.create({ name : 'Thinking in Java', price : 395.70 }, { success : function(model, resp) { // 添加成功后, 在控制台输出集合中的模型列表 console.dir(books.models); } });
看一下create方法：
save: function(key, val, options) { var attrs, method, xhr, attributes = this.attributes; // Handle both `"key", value` and `{key: value}` -style arguments. if (key == null || typeof key === 'object') { attrs = key; options = val; } else { (attrs = {})[key] = val; } options = _.extend({validate: true}, options);//这个代码会导致bug // If we're not waiting and attributes exist, save acts as // `set(attr).save(null, opts)` with validation. Otherwise, check if // the model will be valid when the attributes, if any, are set. if (attrs && !options.wait) { if (!this.set(attrs, options)) return false; } else { if (!this._validate(attrs, options)) return false;//验证通过了 } // Set temporary attributes if `{wait: true}`. if (attrs && options.wait) { this.attributes = _.extend({}, attributes, attrs); } // After a successful server-side save, the client is (optionally) // updated with the server-side state. if (options.parse === void 0) options.parse = true; var model = this; var success = options.success;//你可以在save方法的时候写成功回调 options.success = function(resp) {//返回成功的回调 // Ensure attributes are restored during synchronous saves. model.attributes = attributes; var serverAttrs = model.parse(resp, options); if (options.wait) serverAttrs = _.extend(attrs || {}, serverAttrs); if (_.isObject(serverAttrs) && !model.set(serverAttrs, options)) { return false; } if (success) success(model, resp, options); model.trigger('sync', model, resp, options); }; wrapError(this, options);//将options绑定一个error方法 method = this.isNew() ? 'create' : (options.patch ? 'patch' : 'update');//判断id，如果没有则新建，如果有再判断options.patch，改为更新 if (method === 'patch') options.attrs = attrs; xhr = this.sync(method, this, options); // Restore attributes. if (attrs && options.wait) this.attributes = attributes; return xhr; }
save方法的大致工作流程是这样的，检测是否model实例需要验证，如果有验证，进行验证。封装成功回调和错误回调穿件xhr对象，调用原型的sync方法调用第三方插件发送请求。这里我们分析下源码中关于验证的一点问题。之前model的验证，我们稍作修改达到要求，但是这个直接就报错了
这个例子中我们确实没有为Model添加validate，那系统到底怎么会在没有validate的情况下，尝试去执行validate呢？
问题就在save方法里：
options = _.extend({validate: true}, options);//这个代码会导致bug
这里会莫名其妙的给options加上validate等于true，然后在_validate方法中
if(!this.validate && !options.validate) return true//没有验证，直接通过//这里有修改过
这段代码，会直接通过。可能之前修改Model的时候，源代码是||，这里我们将validate:true这段代码注释掉。则代码不报错了。但是又有一个问题。如果例子1.6.2-1修改为
例子1.6.2-2
var books = new BookList(); // 创建一个模型 books.create({ name : 'Thinking in Java', price : 395.70 }, { success : function(model, resp) { // 添加成功后, 在控制台输出集合中的模型列表 console.dir(books.models); }, validate: function(data){ if(data.price > 0){ return 'hello world'; } } });
代码不会报错，但是终端不会显示hello world，细细一想，其实我们没有自定义那个invalid事件，但是问题来，如此定义，我们无法直接获取到我们想要监听的那个model实例对象，所以你也就无从绑定起。这也是backbone需要优化的地方。实际运作中，大家根据需求自行添加吧，这里方法很多，就不细说了。
1.7 将数据批量同步到服务器
Backbone中集合提供了数据同步和创建的方法与服务器进行交互，但实际上这可能并不能满足我们的需求，backbone学习的作者给出了一些自定义的批量方法。
1.7.1 createAll
先看例子：
// 定义模型类 var Book = Backbone.Model.extend({ defaults : { name : '', price : 0 } }); // 定义BookList类 var BookList = Backbone.Collection.extend({ model : Book, url : '/service', // 将集合中所有的模型id连接为一个字符串并返回 getIds : function() { return _(this.models).map(function(model) { return model.id; }).join(','); }, // 将集合中所有模型提交到服务器接口 createAll : function(options) { return Backbone.sync.call(this, 'create', this, options); }, // 修改集合中的所有模型数据 updateAll : function(options) { return Backbone.sync.call(this, 'update', this, options); }, // 删除集合中所有的模型 deleteAll : function(options) { var result = Backbone.sync.call(this, 'delete', this, _.extend({ url : this.url + '/' + this.getIds() }, options)); this.remove(this.models); return result; } }); // 创建集合对象 var books = new BookList(); // 当集合触发reset事件时, 对数据进行批量同步 books.on('reset', function() { books.createAll(); books.updateAll(); books.deleteAll(); }); // 从服务器接口同步默认数据 books.fetch();
看一下，自定义方法绑定在collection原型上，实例可以调用。自定义方法基本都调用Backbone.sync方法，这是封装params的方法。如果客户端数据发生改变时，向服务器发出同步请求(更新，删除，修改)。以此达到同步目的。另外就是，自定义绑定到collection实例上，实例包含了很多个model实例，也就达到了批量的作用。
内容不多，时间刚好，以上是我的一点读码体会，如有错误，请指出，大家共通学习。
