自己動(dòng)手實(shí)現(xiàn)一個(gè)前端路由

longshengwang 發(fā)布于2019-08-22 18:22 / 1557人閱讀

摘要：監(jiān)聽的變動(dòng)省略其他代碼省略其他代碼這樣，我們就初步實(shí)現(xiàn)了一個(gè)路由，那么接下來，我們來看看路由怎么實(shí)現(xiàn)。

前言

用過現(xiàn)代前端框架的同學(xué)，對(duì)前端路由一定不陌生, vue, react, angular 都有自己的 router, 那么你對(duì) router 的工作原理了解嗎？
如果還不了解, 那么請(qǐng)跟我一起來手寫一個(gè)簡(jiǎn)單的前端路由, 順便了解一下.

實(shí)現(xiàn)路由的2種方式

hash模式

history模式

缺點(diǎn):

hash：丑(地址欄要多一個(gè)#), 某些特殊場(chǎng)景有坑 ,如微信支付回調(diào)

history: 兼容性較差, 直接訪問會(huì)400 ,除非后端或者服務(wù)器有做處理

基本原理

hash是基于監(jiān)聽 hashchange 事件實(shí)現(xiàn)的，history 是基于 pushState 和 popState,

實(shí)現(xiàn)

由于history兼容性較差，而且實(shí)現(xiàn)方式基本沒多大區(qū)別，本文就以hash模式來實(shí)現(xiàn)，history的實(shí)現(xiàn)方式只實(shí)現(xiàn)不同的部分。



    
    Document

以上就是hash模式的最簡(jiǎn)單實(shí)現(xiàn)，查看控制臺(tái)，可以看到不管是點(diǎn)擊跳轉(zhuǎn)按鈕，還是點(diǎn)擊瀏覽器的前進(jìn)／后退按鈕，控制臺(tái)都會(huì)輸出當(dāng)前頁面對(duì)應(yīng)的 "url"，有了 "url"，我們就可以對(duì)內(nèi)容做條件渲染了

我們?cè)谏厦娴拇a的基礎(chǔ)上，稍作修改一下，增加2個(gè)div,一個(gè)是login,一個(gè)是index



    
    Document

這樣，我們就能根據(jù)不同的hash地址，顯示不同的內(nèi)容，是不是已經(jīng)有點(diǎn)路由的味道了呢？但是目前還無法傳參，傳參的方式有很多種，最常見最通俗的，應(yīng)該是query string 了吧？ query string 其實(shí)很簡(jiǎn)單，解析url即可。

    // 監(jiān)聽hash的變動(dòng)
    window.addEventListener("hashchange", function (e) {
        let url = location.hash.slice(1) || "index"
        // 解析url
        let questionIndex = url.indexOf("?")
        let path, query
        if(questionIndex >= 0){
            path = url.substr(0,questionIndex)
            let queryString = url.substr(questionIndex+1)
            let queryArray = queryString.split("&")
            let queryObject = {}
            queryArray.map(str => {
                let equalIndex = str.indexOf("=")
                if(equalIndex > 0) {
                    let key = str.substr(0,equalIndex)
                    let value = str.substr(equalIndex+1)
                    queryObject[key] = value
                }
            })
            query = queryObject
        } else {
            path = url
            query = {}
        }
        
        console.log("接收到的參數(shù)", query)
        setVisible(path)
    })

這樣，我們就能獲取到URL上傳遞的query string , 還順便解決了傳參會(huì)導(dǎo)致路由解析不正確的bug.

傳參其實(shí)還有個(gè)更簡(jiǎn)單的方法，就是設(shè)置一個(gè)全局變量 param，然后在需要傳值的時(shí)候，直接對(duì)param 賦值即可

    // 設(shè)置一個(gè)全局變量
    var param = {}

    // 頁面跳轉(zhuǎn)
    // 這個(gè)多了個(gè)參數(shù) args
    function hashPush(url, args) {
        location.hash = "#" + url
        param = args
    }

