自己對路由的一些理解

路由的話可以分為前端路由和後端路由,前端路由一般來說是spa應用後端的話是一般是ssr應用

後端路由的話又可以叫做服務端裡有,因為對於伺服器來說,當接收客戶端傳送來的http請求時,會根據所請求的相應url來找到相應的對映函式,然後執行這個函式,並將函式的返回值傳送給客戶端,對於簡單的靜態資源服務,可以認為,所有的url對映函式就是乙個檔案的讀取操作,對於動態的資源,對映函式可能是乙個資料庫讀取操作,也可能是進行一些資料的處理等~ . 然後根據這些讀取的資料,在伺服器端使用相應的模板對頁面進行渲染後在返回渲染完畢的頁面.

前端路由的話路由的對映通常是進行一些dom的顯示和隱藏操作

後端路由的優點:安全性好,有利於seo搜尋引擎的優化,

後端路由的缺點:會加大伺服器的壓力,不利於使用者的體驗,會造成**冗餘

前端路由的優點:前端路由在訪問乙個新頁面的時候僅僅是更換了一下路徑,沒有網路延遲對於使用者體驗來說會有相當大的提公升

前端路由的缺點:使用瀏覽器的前進後推鍵時會重新傳送請求,沒有合理的利用快取,同樣的不利於seo搜尋引擎

前端路由的實現方式有兩種分別是hash和history api

這裡history是需要後端做對應的路由配置的

然後我們可以使用hashchange事件來監聽hash的變化.並且通過history.length能看到路由的總條數

//首先我們要有個html

class router 
//監聽方法
watchhash() else if (hashstr == "luyou2") else }}
}

history這個物件哎html5的時候加入了兩個api分別是history.pushstate()和history.repalcestate()這兩個可以在不重新整理的情況下操作瀏覽器的歷史記錄,唯一不同的是,前者是新增的乙個歷史記錄後者是直接替換當前的歷史記錄

window.history.pushstate(state,title,url) //state：需要儲存的資料，這個資料在觸發popstate事件時，可以在event.state裡獲取 //title：標題，基本沒用，一般傳null //url：設定新的歷史紀錄的url。新的url與當前url的origin必須是一樣的，否則會丟擲錯誤。url可以時絕對路徑，也可以是相對路徑。 window.history.replacestate(state,title,url)

//與pushstate 基本相同，但她是修改當前歷史紀錄，而 pushstate 是建立新的歷史紀錄

window.history.back()//後退
window.history.forward()//前進
window.history.go(1)//前進一部，-2回退兩不，window.history.length可以檢視當前歷史堆疊中頁面的數量

每當同乙個文件的瀏覽歷史（即history）出現變化時，就會觸發popstate事件，只要我們監聽事件即可

window.addeventlistener('popstate', function(event) );

當然僅僅呼叫pushstate方法或replacestate方法，並不會觸發該事件，只有使用者點選瀏覽器後退和前進按鈕時，或者使用js呼叫back、forward、go方法時才會觸發

我們可以建立2個全新的事件，事件名為pushstate和replacestate，我們就可以在全域性監聽

//建立全域性事件
var _wr = function(type) ;
};//重寫方法
history.pushstate = _wr('pushstate');
history.replacestate = _wr('replacestate');
//實現監聽
window.addeventlistener('replacestate', function(e) );
window.addeventlistener('pushstate', function(e) );

自己對路由的一些理解

對路由的理解

ThreadLocal的一些自己的理解

自己關於遞迴的一些理解

自己對路由的一些理解

對路由的理解

ThreadLocal的一些自己的理解

自己關於遞迴的一些理解

相關推薦