大廠技術(shù)  高級前端  Node進(jìn)階

點(diǎn)擊上方 程序員成長指北，關(guān)注公眾號

回復(fù)1，加入高級Node交流群

平時在Vue項(xiàng)目中經(jīng)常用到路由，但是也僅僅處于會用的層面，很多基礎(chǔ)知識并不是真正的理解。于是就趁著十一”小長假“查閱了很多資料，總結(jié)下路由相關(guān)的知識，查缺不漏，加深自己對路由的理解。

路由

在 Web 開發(fā)過程中，經(jīng)常遇到路由的概念。那么到底什么是路由呢？簡單來說，路由就是 URL 到函數(shù)的映射。

路由這個概念本來是由后端提出來的，在以前用模板引擎開發(fā)頁面的時候，是使用路由返回不同的頁面，大致流程是這樣的：

1. 瀏覽器發(fā)出請求；
2. 服務(wù)器監(jiān)聽到 80 或者 443 端口有請求過來，并解析 UR L路徑；
3. 服務(wù)端根據(jù)路由設(shè)置，查詢相應(yīng)的資源，可能是 html 文件，也可能是圖片資源......，然后將這些資源處理并返回給瀏覽器；
4. 瀏覽器接收到數(shù)據(jù)，通過content-type決定如何解析數(shù)據(jù)

簡單來說，路由就是用來跟后端服務(wù)器交互的一種方式，通過不同的路徑來請求不同的資源，請求HTML頁面只是路由的其中一項(xiàng)功能。

服務(wù)端路由

當(dāng)服務(wù)端接收到客戶端發(fā)來的 HTTP 請求時，會根據(jù)請求的 URL，找到相應(yīng)的映射函數(shù)，然后執(zhí)行該函數(shù)，并將函數(shù)的返回值發(fā)送給客戶端。

對于最簡單的靜態(tài)資源服務(wù)器，可以認(rèn)為，所有 URL 的映射函數(shù)就是一個文件讀取操作。對于動態(tài)資源，映射函數(shù)可能是一個數(shù)據(jù)庫讀取操作，也可能進(jìn)行一些數(shù)據(jù)處理，等等。

客戶端路由

服務(wù)端路由會造成服務(wù)器壓力比較大，而且用戶訪問速度也比較慢。在這種情況下，出現(xiàn)了單頁應(yīng)用。

單頁應(yīng)用，就是只有一個頁面，用戶訪問網(wǎng)址，服務(wù)器返回的頁面始終只有一個，不管用戶改變了瀏覽器地址欄的內(nèi)容或者在頁面發(fā)生了跳轉(zhuǎn)，服務(wù)器不會重新返回新的頁面，而是通過相應(yīng)的js操作來實(shí)現(xiàn)頁面的更改。

前端路由其實(shí)就是：通過地址欄內(nèi)容的改變，顯示不同的頁面。

前端路由的優(yōu)點(diǎn)：

• 前端路由可以讓前端自己維護(hù)路由與頁面展示的邏輯，每次頁面改動不需要通知服務(wù)端。
• 更好的交互體驗(yàn)：不用每次從服務(wù)端拉取資源。

前端路由的缺點(diǎn)： 使用瀏覽器的前進(jìn)、后退鍵時會重新發(fā)送請求，來獲取數(shù)據(jù)，沒有合理利用緩存。

前端路由實(shí)現(xiàn)原理： 本質(zhì)就是監(jiān)測 URL 的變化，通過攔截 URL 然后解析匹配路由規(guī)則。

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

1. hash模式（location.hash + hashchange 事件）

hash 模式的實(shí)現(xiàn)方式就是通過監(jiān)聽 URL 中的 hash 部分的變化，觸發(fā)haschange事件，頁面做出不同的響應(yīng)。但是 hash 模式下，URL 中會帶有 #，不太美觀。

2. history模式

history 路由模式的實(shí)現(xiàn)，基于 HTML5 提供的 History 全局對象，它的方法有：

• history.go()：在會話歷史中向前或者向后移動指定頁數(shù)
• history.forward()：在會話歷史中向前移動一頁，跟瀏覽器的前進(jìn)按鈕功能相同
• history.back()：在會話歷史記錄中向后移動一頁，跟瀏覽器的后腿按鈕功能相同
• history.pushState()：向當(dāng)前瀏覽器會話的歷史堆棧中添加一個狀態(tài)，會改變當(dāng)前頁面url，但是不會伴隨這刷新
• history.replaceState()：將當(dāng)前的會話頁面的url替換成指定的數(shù)據(jù)，replaceState 會改變當(dāng)前頁面的url，但也不會刷新頁面
• window.onpopstate：當(dāng)前活動歷史記錄條目更改時，將觸發(fā)popstate事件

