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

[jiangjiu]

通过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参数都有特殊情况，要分开处理

...

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

总结

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