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

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》中使用的方案，你學會了嗎？

寫在最後