前端路由實(shí)現(xiàn)-history

YacaToy 發(fā)布于2019-08-22 18:11 / 2197人閱讀

摘要：首發(fā)前端路由實(shí)現(xiàn)了解新增了兩個(gè)和兩個(gè)都接收三個(gè)參數(shù)狀態(tài)對象一個(gè)對象，與用方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)?？紤]到未來可能會(huì)對該方法進(jìn)行修改，傳一個(gè)空字符串會(huì)比較安全。該參數(shù)是可選的不指定的話則為文檔當(dāng)前。

首發(fā)：前端路由實(shí)現(xiàn)（history）

了解

HTML5 history新增了兩個(gè)API:history.pushState和history.replaceState

兩個(gè)API都接收三個(gè)參數(shù)：

狀態(tài)對象（state object）：一個(gè)JavaScript對象，與用pushState()方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)。無論何時(shí)用戶導(dǎo)航到新創(chuàng)建的狀態(tài)，popstate事件都會(huì)被觸發(fā)，并且事件對象的state屬性都包含歷史記錄條目的狀態(tài)對象的拷貝。

標(biāo)題（title）：FireFox瀏覽器目前會(huì)忽略該參數(shù)，雖然以后可能會(huì)用上。考慮到未來可能會(huì)對該方法進(jìn)行修改，傳一個(gè)空字符串會(huì)比較安全?；蛘?，你也可以傳入一個(gè)簡短的標(biāo)題，標(biāo)明將要進(jìn)入的狀態(tài)。

地址（URL）：新的歷史記錄條目的地址。瀏覽器不會(huì)在調(diào)用pushState()方法后加載該地址，但之后，可能會(huì)試圖加載，例如用戶重啟瀏覽器。新的URL不一定是絕對路徑；如果是相對路徑，它將以當(dāng)前URL為基準(zhǔn)；傳入的URL與當(dāng)前URL應(yīng)該是同源的，否則，pushState()會(huì)拋出異常。該參數(shù)是可選的；不指定的話則為文檔當(dāng)前URL。

相同之處是兩個(gè) API 都會(huì)操作瀏覽器的歷史記錄，而不會(huì)引起頁面的刷新。

不同之處在于pushState會(huì)增加一條新的歷史記錄，而replaceState則會(huì)替換當(dāng)前的歷史記錄。

這里大家可以先F12試試，看看地址欄發(fā)生了什么變化

window.history.pushState(null, null, "hell");

window.history.pushState(null, null, "/hell");

window.history.pushState(null, null, "#/hello");

window.history.pushState(null, null, "?name=");

注意：這里的url不支持跨域，否則會(huì)拋出異常

嘗試

index.html




    
    
    
    前端路由實(shí)現(xiàn)
    
    


    
                  
            
                首頁 
                新聞
                關(guān)于

一：簡單開胃菜

router.js

;(function(){      
      history.replaceState(null,null,"");//最開始的狀態(tài)，采用replace直接替換
    $("#router").html("nav1")
    $("a").on("click",function(){
        console.log(this.text)
        var text = this.text;
        $("#router").html(""+ text +"")
        history.pushState(null,null,"#/"+text);
    })    
})()

最簡單的示例，只能監(jiān)聽點(diǎn)擊事件,而瀏覽器中的后、前進(jìn)都不能監(jiān)聽地址欄的改變

二、數(shù)據(jù)狀態(tài)管理

router.js