由于是全局變量，所以可以在任意位置使用 param，不過這樣直接使用全局變量的方式，也有它的弱點(diǎn)，就是點(diǎn)擊返回按鈕的時(shí)候無法保存變量，而query string 因?yàn)槭窃?url 里面的，所以返回的時(shí)候，可以拿到上個(gè)頁面的 query string,
那我們有沒有辦法讓全局變量的方式也能保存上一個(gè)頁面的參數(shù)呢？我們來稍微修改一下代碼

    // 設(shè)置一個(gè)全局變量
    var param = {}

    // 頁面跳轉(zhuǎn)
    // 這個(gè)多了個(gè)參數(shù) args
    function hashPush(url, args) {
        location.hash = "#" + url
        // 如果有傳args參數(shù)，就在 param 對(duì)象下建一個(gè)名字跟當(dāng)前url一樣的對(duì)象，并把a(bǔ)rgs賦值給它
        if(args) {
            param[url] = args
        }
    }

那我們?cè)?hashchange 的時(shí)候，可以根據(jù)url來定位該頁面的參數(shù)。

    // 監(jiān)聽hash的變動(dòng)
    window.addEventListener("hashchange", function (e) {
        // 省略其他代碼
        args = param[path] || {}
        // 省略其他代碼
    })

這樣，我們就初步實(shí)現(xiàn)了一個(gè)hash路由，那么接下來，我們來看看history路由怎么實(shí)現(xiàn)。

history 模式

history 模式主要依靠調(diào)用 history.pushState() 方法和監(jiān)聽 popstate 事件。

history.pushState() 方法接收3個(gè)參數(shù)：

要傳遞的數(shù)據(jù)（參數(shù)）

給頁面設(shè)置的標(biāo)題（兼容性差，幾乎沒用）

url

我們看看調(diào)用實(shí)例

    history.pushState({id:1}, "我是頁面標(biāo)題", url)

需要注意的是 pushState 的時(shí)候，并不會(huì)觸發(fā) popstate 事件，只有在前進(jìn)后退的時(shí)候，才會(huì)觸發(fā)，所以 pushState 之后，需要手動(dòng)去設(shè)置頁面的相關(guān)狀態(tài)。如上面的例子，我們需要這樣做

    history.pushState({id:1}, "我是頁面標(biāo)題", url)
    setVisible(url)

然后監(jiān)聽 popstate 事件，捕獲前進(jìn)／后退

 window.addEventListener("popstate",function (e) {
     // e.state 就是你 pushState 的時(shí)候，傳的第一個(gè)參數(shù)
     let state = e.state || {}  
     let url = state.target.location.pathName
     //  根據(jù)參數(shù) 做一些其他操作
  })

最后

本文最終實(shí)現(xiàn)代碼已經(jīng)放在 github上，想要直接看效果的同學(xué)，可以上去直接copy，運(yùn)行。

如果覺得本文對(duì)您有用，請(qǐng)給本文的github加個(gè)star,萬分感謝

另外，github上還有其他一些關(guān)于前端的教程和組件，有興趣的童鞋可以看看，你們的支持就是我最大的動(dòng)力。

云服務(wù)器 GPU云服務(wù)器自己動(dòng)手寫爬蟲自己動(dòng)手寫網(wǎng)路爬蟲自己動(dòng)手寫網(wǎng)絡(luò)爬蟲自己動(dòng)手寫開發(fā)工具

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/95794.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

longshengwang

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

我的秋招復(fù)盤——回顧2022秋招經(jīng)歷

閱讀 2593·2021-11-22 09:34
測(cè)試?yán)碚摚?）軟件測(cè)試四大測(cè)試過程

閱讀 3573·2021-11-15 11:37
PayPal新注冊(cè)用戶領(lǐng)取10美元購物券，單筆交易滿20美元即可使用

閱讀 2380·2021-09-13 10:37
軟件測(cè)試崗位工作，到底可以做多久？

閱讀 2142·2021-09-04 16:40
畢設(shè)教程：基于嵌入式Linux和Web實(shí)現(xiàn)的視頻監(jiān)控系統(tǒng)(Arm/樹莓派/jetson)

閱讀 1646·2021-09-02 15:40
bowl - 輕量級(jí)的前端資源緩存加載器

閱讀 2485·2019-08-30 13:14
簡(jiǎn)單說 CSS中的mask—好好利用mask-image

閱讀 3360·2019-08-29 13:42
小程序練習(xí)，仿bilibili小程序

閱讀 1960·2019-08-29 13:02

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

自己動(dòng)手實(shí)現(xiàn)一個(gè)前端路由

相關(guān)文章