以上是一些最基本的難題，如果你要追求極致使用者體驗，還需要解決下面的難題：

1、定義多個頁面

每個頁面是由HTML+JS+CSS組成的。每個頁面需要對應一個路由。

我說一下我在遊戲《Dice Crush》中的做法。

它有3個頁面：主頁、選擇關卡頁面、遊戲頁面。如下圖：

我給每個頁面定義了一個template.js，用於存放html字串。比如：

``js const template =

之後渲染頁面時，只需要document.body.innerHtml = template，就可以把該頁面的模板渲染到html文件上了。當然，渲染頁面時，還需要給button繫結click事件。

因此，我們給每個頁面宣告一個template，再宣告一個用於渲染該頁面的函式（功能主要是給document.body.innerHtml賦值、給button新增click事件），就可以了。之後需要渲染哪個頁面，就呼叫哪個頁面的渲染方法。

2、頁面切換，使用History API切換URL

需要切換頁面時，我們需要使用history.pushState(null, '', '新的頁面URL')來修改瀏覽器URL，同時呼叫上述渲染頁面方法，把頁面渲染在瀏覽器中。

3、a標籤的問題

js linkElement.onclick = function (event) { if (event.button !== 0) return; if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return; event.preventDefault(); window.history.pushState(null, '', 'new-page.html'); // 手動渲染新的頁面 };

event.button表示按下的是滑鼠哪個按鍵（0是主按鍵，通常指滑鼠左鍵或預設值）。如果使用者是滑鼠中鍵按下a標籤、或者使用者同時按下了Ctrl(Windos)、Command(Mac)、Shift，那麼他應該期望是在新視窗開啟，我們使用href原生行為即可。如果使用者同時按下了Option，那麼他應該期望是開啟選單欄，我們也執行原生行為。其它情況，都表明使用者要在本頁面點開那個網址，我們攔截原生的href，通過history.pushState實現，並手動渲染新的頁面。

4、手動載入新頁面、解除安裝舊頁面

由於我們頁面渲染是通過document.body.innerHtml實現的，所以會在載入新頁面時自動解除安裝舊頁面。

當然，如果你的舊頁面在window上添加了一些事件監聽器、計時器，也要記得手動解除安裝掉。做好清除工作，不然會出問題。

5、頁面初次載入與監聽事件onpopstate

頁面初次載入時，我們需要根據路由渲染一個頁面，示例程式碼如下：

js const init = () => { if (window.location.pathname.includes('play')) { renderGame(); } else if (window.location.pathname.includes('select')) { renderSelect(); } else { renderHome(); } }; init();

同樣，當頁面onpopstate時，即使用者點選了「返回」、「前進」，依然停留在本頁面時，我們也需要重新根據當前路由渲染一下頁面。需要執行如下邏輯：

js window.onpopstate = init;

至此，我們手寫的一個單頁面應用就開發完成啦～這也是我在遊戲《Dice Crush》中使用的方案，你學會了嗎？

寫在最後