jiangjiu / blog-md

前端/健身 思考与笔记~

Home Page:https://github.com/jiangjiu/blog-md/issues

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

通过url保存筛选条件的设计实践

jiangjiu opened this issue · comments

commented

通过url保存筛选条件的设计实践

why

接上一篇,routeTo方法其实很大程度上是为这样场景封装的。

cms系统中,一个常见的场景是:
各类筛选条件,点击查询按钮 / 页码,发起请求获得相应数据。

需求:
当页面刷新(粘贴给其他人)或者跳转(点击详情再返回)时,希望能保存当前的筛选状态和页码。

通过url来保存是很常见的做法。
如何在san框架下,每次查询的时候都把筛选条件送到url上?可能会遇到的问题?

设计

无非是几个生命周期的钩子和实例方法的处理。

fetchAndFill函数

  1. 请求api
  2. 拿到response中的数据填充至data/store中

route钩子:

  1. fetch各种资源,地区、下拉选项等(一般都需要缓存起来)
  2. fetchAndFill

attached钩子:

第一次进入页面时,需要把url参数转换成正确的格式,然后设置到相应的data/store中来渲染视图

  1. url上的参数手动渲染到视图(输入框、下拉框、datePicker,页码等)

各种click行为(修改请求参数后,触发搜索的行为):

  1. merge参数(新数据和url/默认值合并)
  2. routeTo到新的url

现实情况

  1. url参数不为string,甚至是Object/Array
  2. url参数并非纯净的筛选条件,还有其他无关参数,而且在进入时可能需要修改url参数,可根据routeTo方法选择强制触发route钩子还是静默不跳转
  3. 各类click行为,merge参数都有特殊情况,要分开处理

...

具体问题具体分析好了。
都可以做,排个期先。

总结

对于这种场景,保存筛选条件会让用户体验更好,操作效率更高高。
试想,如果用户填了很多条件,筛选出来的列表,第三页,点击其中一项进入,然后退回,所有的条件都初始化了,是不是心里会想骂娘。