web 开发之 —— 列表的分页

web 开发之 —— 列表的分页

列表的分页是 web 开发中非常常见的一个需求，目前我接触过的分页有一下几类：

1. 静态列表
2. 动态无序列表
3. 动态有序列表

静态列表

常见于企业的时间轴列表中，它的列表内容几乎是不变的，因此使用 page + count 进行分页就可以了

动态无序列表

这里的  无序 指的是这个列表除了  动态的分数 来作为排序规则之外，没有其它的额外规则，比如说不能根据创建时间排序。常见于一些 UGC 产品的首页信息流中，它的列表顺序是根据热度时刻（每 n 秒排序一次，或者通过操作缓存的 score 实时变更）变化的，这种列表的分页在每次获取数据的时候传递一个参数： seenIds 它是一个  你看过的文章的 id 的数组，这样就可以去重了

 

// Js 中我们一般这样处理 seenIds：
const list = []
list.map(_ => _.id).join(',')

 

理论上动态无序列表如果想要根据热度来严格排序，就不能分页了，只能一次取出所有的数据，就像知乎的热榜一样，而知乎的问题页面的答案列表，其实并不需要严格的按照  加权票数来排序的，因此可以使用 seenIds 来获取分页数据

使用 seenIds 获取分页数据有性能瓶颈，我们后面再讲

动态有序列表

这里的  有序 指这个列表可以依据数据库中的某个字段来排序，通常会是  创建时间（或者自增 id ），这种列表涉及的场景最多，我们主要讲这个列表。动态有序列表有两种：

1. 使用 minId 获取动态降序列表分页：

根据某字段从大到小排列，如 QQ空间 的好友动态，是根据创建时间由大到小排列，由于向这个列表中插入的新数据 创建时间 只会更大，因此在分页获取时，只需要传一个 minId 的参数就可以了，告诉后端 你看过的最小的数据的 id，这样就不会出现重复数据

2. 使用 maxId 获取动态升序列表分页：

根据某字段从小到大排列，如简书的 评论列表，根据创建时间由小到大排列，同理认为这种情况下传递一个 maxId 给后端就可以了，但是它有一个问题就是：向列表中插入的新数据会在列表的底部，这个时候假设这样一个场景：

1. 每页获取10条评论
2. 评论共有11条
3. 在只获取了第一条的情况下，创建一条新评论
4. 创建新评论后，不刷新页面，将新的评论 push 到评论列表底部
5. 加载下一页的评论

那么这个时候，你拿不到任何数据，因为你传给服务端的 maxId 是你创建的那条评论的 id，除非你有办法在计算 maxId 的时候，将你自己新加的评论的 id 排除掉，而即使你把自己新加的评论的 id 在计算 maxId 的时候排除掉，你在获取下一页数据的时候，又会把自己新加的评论获取到，这样就 重复 了

因此使用 maxId 获取动态升序列表需要解决两个问题：

1. 不要让自己创建的数据的 id 参与到 maxId 的计算中
2. 在获取到列表数据的时候，要去重