摘要：初步理解如果最近打電話給武漢的小伙伴，他說信號(hào)不好，那么相信我，他肯定不是真的信號(hào)不好，也不是不想和你說話，而是他可能在冰箱里。。。

如果最近打電話給武漢的小伙伴，他說信號(hào)不好，那么相信我，他肯定不是真的信號(hào)不好，也不是不想和你說話，而是他可能在冰箱里。。。武漢的天氣從來都是喜怒無常的，是吧，屌絲氣十足，今年也是絲毫看不出有任何逆襲的跡象和可能性，當(dāng)然咱也沒必要去操那個(gè)心；好吧，其實(shí)你把他看作是我也是可以的；不要聯(lián)想，趕快進(jìn)入正題；

JS能一路從小丑變?yōu)榘滋禊Z，跟ajax技術(shù)的風(fēng)靡有莫大的關(guān)系，伴隨H5、ES6、Nodejs的發(fā)展與普及，不斷將前端推向新的高度，如今JS的地位如日中天啊！

用過backbone、Angular、React這些框架的肯定對(duì)前端路由都不陌生，而他們基本上都是通過監(jiān)聽hash的變動(dòng)來更新和切換視圖的，當(dāng)然React還支持browserHistory，也就是pjax的重點(diǎn)pushState，屬于H5的范疇，除了BSIE，兼容性就不多說了；pjax=pushState+ajax，ajax都不陌生，那么揭開pjax的神秘面紗，搞懂pushState就是咯，恩，為了保持信心，先這么認(rèn)為吧；

如果還是不太清楚pjax到底是做什么的，那么只好這么說了：改變URL（不是hash），局部刷新（ajax）；

如果依然不太明白，那只可能是因?yàn)樗季S定式了，對(duì)于前端來說，一般都知道改變URL（不是hash），頁面一定會(huì)刷新的，而pushState就是要讓你知道，No！改變URL也可以只刷新局部！

1. HTML5 API

實(shí)現(xiàn)pjax其實(shí)并不難，比如jquery.pjax.js，已有現(xiàn)成的API供你直接使用；只是最近無意中發(fā)現(xiàn)國內(nèi)有幾個(gè)站點(diǎn)已經(jīng)開始使用pjax技術(shù)了，頁面體驗(yàn)非常好；而我剛?cè)腴TReact，不想搭著Jquery一起用，只好自己造個(gè)ajax的輪子用著，然后自然就想到了這個(gè)輪子應(yīng)該包含pjax；然后發(fā)現(xiàn)自己太年輕了，當(dāng)然有想法是好的；

實(shí)現(xiàn)pjax主要要用到H5 history的幾個(gè)API：pushState(data,str,url)，replaceState(data,str,url)，onpopstate事件；onpopstate會(huì)在用戶點(diǎn)擊瀏覽器上的前進(jìn)后退或者程序的history.go(s)觸發(fā)，這時(shí)history.state的值即對(duì)應(yīng)為pushState中data的值，這樣看來，data是可以緩存ajax拉取過來的數(shù)據(jù)的，不過別高興的太早，它有大小限制的——640K；反正都是H5，localStorage夠用吧！

2. localStorage緩存

雖然說Redux起初挺不好理解的，不過說真的，這套做法還是非常不錯(cuò)的，比如，可以借鑒Redux的狀態(tài)容器機(jī)制，咱也構(gòu)造一個(gè)容器保存所有pushState時(shí)的數(shù)據(jù)，以URL為參考，同時(shí)用localStorage緩存起來，如果非要將localStorage的存儲(chǔ)時(shí)間加個(gè)期限，我想可以參考：《localStorage也可以限時(shí)保存登錄信息》；action就是判斷是否支持pushState，取消a鏈接的默認(rèn)跳轉(zhuǎn)等pjax轉(zhuǎn)化操作；reducer就是先判斷該鏈接地址對(duì)應(yīng)的緩存是否存在來決定是否由ajax GET請(qǐng)求該a鏈接對(duì)應(yīng)的href，將返回的數(shù)據(jù)用localStorage保存或更新；dispatch(action)即將數(shù)據(jù)填充到對(duì)應(yīng)containor；自己實(shí)現(xiàn)當(dāng)然顯麻煩，好吧，還是用jquery.pjax.js吧；

3. 真實(shí)面目

pushState會(huì)向?yàn)g覽器歷史記錄寫入一條記錄，同時(shí)用傳入的url替換當(dāng)前瀏覽器上的URL，那么pjax其實(shí)就是掩人耳目、花拳繡腿的改個(gè)URL，最終還是ajax了，是嗎？如果你也這么想，那么你真的是天真又可愛，因?yàn)閷?duì)前端而言，咱要做的就是掩人耳目式的修改個(gè)URL，然后局部刷新；

4. 服務(wù)端改造

既然是掩人耳目式的修改URL，那么如何面對(duì)主動(dòng)刷新后404的現(xiàn)實(shí)呢？所以前面說了，要保持信心；當(dāng)然接下來要做的是后端的事，暫且將pjax的請(qǐng)求統(tǒng)一為與頁面刷新時(shí)一樣的GET請(qǐng)求吧（具體請(qǐng)求方式需前后端協(xié)商），前端在pjax請(qǐng)求上加個(gè)標(biāo)記讓后端知道該次為pjax請(qǐng)求只需返回一個(gè)片段或json，這個(gè)標(biāo)記可以是setHeader或請(qǐng)求參數(shù)里加個(gè)pjax=1之類的，后端判斷這個(gè)標(biāo)記來確定返回一個(gè)完整頁面還是返回局部內(nèi)容或局部內(nèi)容的數(shù)據(jù)json，這樣就可確保pjax后的URL刷新后不是404；

//pjax請(qǐng)求帶pjax header
$.ajax({
    url:a.attr("href")ajaxUrl,
    type:"GET",
    headers:{pjax:true},
    success:function(data){
        //localStorage ...
        history.pushState("","",url);
        //containor 填充
    }
});

//Nodejs
app.get(path,function(req,res,next){
    var pjax=req.headers["pjax"];
    if(pjax){
        //...
        res.json({
            data:page_content
        });
    }else{
        //...
        res.send(page);
    }
});

這樣看來，其實(shí)并沒有想象那么復(fù)雜，我想，不是對(duì)IE789有特別要求的，都可以考慮使用，為了兼容也可以先判斷是否支持pushState，決定是否將鏈接轉(zhuǎn)化為pjax；這種事前端做的太多了，何樂而不為呢？

就這兼容性。。。。。。你 si bu si sa

原文來自：花滿樓（http://www.famanoder.com/boke...）