狀態(tài)版
;(function(){      
      var count = [0,0,0]
      $("#router").html("導(dǎo)航1：
"+count[0]+"導(dǎo)航2：
"+count[1]+"導(dǎo)航3："+count[2])
      history.replaceState(count,null,"");//最開始的狀態(tài)，采用replace直接替換
    
    for(var i = 0 ; i<$("a").length; i++){
        $("a")[i].index = i
        $("a").eq(i).on("click",function(){
            console.log(this.index);
            var index = this.index;
            count[index]++;
            $("#router").html("導(dǎo)航1：
"+count[0]+"導(dǎo)航2：
"+count[1]+"導(dǎo)航3："+count[2])
            history.pushState(count,null,"#/count"+count[index]);//之后的狀態(tài)，需要進(jìn)行保存
        })
    }
        
    
    //監(jiān)聽history其他api導(dǎo)致地址欄url改變事件
    window.addEventListener("popstate",function(e){
        console.log(e.state);
        var state = e.state;
        $("#router").html("導(dǎo)航1：
"+state[0]+"導(dǎo)航2：
"+state[1]+"導(dǎo)航3："+state[2])
        
    })
})()

popstate

當(dāng)活動(dòng)歷史記錄條目更改時(shí)，將觸發(fā)popstate事件。如果被激活的歷史記錄條目是通過對history.pushState（）的調(diào)用創(chuàng)建的，或者受到對history.replaceState（）的調(diào)用的影響，popstate事件的state屬性包含歷史條目的狀態(tài)對象的副本。需要注意的是調(diào)用history.pushState()或history.replaceState()不會(huì)觸發(fā)popstate事件。只有在做出瀏覽器動(dòng)作時(shí)，才會(huì)觸發(fā)該事件，如用戶點(diǎn)擊瀏覽器的回退按鈕（或者在Javascript代碼中調(diào)用history.back()）

三：回歸簡單

router.js

;(function(){      
      
      var url = "nav1";

      history.replaceState(url,null,"");//最開始的狀態(tài)，采用replace直接替換
    $("#router").html(""+url+"")

    $("a").on("click",function(){
        console.log(this.text)
        url = this.text;

        $("#router").html(""+ url +"")
        history.pushState(url,null,"#/"+url);
    })
    window.addEventListener("popstate",function(e){
        console.log(e.state);
        url = e.state
        $("#router").html(""+ url +"")
        
     });     
})()

兜兜轉(zhuǎn)轉(zhuǎn)我們算是回到了起點(diǎn)，但是通過這張圖我們會(huì)發(fā)現(xiàn)頁面點(diǎn)擊刷新按鈕會(huì)有導(dǎo)航和內(nèi)容塊不一致的內(nèi)容，所以我們需要改進(jìn)他，并且監(jiān)聽load事件

改進(jìn)

;(function(){      
      
    $("a").on("click",function(){
        console.log(this.text)
        url = this.text;

        $("#router").html(""+ url +"")
        history.pushState(url,null,"#/"+url);
    })
    window.addEventListener("popstate",function(e){
        console.log(e.state);
        url = e.state
        $("#router").html(""+ url +"")
        
     });
    window.addEventListener("load",function(){
        url = location.hash.slice(2) || "nav1";
        history.replaceState(url,null,"");
        console.log(location.hash);
        $("#router").html(""+ url +"");
    });

      
})()

可以看到我們點(diǎn)擊刷新的時(shí)候?qū)Ш胶蛢?nèi)容區(qū)域一致了。

四：路由頁面引進(jìn)

我們這里還是采用了ajax的load方法

router.js

;(function(){ 


    var router = [
          {
              "path":"index",
              "url":"./main.html"
          },
          {
              "path":"news",
              "url":"./news.html"
          },
          {
              "path":"about",
              "url":"./about.html"
          }
      ];

      //改變頁面
      function display_page(url){
          $("#router").load(url)
      }

    $("a").on("click",function(){
        var path = $(this).data("path");
        console.log(path)
        for(var i in router){
            if(router[i].path == path){
                display_page(router[i].url);
                history.pushState(router[i].url,null,router[i].path);
            }
        }
    })
    window.addEventListener("popstate",function(e){
        var url = e.state;
        display_page(url);
        
    });
    window.addEventListener("load",function(){
        var start = location.href.lastIndexOf("/");

        var path = location.hash.slice(start) || "index";
        console.log(path)

        for(var i in router){//刷新 加載
            console.log(1)
            if(router[i].path == path){
                display_page(router[i].url);    
                history.replaceState(router[i].url,null,path);        
                break;    
            }
            if(i == router.length-1){//重定向
                display_page(router[0].url);    
                history.replaceState(router[i].url,null,router[0].path);    
            }
        }                        
    });

})()

可以看到基本是實(shí)現(xiàn)了history路由功能，但是這里有一個(gè)問題就是刷新后因?yàn)榈刂窓趗rl原因會(huì)報(bào)錯(cuò)，也就是找不到這個(gè)頁面，這是由于刷新的時(shí)候是重載，重新向網(wǎng)站目錄查找文件，而我們當(dāng)前目錄并沒有這個(gè)文件資源所以導(dǎo)致報(bào)錯(cuò)。需要后臺(tái)攔截！ 放棄！

折中

最后我還是屈服于#了

