怎麼理解前端router 當然是自己實現乙個啦

spa流行的今天不少同學會把前端路由跟後端路由弄混, 莫名其妙的怎麼頁面404啦之類'奇怪'的問題, 其實這就是沒弄清楚前端路由和後端路由的原因(當然你用hash當我沒說).

本文所有前端路由都是spa的情況下, 不存在後端渲染好變數的情況

首先我們看看前後端路由在瀏覽器中是怎麼工作的, 上圖:

後端控制的路由:

我們可以知道後端其實返回的是html字串, 也就是dom節點不出意外的話是確認的. 不管你請求多少次, 結果都是確定的(get 冪等). 所以也就不存在404的情況

前端控制的路由:

如果是spa的話, 我們可以知道不管你請求那個頁面, 在後端處理好的情況下後端都會返回乙個html檔案(所謂單頁的由來), 靜態資源當然也是類似的. 那麼我們可能有點疑問, 比如乙個個人主頁, 如果只返回乙個html檔案的話, 怎麼得到不同的使用者資料呢, 答案就是前端路由(大部分情況, 不排除本地儲存?), js根據不同的路由再向伺服器請求相關資料, 也就是說其實第一次服務端渲染我們的頁面是空的, 後期ajax請求. 所以我們看到很多單頁頁面開啟了首先要loading一會. 就是在向伺服器請求渲染頁面.

後端路由我們暫且不去管它, 我們看看是怎麼實現的:

在非hash的情況下, 前端路由的實現基礎是window.history, 當然我們不用去管它的相容性了, 反正現在大部分瀏覽器能用就是了:

history有個重要的方法就是pushstate, 其它的方法暫時用不到不提, 它的作用呢就是改變瀏覽器位址列裡的位址, 以及在歷史紀錄裡加上一條, 除此以外沒啥別的***了, 比如:

var stateobj = ;
history.pushstate(stateobj, "page 2", "bar.html");

上面的**只會跳到乙個bar.html的位址, 但是頁面本身並未跳轉, 我們不是來講history物件本身的, 有興趣可以自行翻看mdn.

其實參考後端對路由的控制, 我們大略可以想像乙個前端路由所具有的功能:

對路由做出響應

渲染一些事件, 比如beforechange之類的

當然我們現在一切從簡, 上面那些說清楚了起實現無非就是苦力了, 先給大家看看效果吧:

還是有點意思的吧.

下面是html**:

logo panel content

index.js

const $routecontroller = $('a[data-role=custom-history]')
})})

route.js

class route 
window.addeventlistener('popstate', (e) => 
const url = state.url || null
if (url) 
})const $routecontroller = $('a[data-role=custom-history]')
$routecontroller.on('click', e => , '', link)
this.refresh(link)
})}  set (route, handle) 
}  refresh (route) 
}

按我的本意是不想在一篇文章裡貼這麼多**的, 但是因為也不可以直接嵌入jsbin之類的, 方便大家試試看效果, 就放進來把, 因為**比較簡單, 而且深度繫結到了dom上, 就不要嘲笑啦!

怎麼理解前端router 當然是自己實現乙個啦

是誰決定了走redis快取？當然是mybatis啊

MSDN也有寫錯的東西嗎？答案當然是肯定的

美國農業部是如何對抗入侵物種的呢？當然是用統計！

怎麼理解前端router 當然是自己實現乙個啦

是誰決定了走redis快取？當然是mybatis啊

MSDN也有寫錯的東西嗎？答案當然是肯定的

美國農業部是如何對抗入侵物種的呢？當然是用統計！

相關推薦