history路由的實(shí)現(xiàn)，主要是依靠pushState、replaceState和window.onpopstate實(shí)現(xiàn)的。但是有幾點(diǎn)要注意：

• 當(dāng)活動歷史記錄條目更改時，將觸發(fā) popstate 事件；
• 調(diào)用history.pushState()或history.replaceState()不會觸發(fā) popstate 事件
• popstate 事件只會在瀏覽器某些行為下觸發(fā)，比如：點(diǎn)擊后退、前進(jìn)按鈕（或者在 JavaScript 中調(diào)用history.back()、history.forward()、history.go()方法）
• a 標(biāo)簽的錨點(diǎn)也會觸發(fā)該事件

對 pushState 和 replaceState 行為的監(jiān)聽

如果想監(jiān)聽 pushState 和 replaceState 行為，可以通過在方法里面主動去觸發(fā) popstate 事件，另一種是重寫history.pushState，通過創(chuàng)建自己的eventedPushState自定義事件，并手動派發(fā)，實(shí)際使用過程中就可以監(jiān)聽了。具體做法如下：

function eventedPushState(state, title, url) {
    var pushChangeEvent = new CustomEvent("onpushstate", {
        detail: {
            state,
            title,
            url
        }
    });
    document.dispatchEvent(pushChangeEvent);
    return history.pushState(state, title, url);
}

document.addEventListener(
    "onpushstate",
    function(event) {
        console.log(event.detail);
    },
    false
);

eventedPushState({}, "", "new-slug"); 
復(fù)制代碼

router 和 route 的區(qū)別

route 就是一條路由，它將一個 URL 路徑和一個函數(shù)進(jìn)行映射。而 router 可以理解為一個容器，或者說一種機(jī)制，它管理了一組 route。

概括為：route 只是進(jìn)行了 URL 和函數(shù)的映射，在當(dāng)接收到一個 URL 后，需要去路由映射表中查找相應(yīng)的函數(shù)，這個過程是由 router 來處理的。

動態(tài)路由和靜態(tài)路由

• 靜態(tài)路由

靜態(tài)路由只支持基于地址的全匹配。

• 動態(tài)路由

動態(tài)路由除了可以兼容全匹配外還支持多種”高級匹配模式“，它的路徑地址中含有路徑參數(shù)，使得它可以按照給定的匹配模式將符合條件的一個或多個地址映射到同一個組件上。

動態(tài)路由一般結(jié)合角色權(quán)限控制使用。

動態(tài)路由的存儲有兩種方式：

1. 將路由存儲到前端
2. 將路由存儲到數(shù)據(jù)庫

動態(tài)路由的好處：

• 靈活，無需手動維護(hù)
• 存儲到數(shù)據(jù)庫，增加安全性

實(shí)現(xiàn)一個路由

一個簡單的Router應(yīng)該具備哪些功能

• 以 Vue為例，需要有 <router-link>鏈接、<router-view>容器、component組件和path路由路徑：

<div id="app">
    <h1>Hello World</h1>
    <p>
        <!-- 使用 router-link 組件進(jìn)行導(dǎo)航 -->
        <!-- 通過傳遞 to 來指定鏈接 -->
        <!-- <router-link> 將呈現(xiàn)一個帶有正確 href屬性的<a>標(biāo)簽 -->
        <router-link to="/">Go to Home</router-link>
        <router-link to="/about">Go to About</router-link>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這里 -->
    <router-view></router-view>
</div>
復(fù)制代碼

const routes = [{
    path: '/',
    component: Home
},
{
    path: '/about',
    component: About
}]
復(fù)制代碼

• 以React為例，需要有<BrowserRouter>容器、<Route>路由、組件和鏈接：

<BrowserRouter>
    <Routes>
        <Route path="/" element={<App />}>
            <Route index element={<Home />} />
            <Route path="teams" element={<Teams />}>
                <Route path=":teamId" element={<Team />} />
                <Route path="new" element={<NewTeamForm />} />
                <Route index element={<LeagueStandings />} />
            </Route>
        </Route>
    </Routes>
</BrowserRouter>
復(fù)制代碼

