Web Vue 评论系统前端实现(2)
仿 instgram 的评论方式
跟主流的确实不一样.
分页评论的问题
没有缓存
当前 comment api 没缓存分页.当有新的 comment posted 后,分页全部发生了变化.
//提交前,page=2 还没取,应该是[4,5,6],此时有人提交2个commment
[1,2,3],[4,5,6]...
//提交后, page=2变化了,而且有重复内容[2,3,4]
[n,n,1],[2,3,4]...
如果完全不缓存,简单的办法是去重
:
[n,m,1],[2,3,4]:
本地已有[1,2,3],page2拿到[2,3,4],判2-3是重复的.仅将4添加: [1,2,3,4]
[n,m,n],[n,n,n],[1,2,3]
回复期间新增了6个,自己的提交的在page1,拉page2看不到自己的新评论.
所以要拉所有最新的.
[n,n,n],[n,m,n],[1,2,3]
这种可以看到.
需要取前 n 个 page。取多少page
,和评论期间可能新增多少新评论和 page 大小有关
可以直接增加 limit,减少取 page 的访问.比如 limit=10.
page=1,limit=10:
[n,m,n,n,n,n,1,2,3,4]
已有数据添加1之前的所有新数据:
[1,2,3] -> [n,m,n,n,n,n,1,2,3]
page怎么取?
新增了6个, page/3 = 2 page增加2, 从page4开始;
如果新增2个? page+1开始取,同时去重;
如果新增的超过limit?这个就麻烦了..p
如果么有新评论?ok先不管
[1,2,3,4,5,6,7,8,9,10]
缓存
- 按 page 缓存.
第1次访问page缓存. 假设子评论10个page:
user1 访问page1,cache load;
user2 访问page2-10, cache all loaded
user2 提交评论. cache page1-4 updated.
postcomment 时,更新