前端：將網站打造成單頁面應用SPA（一）

原文 http://hao.jser.com/archive/7948/

前言

不知你有沒有發現，像Github、百度、微博等這些大站，已經不再使用普通的a標簽做跳轉了。他們大多使用Ajax請求替代了a標簽的默認跳轉，然后使用HTML5的新API修改了Url，你可以在F12的Network面板里發現這個秘密。

這項技術并沒有特別標準的學名，大家都稱呼為Pjax，意為PushState + Ajax。這并不完全準確，因為還有Hash + Ajax等方法，但為了方便，我們下文還是統稱為Pjax。

為什么要這么做？

Pjax是一個優秀的解決方案，你有足夠多的理由來使用它：

• 可以在頁面切換間平滑過渡，增加Loading動畫。
• 可以在各個頁面間傳遞數據，不依賴URL。
• 可以選擇性的保留狀態，如音樂網站，切換頁面時不會停止播放歌曲。
• 所有的標簽都可以用來跳轉，不僅僅是a標簽。
• 避免了公共JS的反復執行，如無需在各個頁面打開時都判斷是否登錄過等等。
• 減少了請求體積，節省流量，加快頁面響應速度。
• 平滑降級到低版本瀏覽器上，對SEO也不會有影響。

原理呢？

HTML5 History API

我們來看看HTML5在History里增加了什么：

history.pushState(state, title, url)

pushState方法會將當前的url添加到歷史記錄中，然后修改當前url為新url。請注意，這個方法只會修改地址欄的Url顯示，但并不會發出任何請求。我們正是基于此特性來實現Pjax。它有3個參數：

• state: 可以放任意你想放的數據，它將附加到新url上，作為該頁面信息的一個補充。
• title: 顧名思義，就是document.title。不過這個參數目前并無作用，瀏覽器目前會選擇忽略它。
• url: 新url，也就是你要顯示在地址欄上的url。

history.replaceState(state, title, url)

replaceState方法與pushState大同小異，區別只在于pushState會將當前url添加到歷史記錄，之后再修改url，而replaceState只是修改url，不添加歷史記錄。

一個實例：

這里我們以daipig為例，打開daipig，地址欄是 http://www.daipig.com 。接下來打開F12 Console，輸入：

history.pushState({ a: 1, b: 2 }, null, "http://www.daipig.com/abcdefg"); 

可以發現，url已經變成我們輸入的url了，但頁面并沒有刷新，也沒有發出任何請求。現在再輸入history.state，就可以看到我們剛剛傳過來的第一個參數state了。

這時點擊后退，url會回到www.daipig.com，同樣是沒有刷新。只不過后退的時候其實是觸發了window.onpopstate事件的。

詳細文檔可以查閱MDN： https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_…

怎么完整的實現Pjax？

Pjax的原理上文已經講了，并不復雜。我實現了一個比較粗糙的Pjax庫，已經能滿足不少需求，如果你有興趣，可以上Github幫忙完善一下代碼。地址是： https://github.com/Coffcer/coffce-pjax 。

完整的代碼見Github，這里我們只談需要注意的一些地方。

匹配選擇器

要實現Pjax，難免就會有匹配選擇器的需求。你需要判斷當前點擊的元素，是否匹配指定選擇器。這里我給出一個兼容至IE8的解決方法：

// 判斷element是否匹配選擇器selector
function matchSelector(element, selector) {
    var match = 
        document.documentElement.webkitMatchesSelector || 
        document.documentElement.mozMatchesSelector || 
        document.documentElement.msMatchesSelector ||
        // 兼容IE8及以下瀏覽器
        function(selector, element) {
            // 這是一個好方法，可惜IE8連indexOf都不支持
            // return Array.prototype.indexOf.call(document.querySelectorAll(selector), this) !== -1;
            if (element.tagName === selector.toUpperCase()) return true;
            var elements = document.querySelectorAll(selector),
            length = elements.length;
            while (length--) {
            if (elements[length] === this) return true;
            }
            return false;
        };
    // 重寫函數自身，使用閉包keep住match函數，不用每次都判斷兼容
    matchSelector = function(element, selector) {
        return match.call(element, selector);
    };
    return matchSelector(element, selector);
}  

// 驗證一下
matchSelector(document.getElementById("abc"), "#abc"); // true
matchSelector(document.querySelector("a"), "p"); // false 

在現代瀏覽器上，優先使用原生的matchesSelector方法來判斷，在IE8及以下的瀏覽器里，循環document.querySelector的結果集，依次對比。

這個方法利用了閉包，然后重寫自身，只有在第一次調用時需要判斷加哪個前綴執行哪個方法，其后都是調用了閉包的match函數。

不支持HTML5 PushState的瀏覽器怎么辦？

IE6到IE9是不支持pushState的，要修改Url，只能利用Url的Hash，也即是#號。

你可以隨意找個網站試一下，在url后面加上#號和任意內容，頁面并不會刷新。此時點擊后退也只會回到上一條#號，同樣不會刷新。

那么我們只需把pushState(新url)換成localtion.hash = 新url，把onpopstate事件換成onhashchange事件就可以兼容IE了。QQ音樂，網易云音樂等就是使用這種方式。

現成的庫

我簡單實現了一個比較粗糙的Pjax庫，地址是： https://github.com/Coffcer/coffce-pjax ，歡迎PR和Star。