移动端列表页操作优化

详情见ppt
移动端列表页操作优化
旧项目代码
code

大纲如下
方案一:PHP + ajax方式
tab切换使用PHP判断
第一页数据PHP获取,输出
当前页面滚动到底部,ajax加载后续数据

方案二:纯ajax方式
tab切换也使用加载
默认加载第一页数据
滚动到屏幕底部,加载下一页

方案三:本地存储缓存列表
同纯ajax加载方式
点击详情页的时候,保存当前状态
屏幕滚动位置
当前列表页数据
当前页码
初始化时,如果本地存储有数据
恢复相应数据(列表页、滚动位置、页码等)
删除本地存储数据

对比总结

优化方案
纯ajax处理
每次ajax请求的时候,将请求参数附加到当前URL上
window.location.replaceState
点击内页,本地存储中存储当前滚动条滚动位置
初始化的时候,读取url中的请求参数进行请求
page如果不是第一页,则合并请求,修改limit
读取本地存储中的滚动位置,js滚动

常见JS写法问题
PHP和JS代码混合
列表页数据统一,不要一部分PHP,一部分JS
在JS中,到处有PHP输出的内容
污染全局,各种变量,函数定义
到处有监听事件的代码,同一个事件可能都有几个地方
JS使用样式定义的class或者ID
代码耦合严重,全都堆积在一起
JS文件未压缩

发表评论