<div>
    <h1>Home</h1>
    <nav>
        <Link to="/">Home</Link> | {""}
        <Link to="about">About</Link>
    </nav>
</div>
復(fù)制代碼

• 綜上，一個簡單的 Router 應(yīng)該具備以下功能：

• 容器（組件）
• 路由
• 業(yè)務(wù)組件 & 鏈接組件

不借助第三方工具庫，如何實(shí)現(xiàn)路由

不借助第三方工具庫實(shí)現(xiàn)路由，我們需要思考以下幾個問題：

• 如何實(shí)現(xiàn)自定義標(biāo)簽，如vue的<router-view>，React的<Router>
• 如何實(shí)現(xiàn)業(yè)務(wù)組件
• 如何動態(tài)切換路由

準(zhǔn)備工作

1. 根據(jù)對前端路由 history 模式的理解，將大致過程用如下流程圖表示：

2. 如果不借助第三方庫，我們選擇使用 Web components 。Web Components由三項(xiàng)主要技術(shù)組成，它們可以一起使用來創(chuàng)建封裝功能的定制元素。

• Custom elements（自定義元素） ：一組JavaScript API，允許我們定義 custom elements及其行為，然后可以在界面按照需要使用它們。
• Shadow DOM（影子DOM） ：一組JavaScript API，用于將封裝的“影子”DOM樹附加到元素（與主文檔分開呈現(xiàn)）并控制關(guān)聯(lián)的功能。通過這種方式，可以保持元素的功能私有。
• HTML template（HTML模版） ：<template>和<slot>可以編寫不在頁面顯示的標(biāo)記模板，然后它們可以作為自定義元素結(jié)構(gòu)的基礎(chǔ)被多次重用。

另外還需要注意 Web Components 的生命周期：

connectedCallback：當(dāng) custom element 首次被插入文檔DOM時，被調(diào)用

disconnectedCallback：當(dāng) custom element 從文檔DOM中刪除時，被調(diào)用

adoptedCallback：當(dāng)custom element 被移動到新的文檔時，被調(diào)用

attributeChangedCallback：當(dāng) custom element 增加、刪除、修改自身屬性時，被調(diào)用

3. Shadow DOM

• Shadow DOM 特有的術(shù)語：

  - Shadow host：一個常規(guī)DOM節(jié)點(diǎn)，Shadow DOM 會被附加到這個節(jié)點(diǎn)上
  - Shadow tree：Shadow DOM 內(nèi)部的 DOM 樹
  - Shadow boundary：Shadow DOM 結(jié)束的地方，也是常規(guī)DOM開始的地方
  - Shadow root：Shadow tree 的根節(jié)點(diǎn)
  

• Shadow DOM的重要參數(shù)mode：

  - open：shadow root 元素可以從 js 外部訪問根節(jié)點(diǎn)
  - close ：拒絕從 js 外部訪問關(guān)閉的 shadow root 節(jié)點(diǎn)
  - 語法：`const shadow = this.attachShadow({mode:closed});`
  

4. 通過自定義標(biāo)簽創(chuàng)建容器組件、路由、業(yè)務(wù)組件和鏈接組件標(biāo)簽，使用

CustomElementRegistry.define()注冊自定義元素。其中，Custom elements 的簡單寫法舉例：

<my-text></my-text>

<script>
    class MyText extends HTMLElement{
        constructor(){
            super();
            this.append(“我的文本”);
        }
    }
    window.customElements.define("my-text",MyText);
</script>
復(fù)制代碼

5. 組件的實(shí)現(xiàn)可以使用 Web Components，但是這樣有缺點(diǎn)，我們沒有打包引擎處理 Web Components組件，將其全部加載過來。

為了解決以上問題，我們選擇動態(tài)加載，遠(yuǎn)程去加載一個 html 文件。html文件里面的結(jié)構(gòu)如下：支持模版(template)，腳本(template)，腳本(script)，樣式(style)，非常地像vue。組件開發(fā)模版如下：

<template>
    <div>商品詳情</div>
    <div id="detail">
        商品ID:<span id="product-id" class="product-id"></span>
    </div>
</template>

<script>
    this.querySelector("#product-id").textContent = history.state.id;
</script>

<style>
    .product-id{
        color:red;
    }
</style>
復(fù)制代碼

6. 監(jiān)聽路由的變化：

popstate可以監(jiān)聽大部分路由變化的場景，除了pushState 和 replaceState。

