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

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

摘要：首發(fā)前端路由實(shí)現(xiàn)了解新增了兩個(gè)和兩個(gè)都接收三個(gè)參數(shù)狀態(tài)對(duì)象一個(gè)對(duì)象，與用方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)。考慮到未來(lái)可能會(huì)對(duì)該方法進(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)對(duì)象（state object）：一個(gè)JavaScript對(duì)象，與用pushState()方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)。無(wú)論何時(shí)用戶導(dǎo)航到新創(chuàng)建的狀態(tài)，popstate事件都會(huì)被觸發(fā)，并且事件對(duì)象的state屬性都包含歷史記錄條目的狀態(tài)對(duì)象的拷貝。

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

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

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

不同之處在于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)
    
    


    
                  
            
                首頁(yè) 
                新聞
                關(guān)于

一：簡(jiǎn)單開(kāi)胃菜

router.js

;(function(){      
      history.replaceState(null,null,"");//最開(kāi)始的狀態(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)單的示例，只能監(jiān)聽(tīng)點(diǎn)擊事件,而瀏覽器中的后、前進(jìn)都不能監(jiān)聽(tīng)地址欄的改變

二、數(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,"");//最開(kāi)始的狀態(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)聽(tīng)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事件。如果被激活的歷史記錄條目是通過(guò)對(duì)history.pushState（）的調(diào)用創(chuàng)建的，或者受到對(duì)history.replaceState（）的調(diào)用的影響，popstate事件的state屬性包含歷史條目的狀態(tài)對(duì)象的副本。需要注意的是調(diào)用history.pushState()或history.replaceState()不會(huì)觸發(fā)popstate事件。只有在做出瀏覽器動(dòng)作時(shí)，才會(huì)觸發(fā)該事件，如用戶點(diǎn)擊瀏覽器的回退按鈕（或者在Javascript代碼中調(diào)用history.back()）

三：回歸簡(jiǎn)單

router.js

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

      history.replaceState(url,null,"");//最開(kāi)始的狀態(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)，但是通過(guò)這張圖我們會(huì)發(fā)現(xiàn)頁(yè)面點(diǎn)擊刷新按鈕會(huì)有導(dǎo)航和內(nèi)容塊不一致的內(nèi)容，所以我們需要改進(jìn)他，并且監(jiān)聽(tīng)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ū)域一致了。

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

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

router.js

;(function(){ 


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

      //改變頁(yè)面
      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è)問(wèn)題就是刷新后因?yàn)榈刂窓趗rl原因會(huì)報(bào)錯(cuò)，也就是找不到這個(gè)頁(yè)面，這是由于刷新的時(shí)候是重載，重新向網(wǎng)站目錄查找文件，而我們當(dāng)前目錄并沒(méi)有這個(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"
          }
      ];

      //改變頁(yè)面
      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)
演示：演示地址