大話 SPA router

好吧，俺認可好像要當一把標題黨了，這篇文章目的是記錄一下對於 spa 的核心 —— 路由的學習，並無什麼超人類的東西，好了，咱們開始吧。

SPA 是個啥？

相信仍是有很多的萌新是不知道 SPA 是個啥？是否是想問一句，你是誰？你是否是搞美容的那個 SPA。其實並非，SPA 在前端領域可不是美容的，它是單頁應用的意思，那麼啥是單頁應用呢？在這個時代若是不知道這個名詞的多半是萌新了,咱們也簡單的聊一聊這個東西。

之前咱們開發應用的時候，會寫多個頁面，好比說首頁、詳情等等，咱們經過點擊頁面的 a 標籤，而後去獲取另外一個頁面，從新加載，或者跳轉。而單頁應用只提供一個 HTML 文件，在頁面初始化的時候加載 js、css 等等，而後經過 js 去動態更新視圖，從而實現交互，這避免了頁面的刷新，跳轉等等。

So，單頁應用的優勢是啥呢？

• 先後端分離，提高開發效率
• 減輕服務器壓力，前端完成很大一部分邏輯
• 提高用戶體驗，如絲般潤滑啊

技術核心

其實談到 SPA，咱們實現的方法大概就有 hash 和 H5 的 History 兩種，咱們來了解下。

History API

在 HTML5 中，咱們能夠發現 History 多出了幾個 API，咱們來一塊兒走一遍：

1. history.pushState( data, title[, url] ): 顧名思義，往歷史記錄棧棧頂添加一條數據，data 會做爲觸發 popstate 事件的時候的參數，titile 爲標題，url 爲頁面地址。
2. history.replaceState( data, title[, url] ): 這個方法是用來更換歷史記錄的。
3. history.state: 獲取當前歷史棧棧頂數據。
4. event -> popstate: 當用戶點擊瀏覽器回退或者前進按鈕就會觸發 popstate 事件。

咱們來搞一個簡單的例子，就知道 history 是怎麼作的了。

<div id="app">
  <a class="route" path="a.html">首頁</a>
  <a class="route" path="b.html">詳情頁</a>
</div>

這是 html 文件，下面就是 js 文件了：

const routes = document.querySelectorAll('.route');
routes.forEach(route => {
    route.addEventListener('click', e => {
        e.preventDefault();
        // 在這裏面，咱們也是能夠經過參數的不一樣，而後渲染不一樣的頁面。
        const path = route.getAttribute('path');
        window.history.pushState({ public: 'data' }, null, path);
    }, false);
});

window.addEventListener('popstate', e => {
    // 好比說在這裏面能夠經過路徑的不一樣，而後去渲染不一樣的頁面。
}, false);

咱們首先是經過點擊，而後將 data、url 等參數 push 到棧裏面，而後渲染頁面，若是說咱們經過瀏覽器的回退或者前進，就會觸發 popstate，而後經過不一樣路徑進行頁面渲染，其實 history 就是這麼一個基本原理。

Hash

這種方案就是去監聽 hash 的變化，而後去作相應的操做，其實很是簡單，咱們須要用到 location.hash 和 hashchange 這個事件就行了，很簡單，和上面的操做差很少這裏就不說了。

若是各位看官看的還行，能夠到 GitHub 裏給我一顆小小的 star 支持一下，謝謝。