pushState 和 replaceState可以改變路由，改變歷史記錄，但是不能觸發(fā)popstate事件，需要自定義事件并手動觸發(fā)自定義事件，做出響應(yīng)。

7. 整體架構(gòu)圖如下：

8. 組件功能拆解分析如下：

• 鏈接組件 — CustomLink(c-link)

當(dāng)用戶點(diǎn)擊<c-link>標(biāo)簽后，通過event.preventDefault();阻止頁面默認(rèn)跳轉(zhuǎn)。根據(jù)當(dāng)前標(biāo)簽的to屬性獲取路由，通過history.pushState("","",to)進(jìn)行路由切換。

//  <c-link to="/" class="c-link">首頁</c-link>
class CustomLink extends HTMLElement {
    connectedCallback() {
        this.addEventListener("click", ev => {
            ev.preventDefault();
            const to = this.getAttribute("to");
            // 更新瀏覽器歷史記錄
            history.pushState("", "", to)
        })

    }
}
window.customElements.define("c-link", CustomLink);
復(fù)制代碼

• 容器組件 — CustomRouter(c-router)

主要是收集路由信息，監(jiān)聽路由信息的變化，然后加載對應(yīng)的組件

• 路由 — CustomRoute(c-route)

主要是提供配置信息，對外提供getData 的方法

// 優(yōu)先于c-router注冊
//  <c-route path="/" component="home" default></c-route>
class CustomRoute extends HTMLElement {
    #data = null;
    getData() {
        return {
            default: this.hasAttribute("default"),
            path: this.getAttribute("path"),
            component: this.getAttribute("component")
        }
    }
}
window.customElements.define("c-route", CustomRoute);
復(fù)制代碼

• 業(yè)務(wù)組件 — CustomComponent(c-component)

實(shí)現(xiàn)組件，動態(tài)加載遠(yuǎn)程的html，并解析

完整代碼實(shí)現(xiàn)

index.html:

<div class="product-item">測試的產(chǎn)品</div>
<div class="flex">
    <ul class="menu-x">
        <c-link to="/" class="c-link">首頁</c-link>
        <c-link to="/about" class="c-link">關(guān)于</c-link>
    </ul>
</div>
<div>
    <c-router>
        <c-route path="/" component="home" default></c-route>
        <c-route path="/detail/:id" component="detail"></c-route>
        <c-route path="/about" component="about"></c-route>
    </c-router>
</div>

<script src="./router.js"></script>
復(fù)制代碼

home.html:

<template>
    <div>商品清單</div>
    <div id="product-list">
        <div>
            <a data-id="10" class="product-item c-link">香蕉</a>
        </div>
        <div>
            <a data-id="11" class="product-item c-link">蘋果</a>
        </div>
        <div>
            <a data-id="12" class="product-item c-link">葡萄</a>
        </div>
    </div>
</template>

<script>
    let container = this.querySelector("#product-list");
    // 觸發(fā)歷史更新
    // 事件代理
    container.addEventListener("click", function (ev) {
        console.log("item clicked");
        if (ev.target.classList.contains("product-item")) {
            const id = +ev.target.dataset.id;
            history.pushState({
                    id
            }, "", `/detail/${id}`)
        }
    })
</script>

<style>
    .product-item {
        cursor: pointer;
        color: blue;
    }
</style>
復(fù)制代碼

detail.html:

<template>
    <div>商品詳情</div>
    <div id="detail">
        商品ID:<span id="product-id" class="product-id"></span>
    </div>
</template>

<script>
    this.querySelector("#product-id").textContent=history.state.id;
</script>

<style>
    .product-id{
        color:red;
    }
</style>
復(fù)制代碼

about.html:

<template>
    About Me!
</template>
復(fù)制代碼

route.js:

const oriPushState = history.pushState;

// 重寫pushState
history.pushState = function (state, title, url) {
    // 觸發(fā)原事件
    oriPushState.apply(history, [state, title, url]);
    // 自定義事件
    var event = new CustomEvent("c-popstate", {
        detail: {
            state,
            title,
            url
        }
    });
    window.dispatchEvent(event);
}

// <c-link to="/" class="c-link">首頁</c-link>
class CustomLink extends HTMLElement {
    connectedCallback() {
        this.addEventListener("click", ev => {
            ev.preventDefault();
            const to = this.getAttribute("to");
            // 更新瀏覽歷史記錄
            history.pushState("", "", to);
        })
    }
}
window.customElements.define("c-link", CustomLink);

