作为一名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
网友评论