App分页探讨
作为一名App开发者,数据分页是很常见的需求,但在实现过程中多多少少都会存在一些问题,遇到次数多了,我就想,别人是怎么做的?有没有完美的分页方式?在研究了一些资料后,对分页有了更全面的认识。基于不同的场景,做法各不相同,各有优点和缺点,不存在完美的分页。
分页划分
先从交互设计的角度来看,在实现时首先要确定采取哪种方式,主要是Web分页和流式分页的区别:
Web分页
传统的Web分页-
用户知道自己要浏览的内容有多少,浏览的进度如何,这样的可以对浏览目标有比较清楚的预期。
-
可以快速跳转到特定页,方便快速定位。
- 制造停顿,带来节奏感。
流式分页
典型的流式分页- 与Web分页相反,没有界限,用户被动接受信息。
在实际生产中往往采用折中的方式,比如自动加载几次后让用户手动点击“更多”继续加载,或者在信息流中间增加用于定位的页码;
再从开发的角度来看,可以分为前端分页与后端分页,这个确定主要工作由哪边来做。
-
前端分页,乃是通过接口一次性获取列表的所有内容,在前端根据页面大小和数据总量计算页数,在客户端处理分页。
-
后端分页,就是前端通过接口拉取数据,前端不处理分页。
前端分页不多谈,因为实现比较直接,一次性拉取所有数据,然后前端控制数据的展现量。这里着重探讨后端分页。上文已经探讨了交互分类的区别,第一种传统的Web式分页,是Web开发中常用的分页方式,实现上是Web分页接口,通过页码进行分页,一般来说,就是根据pageIndex和pageSize来进行分页。第二种流式分页,相对于Web来说,是因为App的交互方式,下拉刷新,向上滚动加载,一般并没有Web上显式的页码,在Web上清晰的页码,在App上往往是不可见的。这种方式为流式分页。流式是UI交互的分类,实现起来可以多种多样,可以采用Web式分页接口来实现。
如果流式分页上采用Web分页接口会有什么问题呢?
-
重复数据问题:当客户端查询第一页后,此时数据库在最开始新增一条数据,此时查询第二页,就会出现重复数据,第一页最后一条数据会作为第二页第一条数据返回。当然,优化方案可以通过客户端去重,但是还是有很多问题,比如新增了一整页数据,那么去重后就没有新数据了。
-
数据丢失问题:当客户端查询某一页后,此时数据库在该页或该页之前的页面中删除一条数据,此时查询下一页,就会出现漏查数据。
-
偏移过大查询效率低:MySQL的limit在数据量过大的时候性能会急剧下降。
由此可见,传统的Web分页概念在App端并不适合,可是在传统后端提供查询接口的时候,很多情况还是采用其所熟知的Web分页方式。
那么,如何解决Web分页的这些问题?
-
cursor游标式分页:原理是根据xid(最好是排序依据,如时间、自增长的id),传入cursor查询
select * from table where xid > cursor limit pageSize
缺点就是需要xid有序,也就是说排序机制不能太过于复杂。
以上为研究网络上一些资料后的总结,那么,看起来可行的解决方法就是游标式分页,当分页数据需要增删改时该如何处理?
-
在任意位置增加一条:add接口返回数据对象,本地插入;
-
在任意位置删除一条:delete接口删除,本地删除;
-
修改任意位置的一条:update接口更新后拿到数据对象,本地替换;
到目前为止,看起来都不错,暂不考虑多个客户端同一个账号做不同修改的同步。让我们更深一步,增删改会对原有其它数据产生影响时该如何处理?当然,全部重新拉取不少不可用,只是十分粗暴。
-
在任意位置增加一条,已有数据发生变化:add接口增加一条,本地插入,另外返回一个更新数组,本地替换更新过的数据
-
在任意位置删除一条,已有数据发生变化:delete接口删除,本地删除,另外接口返回一个更新数组,本地替换更新过的数据
-
修改任意位置的一条,已有数据发生变化:update接口更新后拿到数据对象,本地替换,另外接口返回一个更新数组,本地替换更新过的数据
再更进一步,增删改会对原有数据的排序产生影响,这种情况出现在数据为多层时,例如数据按某个属性分组,增删改某个数据会对整个分组的排序产生影响,这时该如何处理?貌似到这里开发会有强烈的冲动全部重新拉取,不过如果多做一点,也可以避免。
-
方案一:在本地使用算法重新排序,前端需要增加排序实现,实现起来相对简单。
-
方案二:后端给出分组变化数组,后端要对比,前端要合并修改,实现繁复。
接口实现的可能形式
-
查询 /Query?cursor=xxxx&limit=10
返回 array<object> results
-
新增 /Add?object=object
object newObject
array<object> changed
-
删除 /Delete?xid=xxx
array<object> changed
-
更新 /Update?object=object
object newObject
array<object> changed