;(function(){      
      
      var router = [
          {
              "path":"index",
              "url":"./main.html"
          },
          {
              "path":"news",
              "url":"./news.html"
          },
          {
              "path":"about",
              "url":"./about.html"
          }
      ];

      //改變頁面
      function display_page(url){
          $("#router").load(url)
      }

    $("a").on("click",function(){
        var path = $(this).data("path");
        console.log(path)
        for(var i in router){
            if(router[i].path == path){
                display_page(router[i].url);
                history.pushState(router[i].url,null,"#/"+router[i].path);
            }
        }
    })
    window.addEventListener("popstate",function(e){
        var url = e.state;
        display_page(url);
        
    });
    window.addEventListener("load",function(){
        var path = location.hash.slice(2) || "/index";
        console.log(path)
        for(var i in router){//刷新 加載
            console.log(1)
            if(router[i].path == path){
                display_page(router[i].url);    
                history.replaceState(router[i].url,null,"#/" + path);        
                break;    
            }
            if(i == router.length-1){//重定向
                display_page(router[0].url);    
                history.replaceState(router[0].url,null,"#/" + router[0].path);    
            }
        }                        
    });

})();

勉強(qiáng)的很呀

代碼： router(history)
演示：演示地址

GPU云服務(wù)器云服務(wù)器前端路由 js前端路由 url路由實(shí)現(xiàn) js前端路由原理

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

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

發(fā)表評論

登陸后可評論

0條評論

YacaToy

男|高級講師

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

TA的文章

電信流量卡套餐介紹（北京電信校園卡）- 月費(fèi)20元 20GB全國流量+30GB定向流量 500分鐘通

閱讀 2952·2021-10-14 09:50
Hostodo十月促銷：$45/年KVM-3GB/30G NVMe/5TB/三個(gè)機(jī)房

閱讀 1266·2021-10-08 10:21
VULTR：充多少送多少(有效期12個(gè)月),19個(gè)機(jī)房KVM月付3.5美元起(支持按小時(shí)計(jì)費(fèi))

閱讀 3701·2021-10-08 10:16
RackNerd：$89/年KVM-4核/8GB/100G SSD/5TB/洛杉磯機(jī)房

閱讀 3107·2021-09-27 14:02
Docker痛失C位，運(yùn)維人該何去何從？

閱讀 3170·2021-09-23 11:21
sharktech(鯊魚機(jī)房)公有云主機(jī)促銷，贈(zèng)送$50，乞丐版$49/月，16核/32G內(nèi)存/4

閱讀 2213·2021-09-07 10:17
如何修改Fiori Launchpad里Tile計(jì)數(shù)調(diào)用的時(shí)間間隔

閱讀 435·2019-08-30 14:00
前端面試之路一(HTML+CSS面試整理)

閱讀 2156·2019-08-29 17:26

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

資訊專欄INFORMATION COLUMN

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

前端路由實(shí)現(xiàn)-history

一：簡單開胃菜

二、數(shù)據(jù)狀態(tài)管理

三：回歸簡單

四：路由頁面引進(jìn)

相關(guān)文章

[實(shí)踐系列]-前端路由

前端路由原理解析和實(shí)現(xiàn)

**前端路由實(shí)現(xiàn)與 react-router 源碼分析**

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

**Web開發(fā)中路由實(shí)現(xiàn)原理**

發(fā)表評論

0條評論

YacaToy

男|高級講師

TA的文章

電信流量卡套餐介紹（北京電信校園卡）- 月費(fèi)20元 20GB全國流量+30GB定向流量 500分鐘通

Hostodo十月促銷：$45/年KVM-3GB/30G NVMe/5TB/三個(gè)機(jī)房

VULTR：充多少送多少(有效期12個(gè)月),19個(gè)機(jī)房KVM月付3.5美元起(支持按小時(shí)計(jì)費(fèi))

RackNerd：$89/年KVM-4核/8GB/100G SSD/5TB/洛杉磯機(jī)房

Docker痛失C位，運(yùn)維人該何去何從？

sharktech(鯊魚機(jī)房)公有云主機(jī)促銷，贈(zèng)送$50，乞丐版$49/月，16核/32G內(nèi)存/4

如何修改Fiori Launchpad里Tile計(jì)數(shù)調(diào)用的時(shí)間間隔

前端面試之路一(HTML+CSS面試整理)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

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

前端路由實(shí)現(xiàn)-history

一：簡單開胃菜

二、數(shù)據(jù)狀態(tài)管理

三：回歸簡單

四：路由頁面引進(jìn)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動(dòng)

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

二、數(shù)據(jù)狀態(tài)管理