【再探backbone 02】集合-Collection
前言
昨天我们一起学习了backbone的model,我个人对backbone的熟悉程度提高了,但是也发现一个严重的问题!!!
我平时压根没有用到model这块的东西,事实上我只用到了view,所以昨天学习的效果其实不佳,比起上次对underscore的熟悉,对zepto的熟悉,甚至对fastclick的熟悉
学习效率打了折扣,而且一些地方不明不白,所以,我今天决定将速度放慢,我们学习collection时候先做小例子,争取覆盖关键点,然后再从源码学习,于是开始吧
集合-Collection
实例解析
首先回到我们熟悉的官方例子,其中关于集合的叙述不多,官方的例子流程如下:
① 定义模型Model
这个model很简单,基本没有干什么有意义的事情,验证的事情都没有干,说到这里有一点需要注意:
我们在实际项目中,无论是使用backbone的model或者自己实现了model
都一定要提供validate验证机制,或者验证方法,这个可以让我们的程序更加稳健!
举个例子来说,我们的程序中model会读取来自服务器端的数据,正常情况下是这样的:
{
data1: [{name: '叶小钗', ......},],
data2: ......
}
但是如果有一天我们的服务器出错了,他会返回错误的数据,或者空数据,而前端的代码没有做容错处理的话,这个数据就会被写入localstorage
{
data1: {},
data2: {}
}
这个json对象当然不为空,因为我们model的机制是为空时候会拉取数据,不为空则直接读取localstorage数据,但是事实上,在业务逻辑上这个数据是为空的!!!
所以,我们的程序表现上就是列表为空,读不到数据了,这可以引发很不好的问题
但是如果我们这个model有一个validate方法用于验证model的正确性的话,就可以避免这个问题了!
以我们官方的例子来说,他这个Todo的model事实上应该验证title为空的情况,但他没有这么做,他将数据的验证放到了view里面
createOnEnter: function (e) {
if (e.keyCode != 13) return;
if (!this.input.val()) return; Todos.create({ title: this.input.val() });
this.input.val('');
},
但是如果我们导入model数据的方式不止一种,或者要批量导入时候,view要面临的问题就相对复杂一点了,总而言之Todo模型应该具有validate验证函数
validate函数不返回数据就是验证成功,否则失败是不会执行set方法的,所以,我这里将view中的验证去掉,将验证写入model,我们先走一次流程:
1 AppView会触发createOnEnter事件,本来这里有一个为空验证,被我破坏掉了
createOnEnter: function (e) {
if (e.keyCode != 13) return;
// if (this.input.val() == '') return; Todos.create({ title: this.input.val() });
this.input.val('');
},
2 执行集合的create方法
// 向集合中添加并创建一个模型, 同时将该模型保存到服务器
// 如果是通过数据对象来创建模型, 需要在集合中声明model属性对应的模型类
// 如果在options中声明了wait属性, 则会在服务器创建成功后再将模型添加到集合, 否则先将模型添加到集合, 再保存到服务器(无论保存是否成功)
create: function (model, options) {
var coll = this;
// 定义options对象
options = options ? _.clone(options) : {};
// 通过_prepareModel获取模型类的实例
model = this._prepareModel(model, options);
// 模型创建失败
if (!model)
return false;
// 如果没有声明wait属性, 则通过add方法将模型添加到集合中
if (!options.wait)
coll.add(model, options);
// success存储保存到服务器成功之后的自定义回调函数(通过options.success声明)
var success = options.success;
// 监听模型数据保存成功后的回调函数
options.success = function (nextModel, resp, xhr) {
// 如果声明了wait属性, 则在只有在服务器保存成功后才会将模型添加到集合中
if (options.wait)
coll.add(nextModel, options);
// 如果声明了自定义成功回调, 则执行自定义函数, 否则将默认触发模型的sync事件
if (success) {
success(nextModel, resp);
} else {
nextModel.trigger('sync', model, resp, options);
}
};
// 调用模型的save方法, 将模型数据保存到服务器
model.save(null, options);
return model;
},
3 这里的model需要通过_prepareModel进行处理
// 将模型添加到集合中之前的一些准备工作
// 包括将数据实例化为一个模型对象, 和将集合引用到模型的collection属性
_prepareModel: function (model, options) {
options || (options = {});
// 检查model是否是一个模型对象(即Model类的实例)
if (!(model instanceof Model)) {
// 传入的model是模型数据对象, 而并非模型对象
// 将数据作为参数传递给Model, 以创建一个新的模型对象
var attrs = model;
// 设置模型引用的集合
options.collection = this;
// 将数据转化为模型
model = new this.model(attrs, options);
// 对模型中的数据进行验证
if (!model._validate(model.attributes, options))
model = false;
} else if (!model.collection) {
// 如果传入的是一个模型对象但没有建立与集合的引用, 则设置模型的collection属性为当前集合
model.collection = this;
}
return model;
},
他在13行进行了model实例化,但是并没有执行我们的validate验证,接下来便是执行了一次validate验证,如果验证不通过就完蛋
这里比较烦的是,他这里没有走我们的验证流程,因为在第一个判断就直接跳出来了,而save时候验证了数据有效性,所以数据没有写往localstorage但是页面上却多了一条记录
这里的处理,我其实是认为有问题的,这里未验证其实是因为初始化时候不需要验证,但是我们传一个参数就会发生验证
Todos.create({ title: this.input.val() }, {validate: true});
在这里,我们扯得有点远了,稍微回顾了下昨天学习的model的知识,现在继续向后面走
② 定义collection
有了Todo模型后,于是便定义了一个集合,并且对其进行了实例化
这个例子作为demo没什么问题,但是一般项目中,list不可能像这样全局化,多是与view进行关联,view之间以localstorage进行数据通信
所以跳往 b view时候数据早在a view时候已经准备好,因为我也没有使用backbone的collection进行项目开发,这里不太能看清意图,但是在view里面进行实例化比较靠谱
比如在APPView的initialize中进行实例化,而构造函数以require的方式进行引入
backbone的集合本身方法多源于underscore的集合方法:
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', '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);
};
});
这里依然有几点需要注意:
1 因为这里未与服务器发生交互,用于存储数据的就是localstorage
localStorage: new Backbone.LocalStorage("todos-backbone"),
持久层我们一般会自己实现,与服务器的交互也不会使用backbone本身的,所以model与持久层通信这块可以选择放弃
2 这里TodoList提供了几个方法多用于筛选数据,本身底层是调用underscore的方法筛选/排序自己内部models
但是model里面居然使用了集合中的nextOrder方法获取顺序标识,这里不知道各位怎么看,我反正觉得怪怪的.....
return {
title: "empty todo...",
order: Todos.nextOrder(),
done: false
};
model里面的这个order我个人觉得十分不好,有可能我这个模型还得用于其它集合,而其它集合未必是Todos,但是这里写死了
而且其它集合未必具有nextOrder这个方法,所以官方这个例子真的就只是一个demo啊......
list方面本身没什么难度,根据我们这两天的学习可以做一个总结:
Backbone Model
用于封装数据对象,并且提供数据改变时候的change事件以及数据正确性验证的validate方法
总而言之,这个model就是用于数据操作,并且数据改变时候可以通知到view Backbone Collection
用于封装Model对象,其中提供了很多处理model的方法,比如排序分组什么的
当然,这个只是第一阶段的认识,更多的了解根据学习的深入会逐步展开,而且我感觉要深入学习Backbone还是得好好的用一用
③ 绑定事件
从程序可以看出Todos(实例化的TodoList)只用于了AppView,而这里的AppView有点担当了控制器的意思,
在实例化AppView时,便为Todos注册了三大事件,我们Todolist继承了Events对象,各位不要忘了哦
this.listenTo(Todos, 'add', this.addOne);
this.listenTo(Todos, 'reset', this.addAll);
this.listenTo(Todos, 'all', this.render);
初始化结束后会执行fetch函数获得数据,数据获取结束便又会调用model set方法装入数据,并且触发model的change事件,而导致TodoView的render触发
然后AppView获取TodoView的dom结构后将其dom结构展示到页面即可
this.listenTo(this.model, 'change', this.render);
this.listenTo(this.model, 'destroy', this.remove);
于是我们实例解析便基本结束了,接下来看看源码相关
构造函数
backbone中的集合时模型的有序组合,我们可以在集合上绑定change事件,从而当集合中的模型发生变化时获得通知
集合也可以注册事件,从服务器端得到更新,集合中的模型触发的任何事件都可以在集合上直接触发,我们可以监听集合中模型的变化
首先依然来看看他的初始化的构造函数:
1 var Collection = Backbone.Collection = function (models, options) {
2 options || (options = {});
3 if (options.url) this.url = options.url;
4 if (options.model) this.model = options.model;
5 if (options.comparator !== void 0) this.comparator = options.comparator;
6 this._reset();
7 this.initialize.apply(this, arguments);
8 if (models) this.reset(models, _.extend({ silent: true }, options));
9 };
前几行没什么好说的,其中实例化时会重置集合内部的状态,第一次定义即为初始化,第二次为重置
1 _reset: function () {
2 this.length = 0;
3 this.models = [];
4 this._byId = {};
5 },
让后调用初始化方法initialize,如果这里设置了多个models的话,会执行reset方法,如果指定了models数据, 则调用reset方法将数据添加到集合中
首次调用时设置了silent参数, 因此不会触发"reset"事件
1 reset: function (models, options) {
2 options || (options = {});
3 for (var i = 0, l = this.models.length; i < l; i++) {
4 this._removeReference(this.models[i]);
5 }
6 options.previousModels = this.models;
7 this._reset();
8 this.add(models, _.extend({ silent: true }, options));
9 if (!options.silent) this.trigger('reset', this, options);
10 return this;
11 },
reset用于替换集合中所有模型数据,该操作将删除集合中当前的数据和状态,重新设置models,models一般为二维数据对象
这里会删除原model与集合的映射关系,但是并没有删除model本身
_removeReference: function (model) {
if (this === model.collection) delete model.collection;
model.off('all', this._onModelEvent, this);
},
其实从官网的代码来看,构造函数里面的东西基本没有用到,官网的代码的集合充其量就是一个容器,所以要学习这块还需要更好的例子
结语
这篇博客暂时到这里,我发现没有好的例子学习效率确实不高,下来先写一个例子,再根据例子学习吧
【再探backbone 02】集合-Collection的更多相关文章
- 【再探backbone 01】模型-Model
前言 点保存时候不注意发出来了,有需要的朋友将就看吧,还在更新...... 几个月前学习了一下backbone,这段时间也用了下,感觉之前对backbone的学习很是基础,前几天有个园友问我如何将路由 ...
- backbone库学习-Collection
backbone库的结构: http://www.cnblogs.com/nuysoft/archive/2012/03/19/2404274.html 本文所有例子来自于http://blog.cs ...
- 再探jQuery
再探jQuery 前言:在使用jQuery的时候发现一些知识点记得并不牢固,因此希望通过总结知识点加深对jQuery的应用,也希望和各位博友共同分享. jQuery是一个JavaScript库,它极大 ...
- 18_java之集合Collection
01集合使用的回顾 *A:集合使用的回顾 *a.ArrayList集合存储5个int类型元素 public static void main(String[] args) { ArrayList< ...
- 5、数组和集合--Collection、Map
一.数组:同一个类型数据的集合,其实他也是一个容器 1.数组的好处:可以自动给数组中的元素从0开始编号,方便操作这些数据 2.数组的定义: 在Java中常见: 格式1: 类型 [] 数组名 = ne ...
- 再探java基础——break和continue的用法
再探java基础——break和continue的用法 break break可用于循环和switch...case...语句中. 用于switch...case中: 执行完满足case条件的内容内后 ...
- 集合Collection总览
前言 声明,本文使用的是JDK1.8 从今天开始正式去学习Java基础中最重要的东西--->集合 无论在开发中,在面试中这个知识点都是非常非常重要的,因此,我在此花费的时间也是很多,得参阅挺多的 ...
- 第四节:SignalR灵魂所在Hub模型及再探聊天室样例
一. 整体介绍 本节:开始介绍SignalR另外一种通讯模型Hub(中心模型,或者叫集线器模型),它是一种RPC模式,允许客户端和服务器端各自自定义方法并且相互调用,对开发者来说相当友好. 该节包括的 ...
- java中集合Collection转list对象
参考:java中集合Collection转list对象 首先我的需求是获取到购物车列表,购物车列表是一个Map对象,构造方法获取购物项,这里购物项是Collection对象 // 购物项集合,K商品I ...
随机推荐
- java集合框架之List
一.List: 1. 特有的常见方法:(有个共性特点就是都可以操作角标) (1).添加 void add(int Index , E element):在list的指定位置插入元素 void add ...
- run命令
1.打开IIS %SystemRoot%\system32\inetsrv\iis.msc 2.打开EventView eventvwr 3.打开程序和功能 appwiz.cpl 4.打开intern ...
- Floyd算法的理解
- Dagger2 生成代码学习
接上一篇文章介绍了Dagger2的初步使用,相信刚接触的人会觉得很奇怪,怎么会有很多自己没有定义的代码出现,为什么Component的创建方式是那样的.为了搞清楚这些东西,我们需要查看一下Dagger ...
- TCP/IP之四书五经[转自2003.12程序员]
TCP/IP协议是当前广域网和局域网通用的网络协议,因此,基于TCP/IP的编程就格外重要.从应用上来说,现在直接利用C层次Socket API进行TCP/IP编程的人确实越来越少了,各种现成的框架( ...
- 寻找Fragment的替代品的尝试
自从Android在3.0推出Fragment之后,现在很多应用的设计都是建立在Fragment的基础上,像是多个tab切换这种需求,就可以使用Fragment,并且Fragment提供了一系列生命周 ...
- 基于jQuery的一个简单的图片查看器
项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...
- MVC 框架搭建
1.0 初步建立目录和项目 2.0 设置层之间的引用 IRepository引用 ModelRepository引用 Model,IRepositoryIServices引用 Model,IRepos ...
- C#异步调用的方法
最经公司工作需要调用一个外部的webservice,同时要将传出的数据进行保存,以自己以前的习惯,就打算逐步操作,失败啊,完全没考虑过用户体验效果,在同事指点下,意识到使用异步调用的好处,随便将自己找 ...
- C# 通过GPS坐标,计算两点之间距离
之前在网上有很多这种计算的,但是代码都不怎么全.经过多方打听查询.找到完整代码.现将代码共享给大家. 有需要者觉得有用者欢迎使用.觉得用或简单的高手,请绕. public static double ...