聊一聊 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-mixin URL 與頁面狀態雙向綁定

方案對比

已經有的稍微成型的方案 vuex-router-sync 略微有 vm data 和 url 的雙向綁定概念但僅僅完成了數據的初始化部分, 連 vm data 單向同步到 url 的操做都沒有完成.

目前並無更可靠的開源方案能夠對比, 所以僅僅選取vuex-router-sync 方案進行對比.

對比緯度	vue-route-sync-mixin	vuex-router-sync
學習成本	︎✅ 開箱即用	❌ 須要學習 vuex 的 submodule
外部依賴	✅vue+vue-router	❌vue+vue-router+vuex
代碼侵入性	✅不污染全局, 不污染 dom 節點	❌須要全局配置
可用性	✅ 有 demo, 文檔可用, 測試數據優秀	❌demo 不可用,文檔簡陋,無測試