当我们在表格、列表中显示大量数据时,如果还需要对数据进行增删改、排序等处理时,直接操纵控件的DOM是非常繁琐和麻烦的事情,考虑一下场景:
1.表格中添加一条记录
2.对表格中的记录的某些字段进行编辑
3.把记录按照Id排序
上面这些操作都是非常常见的操作,但是这其中牵扯到不少琐碎的事情:
1.操纵记录对应的DOM,在表格中创建大量的输入框更改数据,通过表单提交数据。
2.把修改结果发送给后台
3.把DOM进行排序等等操作
这样处理的话,成本会非常大,我们仔细分析一下,从MVC的模式出发:
l DOM 和样式,是View
l 数据源是Model
l 控件的控制逻辑是 Controll
我们说对View的所有的控制都是通过Controll 来进行的,Model的变化引起Control的变化,Control再来控制View 变化,所以我们使用Control来监听View和Model的变化,进而将耦合分离,所以我参照Ext的实现引入 Store类
Store类:
我们先来分析一下Store类需要哪些功能:
1.加载数据:异步加载或则直接加载内存中的数据
2.数据遍历、增删改
3.数据排序:远程排序或者当前页面排序
4.可以加载数组或者树形结构数据
将EXT的Store的实现简化一下,就得到下面的类结构图
使用代理类来加载数据,屏蔽异步加载和内存加载的区别
1.通过Sortable扩展实现本地排序,需要指定字段:
1) sortField: 排序字段,例如id字段、日期字段等
2) sortDirection: 排序方式,升序、降序
2. 通过Proxy来加载数据,需要提供一下方法
1) read(): 读数据,从数据源读数据
2) sync(): 同步数据,跟数据源同步数据
3. 通过AbstractStore 来抽象数据源通用的功能和接口,Store和TreeStore来分别实现操作数组的数据源和操作树形结构的数据源;
4. 通过Binable扩展,来定义使用数据源的控件的扩展。需要实现以下方法:
1) onLoad(): 加载数据
2) onAdd(): 添加数据
3) onRemove(): 移除数据
4) onUpdate(): 更新数据
5) onLocalSort(): 内存中排序
Store和TreeStore的实现比较复杂,不过使用方式比较简单,通过下面的示例即可理解。