前端随笔0：URL与状态的双向绑定

记录一些最近写前端的思考总结，也算是给自己的技术随笔开个篇

在接触以 React，Vue 为代表的工程化前端框架前，我还是一个拿着 jQuery 手撸特效和手写 CSS 的切图仔，捣鼓 Vue 时接触到的一个非常核心的概念就叫做“双向绑定”，这里的双向绑定指的是视图（template）与状态（state）的双向绑定，状态的变化直接触发组件的渲染，不需要手写控制和更新渲染的 js 函数了（没错这是我之前干的事）

这篇要讨论的这个概念，应该也不是我发明的新词，叫 URL 与状态的双向绑定，字面意思来说，在刷新页面或跳转页面时解析 URL 并对应更新组件的状态，在组件状态更新时同步更新 URL，为什么要引入这种机制嘞？

比如我目前在做的一个项目是一个管理后台，在一个非常典型的日志查询场景，可以选择和调整很多查询参数进行查询，但是由此就引出了一个问题，如果按照目前 Vue 双向绑定的写法，变更查询组件的状态（选择或输入参数等）不会反映到 URL 上，这时如果我需要将一组查询好的结果分享给同事，只能复制当前的页面链接给他，让他进入后再选择和我一样的查询参数，可以看到有一部分没有包含在 URL 中的信息其实是被丢弃掉了，另外在进行站内跳转时也无法跳转的更“具体”，只能跳转到 router 定义的页面在初始渲染完成后的样子

这就引入URL与状态双向绑定的好处了，比如我在日志查询页面中选择查询方法为 POST ，等级为 ERROR 的日志，监听组件对应的状态变更，并更新URL（假设为?method=POST&level=ERROR），同理适用于其他的变更

当然做到监听组件状态更新 URL 只是做到了双向绑定的一向，要想让你的同事真的恢复到你当前页面的状态还需要实现另一向的操作，即将 URL 解析到组件状态，往往是在页面组件 mount 时解析当前的 URL 路径与QueryString，将其中的参数解析出来并与组件的状态进行同步，事实上就实现了

URL ? 组件状态 ? 组件视图

带给用户的直观体验就是视图与 URL 的绑定，这时如果你将浏览器中的链接粘贴给同事，他在打开时就可以复现你当前的组件状态，进而得到你目前的视图界面了

总结一下，实现 URL 与状态的双向绑定其实就是需要实现

• 监听组件状态更新URL（通过 watch 或 $emit 等手段）

• 将 URL 解析到组件状态（如在组件 mount 时将 URL 参数解析并赋值给组件的 data 状态）

带来的好处有

• 分享链接可以让访问者完整复现当前页面的状态（至少是复现到你希望的粒度）

• 站内跳转可以随心所欲跳转到任何可能的状态（而且仅通过 URL 这种 Web 原生的方式，而非使用 Vuex 之类的状态管理）

这样的功能业界其实也已经有过一些开源库能够自动实现组件状态与 URL 查询参数的绑定，奈何自动化的方案给出的 URL 都太过冗余，而我在命名方面又是一个强迫症，秉承着奥卡姆剃刀原则，我还是手动实现了每个状态的绑定与解析，虽然较为机械化，但是往往就是在这种时候，我可以听着音乐哼着歌，以近乎肌肉记忆的状态有节律地敲打键盘，把这些不需要思考的代码写好

比起调 infra 里那些摇摆不定，反复横跳，此起彼伏的 bug，写前端，调界面逐渐变成了一件放松身心的事~

写于 22 年 4 月