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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,116评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,656评论 18 139
  • 包金:是通过机械力碾压或高温熔接,将较薄的金或K金金箔包在银或其他种类金属胎体表面的方法。其内在材料并非黄金、铂金...
    喃None阅读 6,347评论 0 0
  • iOS Touch ID 身份认证原文地址:http://www.cnblogs.com/silence-cnbl...
    98eb16019912阅读 385评论 0 0
  • 姓名:刘小琼 公司:宁波大发化纤有限公司 期数:第235期六项精进 日精进打卡第176天 [知~学习] 六项精进 ...
    刘小琼282阅读 104评论 0 0