// 優(yōu)先于c-router注冊
// <c-toute path="/" component="home" default></c-toute>
class CustomRoute extends HTMLElement {
    #data = null;
    getData() {
        return {
            default: this.hasAttribute("default"),
            path: this.getAttribute("path"),
            component: this.getAttribute("component")
        }
    }
}
window.customElements.define("c-route", CustomRoute);

// 容器組件
class CustomComponent extends HTMLElement {
    async connectedCallback() {
        console.log("c-component connected");
        // 獲取組件的path，即html的路徑
        const strPath = this.getAttribute("path");
        // 加載html
        const cInfos = await loadComponent(strPath);
        const shadow = this.attachShadow({ mode: "closed" });
        // 添加html對應(yīng)的內(nèi)容
        this.#addElement(shadow, cInfos);
    }
    #addElement(shadow, info) {
        // 添加模板內(nèi)容
        if (info.template) {
            shadow.appendChild(info.template.content.cloneNode(true));
        }
        // 添加腳本
        if (info.script) {
            // 防止全局污染，并獲得根節(jié)點(diǎn)
            var fun = new Function(`${info.script.textContent}`);
            // 綁定腳本的this為當(dāng)前的影子根節(jié)點(diǎn)
            fun.bind(shadow)();
        }
        // 添加樣式
        if (info.style) {
            shadow.appendChild(info.style);
        }
    }
}
window.customElements.define("c-component", CustomComponent);

// <c-router></c-router>
class CustomRouter extends HTMLElement {
    #routes
    connectedCallback() {
        const routeNodes = this.querySelectorAll("c-route");
        console.log("routes:", routeNodes);

        // 獲取子節(jié)點(diǎn)的路由信息
        this.#routes = Array.from(routeNodes).map(node => node.getData());
        // 查找默認(rèn)的路由
        const defaultRoute = this.#routes.find(r => r.default) || this.#routes[0];
        // 渲染對應(yīng)的路由
        this.#onRenderRoute(defaultRoute);
        // 監(jiān)聽路由變化
        this.#listenerHistory();
    }

    // 渲染路由對應(yīng)的內(nèi)容
    #onRenderRoute(route) {
        var el = document.createElement("c-component");
        el.setAttribute("path", `/${route.component}.html`);
        el.id = "_route_";
        this.append(el);
    }

    // 卸載路由清理工作
    #onUploadRoute(route) {
        this.removeChild(this.querySelector("#_route_"));
    }

    // 監(jiān)聽路由變化
    #listenerHistory() {
        // 導(dǎo)航的路由切換
        window.addEventListener("popstate", ev => {
            console.log("onpopstate:", ev);
            const url = location.pathname.endsWith(".html") ? "/" : location.pathname;
            const route = this.#getRoute(this.#routes, url);
            this.#onUploadRoute();
            this.#onRenderRoute(route);
        });
        // pushStat或replaceSate
        window.addEventListener("c-popstate", ev => {
            console.log("c-popstate:", ev);
            const detail = ev.detail;
            const route = this.#getRoute(this.#routes, detail.url);
            this.#onUploadRoute();
            this.#onRenderRoute(route);
        })
    }

    // 路由查找
    #getRoute(routes, url) {
        return routes.find(function (r) {
            const path = r.path;
            const strPaths = path.split('/');
            const strUrlPaths = url.split("/");

            let match = true;
            for (let i = 0; i < strPaths.length; i++) {
                if (strPaths[i].startsWith(":")) {
                    continue;
                }
                match = strPaths[i] === strUrlPaths[i];
                if (!match) {
                    break;
                }
            }
            return match;
        })
    }
}
window.customElements.define("c-router", CustomRouter);

// 動態(tài)加載組件并解析
async function loadComponent(path, name) {
    this.caches = this.caches || {};
    // 緩存存在，直接返回
    if (!!this.caches[path]) {
        return this.caches[path];
    }
    const res = await fetch(path).then(res => res.text());
    // 利用DOMParser校驗(yàn)
    const parser = new DOMParser();
    const doc = parser.parseFromString(res, "text/html");
    // 解析模板，腳本，樣式
    const template = doc.querySelector("template");
    const script = doc.querySelector("script");
    const style = doc.querySelector("style");
    // 緩存內(nèi)容
    this.caches[path] = {
        template,
        script,
        style
    }
    return this.caches[path];
}
復(fù)制代碼

版權(quán)所有，如有轉(zhuǎn)載，請注明來源。