摘要：開發(fā)中路由實(shí)現(xiàn)原理開發(fā)中路由實(shí)現(xiàn)原理服務(wù)端路由路由前端路由實(shí)現(xiàn)比較參考什么是路由根據(jù)不同的地址，展示不同的頁面或者更新頁面局部視圖服務(wù)端路由服務(wù)器端路由管理，常見的開發(fā)模式是前端根據(jù)的不同，使用發(fā)起異步請(qǐng)求，獲取不同的頁面資源，前端獲取資源

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

服務(wù)端路由

Hash路由

History

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

參考:

什么是路由:

根據(jù)不同的url地址，展示不同的頁面或者更新頁面局部視圖

Demo

服務(wù)器端路由管理，常見的開發(fā)模式是前端根據(jù)url的不同，使用ajax發(fā)起異步請(qǐng)求，獲取不同的頁面資源，前端獲取資源后更新頁面。

后端路由處理，一般是基于前后端沒有分離的項(xiàng)目，html和數(shù)據(jù)綁定發(fā)生在后端(后端渲染)，有利于SEO，因?yàn)槊看伟l(fā)送請(qǐng)求都需要獲取資源，對(duì)服務(wù)器造成資源浪費(fèi)，前端頁面可能因?yàn)榫W(wǎng)速造成延遲，頁面局部視圖更新，ajax請(qǐng)求不同保存當(dāng)前的請(qǐng)求狀態(tài)，不能使用瀏覽器前進(jìn)后退快捷鍵操作。

server路由處理實(shí)現(xiàn)類似于下面實(shí)現(xiàn):不同的url請(qǐng)求路徑，返回不同的模板

app.get("", function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.sendFile( __dirname + "/" + "index.html" );
})

app.get("/home.html", function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.sendFile( __dirname + "/" + "pages/home.html" );
})

app.get("*", function (req, res) {
    res.header("Access-Control-Allow-Origin", "*");
    res.sendFile( __dirname + "/" + "pages/404.html" );
})

Demo

在單頁面(SPA)開發(fā)中，通過Hash可以實(shí)現(xiàn)前端路由，hash路由形如:http:localhost:8100/#/home,
在url后綴存在#(錨點(diǎn))，用來做頁面定位，即根據(jù)頁面id將該元素所在的區(qū)域展示在可視區(qū)域，#后面內(nèi)容的改變不會(huì)發(fā)送請(qǐng)求到服務(wù)器。

前端路由需要實(shí)現(xiàn)一下:

根據(jù)不同的hash展示對(duì)應(yīng)的頁面

監(jiān)聽hash值的改變

保存當(dāng)前url的請(qǐng)求狀態(tài)或者參數(shù)(比如頁面刷新和分享鏈接，別人可以獲取同樣的內(nèi)容)

可以實(shí)現(xiàn)瀏覽器的前進(jìn)后退功能

原理:
頁面hash值可以通過 window.location.hash 屬性獲取，當(dāng)url的hash值發(fā)生變化，會(huì)觸發(fā)window對(duì)象的hashchange事件，通過監(jiān)聽 hashchange 事件，操作 window.location.hash 屬性可以實(shí)現(xiàn)

Route.js

function Route(params) {
    if(!params){
        console.log("請(qǐng)檢查初始化數(shù)據(jù)")
        return false;
    }
    this.registeredRoute = [];
    this.contentId = params.contentId;
    this.routes = params.routes;
    this.devStatus = params.devStatus || "none"
    this.otherRouter = params.otherRouter;
    this.init();
} 

Route.prototype = {
    constructor: Route,
    init: function()  {
        window.addEventListener("hashchange", (function(event){ 
            var currentHash = location.hash.substring(1) || this.otherRouter;
            var route = this.routes && this.routes.find(item => item["path"] === currentHash);
            if(this.devStatus === "log") {
                console.log("hash has been changed to:", currentHash)
            }
            if(route) {
                this.activeRoute();
                this.render(route)
            }

        }).bind(this))
        var initEvent = new Event("hashchange");
        window.dispatchEvent(initEvent);
    },
    //更新視圖
    render(route) {
        if(!$){
            console.log("請(qǐng)確保項(xiàng)目正確引入jQuery")
            return false;
        }
        var _routeContent =  $(`#${this.contentId}`);
        if(_routeContent) {
            var currentView = `
current page: ${route["path"]}
 
            
Params:${JSON.stringify(route["params"])} 
            
View:${route["component"]}
`;
            _routeContent.html(currentView)
        }else {
            console.log("請(qǐng)綁定需要更新的視圖區(qū)域");  
        }
    },
    //當(dāng)前激活路由樣式
    activeRoute() {
        var _routeList = $(".route") || [];
        for(var i=0; i< _routeList.length;i++) {
            var _item = _routeList[i];
            var _classList = _item.classList;
            var _defActice = !location.hash && _aDome["context"].getAttribute("data-route-param")==="home");
            var _aDome = $(_item.getElementsByTagName("a") && $(_item.getElementsByTagName("a")[0]);
            var _activeBool = _aDome["context"].getAttribute("data-route-param") === location.hash.substring(1)
            || _defActice;
            if(_activeBool) {
                _classList.add("active")
            } else {
                _classList.remove("active");
            }
        }
    }

}

index.html 片段

Demo

window.history (window是瀏覽器的全局對(duì)象，所以window.history和history相同)是瀏覽器提供的用來記錄和操作瀏覽器頁面歷史棧的對(duì)象的接口，提供了常用的屬性和方法：

history.back();     //回退
history.go(-1);     //等同于history.back();
history.forward();  //前進(jìn)
history.go(1); //等同forward()
window.history.length; //歷史棧頁面的數(shù)量

H5對(duì)History進(jìn)行了擴(kuò)展，增加了兩個(gè)重要的新的方法:

History.pushState()  //瀏覽器歷史記錄壓棧，增加一條歷史記錄
History.replaceState() //瀏覽器歷史記錄最后一條數(shù)據(jù)更新，替換當(dāng)前歷史記錄

操作pushState和replaceState方法會(huì)觸發(fā)popstate事件，頁面刷新不同瀏覽器事件監(jiān)聽存在差異，Chrome和Safari會(huì)觸發(fā)popstate事件，F(xiàn)irefox不會(huì)觸發(fā)。
我們可以通過pushState()，replaceState()記錄和更新當(dāng)前url和參數(shù);
pushState(),replaceState()包含三個(gè)參數(shù):

state:存儲(chǔ)當(dāng)前參數(shù)的JSON
title:短標(biāo)題，瀏覽器實(shí)現(xiàn)不統(tǒng)一有些fireFox會(huì)直接忽略，可以設(shè)置為null做占位，
url:當(dāng)前url，更新瀏覽器url的值

hash 路由實(shí)現(xiàn): 兼容性比較好，url比較丑陋，不能使用瀏覽器棧操作前進(jìn)后退

History 路由實(shí)現(xiàn): 比較直觀，需要服務(wù)器端配合，用戶體驗(yàn)好，響應(yīng)快，不需要每次發(fā)送服務(wù)器請(qǐng)求，通過操作瀏覽器歷史棧完成頁面跳轉(zhuǎn)，低版本瀏覽器不支持H5特性，建議使用Hash

1.前端路由的前生今世及實(shí)現(xiàn)原理