聊一聊 Vue 项目的「深链方案」

阅读时间 约 8min. 关注最终方案请点击目录 => 方案输出(掘金老油条第一次发文, 希望得到您的评论)

什么是深链

深链(深度链接, DeepLinking) 在互联网的语境中的含义是指: 使用超链接,链接到一个特定的、通常可搜索的或索引的网站内容 ( 例如: http://example.com/path/page),而不是网站的主页( 例如: http://example.com).

深度链接方案在移动互联网时代发光发热, 有非常多的应用场景, 也已经养成了深刻的用户习惯.

具体的使用场景

  1. 今日 X 条邀请用户链接, 被邀请者点击打开链接就能看到发起的邀请用户姓名
  2. 手机网页点击新闻链接, 直接打开腾X 新闻 App 的新闻页面
  3. 淘 X app 用户商品分享
  • 淘 X 用户 A 分享商品到微 X app, 实际生成的并非 url 而是一段乱码文本
  • 在微 X app发送了乱码文本
  • 淘 X 用户 B 复制这段乱码文本, 并打开淘 X app
  • 直接定位到用户 A 分享的商品

Google 的深链实践

如下 GIF 是谷歌页面状态持久化到 URL 上的演示

  1. 拷贝关键字"字节跳动"搜索结果的第 5 页面容的 url
  2. 重新打开这段 url
  3. 新打开的页面正确现实关键字"字节跳动"与第 5 页搜索结果

深度链接能解决什么问题

  1. 有利于 SEO 优化, 增加网站的曝光率
  2. 有利于传播, 商业价值极高 (在各种营销场景发光发热)
  3. 破除多端壁垒, 增加入口渠道, 商业价值极高 (移动互联网抢占入口时代脱颖而出的方案)
  4. 点击链接, 一键直达, 减少用户操作步骤, 带来非凡用户体验

Deep linking - Wikipedia

深度链接的起源与发展 (知乎介绍文章, 没有深入考究): Universal Link & Deep Link

深度链接在 vue 中的应用与优化

在过去非单页面应用的时代, 单个页面可交互的操作不多, 页面状态的转换基本要靠路由跳转, 重新加载新页面完成. 我们可以认为页面状态和 url 是绑定关系.

而在单页面应用时代, 单页面应用的页面状态随时发生变化的, 但 URL 不是. URL 的状态靠页面逻辑进行维护.

在当下各种单页面应用中, 前端 Router方案就是一种深链方案的实现, 覆盖了大部分应用的场景.

然而有一个问题是 Router 组件没有解决的问题, Router 的颗粒度还是太粗糙了, 只能做到页面组件的级别, 不能做到更精细的控制页面的状态持久化, 并且不能做到页面状态和 url 同步更新.

深度链接在单页面应用语境下的含义必然要有一个更高层次的要求:

  • 超链接打开单页面应用特定路由页面的特定状态
  • 页面 URL 和单页面应用页面状态双向绑定

在 vue 项目中进行抽象过程

实际 Vue 项目开发过程中, 我们或多或少, 都接触过类似的功能开发: 1. 通过跳转到一个新的 url 改变页面的状态 (跳转新路由, 非常普遍的操作) 2. 从 url 获取页面的初始化状态 (获取单据号码) 3. 监听数据变化, 从将页面状态写入 url (这个不常见, 但在有分享要求的页面必然遇到)

我认识到这些特性就是深链方案的实现, 或者深链方案的子集实现. 因此希望对这部分逻辑进行抽象封装. 当前基于 Vue 前端框架进行开发实现, 更快实现, 更契合团队业务.

具体抽象逻辑如下

抽象逻辑初始化页面状态更新URL 更新
文字描述1. 以 URL 数据优先, 初始化 VM页面状态回写 URL从 URL 同步数据到 VM
2. 以 VM 的当前的数据校准 URL
难点1. 避免页面状态和 URL 循环更新
2. 在 url 上保持正确的数据类型
时序图

方案输出

什么是 vue-route-sync-mixin

vue-route-sync-mixin是基于 vue 和 vue-router 的深链方案实现, 它使用一种简单直接的手段完成 URL 和 VM data 之间的 双向绑定, 让它们实时进行同步.

它看起来实在太棒了, 让我们实时同步页面的状态到 URL 上, 让我们可以随时分享关键词 "teeeemoji" 的第四页搜索结果给我们的朋友.

特性

  1. 实现 url & vm data 的双向绑定, 实时同步, 这真是太令人兴奋了
  2. 对遗留项目逻辑和组件的非侵入性, 影响范围极小
  3. 支持所有的 JS 基础数据类型, 以及 Object 以及 Array
  4. 简简单单配置, 快快乐乐使用
  5. 只基于 Vue 和 Vue-router, 难道你不打算使用它们吗?
  6. 单元测试代码覆盖率 > 90%
  7. 更多的新特性期待你的关注与支持 ~

Demo 展示

vue-route-sync-mixinURL 与页面状态双向绑定

方案对比

已经有的稍微成型的方案 vuex-router-sync略微有 vm data 和 url 的双向绑定概念但仅仅完成了数据的初始化部分, 连 vm data 单向同步到 url 的操作都没有完成.

目前并没有更可靠的开源方案可以对比, 因此仅仅选取vuex-router-sync方案进行对比.

对比纬度vue-route-sync-mixinvuex-router-sync
学习成本︎✅ 开箱即用❌ 需要学习 vuex 的 submodule
外部依赖✅vue+vue-router❌vue+vue-router+vuex
代码侵入性✅不污染全局, 不污染 dom 节点❌需要全局配置
可用性✅ 有 demo, 文档可用, 测试数据优秀❌demo 不可用,文档简陋,无测试
原文链接:juejin.im

上一篇:🔥 2020年从基础到进阶,测试你有多了解 JavaScript,刷新你的知识!🚀
下一篇:前端小点:页面table行中checkbox全选

相关推荐

官方社区

扫码加入 JavaScript 社区