iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 7
0
自我挑戰組

不用前端框架 手把手打造基礎SPA網站系列 第 7

[DAY07]SPA路由的應用(下篇)

各位好,延續昨天的內容,今天要說明如何透過監聽事件,來得知網址產生變化後的行為:

我們知道可以用Javascript讓網址產生了變化,但仔細想想,要怎麼知道在網址變化後產生不同的內容呢?答案是我們可以使用監聽事件,網址變化後才做render及其他的行為。以下簡單介紹兩種可以監聽網址變化的方式:

監聽history變化

結合前一天的history.pushState()例子來說明,我們先對瀏覽器增加監聽事件,並且試試增加幾筆歷史紀錄。console執行程式碼如下所示:

//監聽歷史紀錄變化
window.addEventListener('popstate', function(event) {
  console.log("location: " + location.href + ", state: " + JSON.stringify(event.state));
})
//加入歷史紀錄
history.pushState(null,null,'/hello')
history.pushState(null,null,'/world')

在pushState時並沒有看到console有監聽處裡的輸出紀錄,但當切換上/下一頁,可以看到console產生紀錄,這是為什麼呢?查看MDN,其中一段說明:

需要注意的是調用history.pushState()或history.replaceState()不會觸發popstate事件。只有在做出瀏覽器動作時,才會觸發該事件,如用戶點擊瀏覽器的回退按鈕(或者在Javascript代碼中調用history.back()或者history.forward()方法)

原來如此,由於pushState本身並不會觸發事件,只有在瀏覽紀錄變化時才會觸發,所以我們就可以在同一頁增加歷史紀錄,並在切換上/下頁時觸發後進行render。

監聽hash變化

hashchange是針對hash部分變化時的監聽,這邊同樣地在console輸入以下程式碼:

//監聽hash變化
window.addEventListener('hashchange', function(event) {
  console.log("location: " + location.href + ", hash: " + location.hash);
})
//改變hash內容
location.hash='hello'

可以發現在console順利看到兩行紀錄,在hash變化當下即會觸發行為,並同時列入瀏覽紀錄。既然列入瀏覽紀錄,不如試試切換上/下頁吧。

沒問題,一樣監聽的到,這樣後續的render代表也不是問題了。雖然hash方式不像是一般的網址列乾淨漂亮,但使用上較容易達成,因此後面也會用這樣的方式示範。

結尾

我們知道了Javascript可以動態使網址產生變化,也可以使用監聽事件來判斷網址動態變化,並且取得網址資訊,那麼意味著前端也可以處理路由(router)的功能。用MVC開發架構來說明,Controller在前端做路由管理,經由預先設定匹配的路徑(routes),找出對應的View元件產生渲染(render)就可以產生出畫面。目前各家框架都有支援router,例如React的React-router-dom、Vue的Vue Router、Angular的Angular Router等,後續我們也會搭配hashchange事件來實作router。


上一篇
[DAY06]SPA路由的應用(上篇)
下一篇
[DAY08]小試身手-使用history做出SPA
系列文
不用前端框架 手把手打造基礎SPA網站30

尚未有邦友留言

立即登入留言