你的位置:首页 > 软件开发 > Java > 列表组件抽象(3)

列表组件抽象(3)

发布时间:2016-09-19 21:00:03
这是我写的关于列表组件的第3篇博客。前面的相关文章有: 1. 列表组件抽象(1)-概述 2. 列表组件抽象(2)-listViewBase说明 本文介绍列表组件中我对分页和排序的抽象思路。 先来说分页,因为之前写过一篇简单封装分页功能pageView.js,这次封装分页时的思路基 ...

列表组件抽象(3)

这是我写的关于列表组件的第3篇博客。前面的相关文章有:

1. 列表组件抽象(1)-概述

2. 列表组件抽象(2)-listViewBase说明

本文介绍列表组件中我对分页和排序的抽象思路。

先来说分页,因为之前写过一篇简单封装分页功能pageView.js,这次封装分页时的思路基本与那篇博客的想法完全一样,只不过考虑到我要写的列表组件,还有其它的分页形式,比如点击加载更多进行翻页,基于浏览器标准的scroll事件进行翻页,基于iscroll插件派发的scroll事件进行分页。于是我在该文的基础上进一步抽象,将分页的一些公共逻辑提炼到一个基类中,仅仅将UI与分页控制的逻辑留给子类实现,这样能够最大程度地简化代码。这个基类的最终实现是:https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/listView/base/pageViewBase.js,它其实就是简单封装分页功能pageView.js这篇博客中pageView.js分离出来的,所以如果想要去了解这个文件的说明,可以访问之前的那篇博客。

当我把分页的一些公共逻辑抽象到pageViewBase之后,在简单封装分页功能pageView.js这篇文章中的pageView.js就会变得特别简洁,我最终的实现是:https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/listView/simplePageView.js。当你查看pageViewBase.js的源码和simplePageView.js的源码,会发现它们合起来就是简单封装分页功能pageView.js里面的pageView.js。

其它的分页组件实现有:

基于浏览器标准的scroll事件进行翻页,https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/listView/scrollPageView.js

基于iscroll插件派发的scroll事件进行分页,https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/listView/iscrollPageView.js

这两个分页组件其实跟simplePageView没什么大的不同,只是分页使用到的事件不同,另外就是由于涉及到滚动翻页,所以还有一个何时进行自动翻页的判断问题,这个判断问题我会在后面的文章介绍滚动分页列表组件的时候再来说明。

再来看排序

相比之下,排序会比分页麻烦一些。做排序管理的目的在于,列表为用户提供数据的时候,为了更有针对性的查看数据,用户一般会希望能够主动地控制列表的排序规则,所以得考虑排序管理的功能,以便列表能够实现自定义的排序。在用户做了排序操作之后,我们需要告诉后台当前排序操作结果对应的排序字段以及每个字段对应的排序值。由于有可能有多列排序的情况,所以传递排序参数时,还得按排序操作时的顺序,组织好排序字段的顺序,以便后台能够按照用户的操作结果,来进行排序处理。类似下面这样的数据结构就可以正确地反映一个排序操作的结果:

[ {  "field":"name",  "value":"asc" }, {  "field":"contact",  "value":"desc" }]

原标题:列表组件抽象(3)

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录