摘要：如果把操作換成其他操作呢比如一般的操作如此看來，借鑒于的機制和原理，我們能干的事情很多。對于需要讓瀏覽器記錄的事件操作或者狀態(tài)，我們按這個套路實現(xiàn)就好了。從需求出發(fā)來考慮設計實現(xiàn)需求驅(qū)動，是培養(yǎng)架構(gòu)能力的好習慣。原創(chuàng)不易，轉(zhuǎn)稿請注明作者出處

如果你想在 web 應用實現(xiàn)類似 pjax 的功能特性，往往需要做一些準備，比如對于不支持 history.pushState 方法的部分瀏覽器，怎樣去做優(yōu)雅降級，以滿足頁面整體的可用性等等。這篇文章主要來說說 pjax 相關的問題和思路。

首先，因為我們必然會用到 ajax 來搞定數(shù)據(jù)，在 js 中執(zhí)行的請求和 DOM 操作并不會被 history 記錄（這么說雖然不嚴謹，幫助理解就好）；

其次，單頁面應用場景（或者某一個頁面有多個交互狀態(tài)的情況）下，瀏覽器的前進后退功能無法獲取到某一次 ajax 操作或者交互的狀態(tài)；

第三（你以為我會說最后？so cute!），接前面所述，當頁面在某種狀態(tài)下被分享或者傳播時，新的用戶進入后，頁面本應該維持在上個用戶分享或傳播時的狀態(tài)（比如你經(jīng)常在朋友圈分享的各種活動頁面等等）...

基于以上且不限于以上所述的種種需求，pjax 的策略便應運而生。

參考上面的示意圖，用一種簡單的方式來描述這個機制的過程：

首先，在執(zhí)行 ajax 操作時，我們使用 pushState 方法向 瀏覽器的 history 對象中寫入一個特定的狀態(tài)值（一組參數(shù)），保證每一次 ajax 請求都能有一個相應的 history 記錄（history.state）；

那么之后，當我們訪問 history 的不同狀態(tài)的時候（比如點擊瀏覽器前進、后退按鈕），通過當前狀態(tài)值我們也能找到與之對應的 ajax 操作。

這里 pushState 方法的一個好處，就是可以在不重載頁面的情況下，改寫瀏覽器地址欄 url（同時改變
window.location.href）。

Pjax 給我們提供了一個方案，而不僅僅是 pjax 的本身內(nèi)容。我們至少可以從兩個方面來拓展一下：

（1）如果沒有 pushState，可以用其他方式來影響瀏覽器的歷史記錄嗎？

如果你比較了解 React 或者 Angular 的 router 實現(xiàn)，那么這個問題很容易理解。比如 react-router 給予我們兩種選擇，一種是基于 history.pushState 的路由實現(xiàn)，一種是基于 location.hash 的實現(xiàn)，后者相對前者而言，適用性更強一些，畢竟 錨點 這個東西，在 web1.0 時代我們就很熟悉了。使用 location.hash 能夠滿足低版本瀏覽器的需要。

（2）如果把 ajax 操作換成其他操作呢？比如一般的 DOM 操作

如此看來，借鑒于 pjax 的機制和原理，我們能干的事情很多。對于需要讓瀏覽器記錄的事件操作或者狀態(tài)，我們按這個套路實現(xiàn)就好了。

基于上面的討論，如果你已經(jīng)有種想做點什么的沖動。那么，我想我們已經(jīng)產(chǎn)生了共鳴。

看到這里，不妨給文章點個贊或者丟幾個硬幣什么的，十分感激 (Xie-Xie-Ba-Ba)

拋開單純的 pjax 實現(xiàn)（比如 jquery-pjax 等等）

如果我們可以自己做一個小工具（方法類庫之類的）
利用瀏覽器的 history 來驅(qū)動頁面的操作或者行為
解決更多的問題
或者實現(xiàn)一個全新的功能
是不是很 cool ？

這個小標題看起來可能的有點中二（或者有點標題黨吧）。。。

從需求出發(fā)來考慮設計實現(xiàn)（需求驅(qū)動），是培養(yǎng)架構(gòu)能力的好習慣。（~嚶~嚶~嚶）

5.1 需求清單:

（1）我們想做一個更通用的 pushState 方法，用法如下（考慮逼格，展示 ES6 語法的偽代碼）：

// 以 import 形式引入依賴，easierHistory 是我們最終構(gòu)造的方法集（一個對象或構(gòu)造器）或者工具包
import easierHis from "./easierHistory";

// ...do something...

// 向瀏覽器歷史插入一條記錄 （例如：我們做一個翻頁的效果時，傳入值為一個頁碼）
easierHis.putState({page: 3});

/* 注：為與原有 pushState 方法區(qū)別，故將新方法命名為 putState */

（2）我們想通過一個方法（或者接口）訪問到當前的歷史狀態(tài)（更通用的 history.state 方法）：

// 獲取當前歷史狀態(tài) state
let { state } = easierHis.getState();

/* 注：為與原有 state 方法區(qū)別，故將新方法命名為 getState */

（3）構(gòu)造一個通用的方法，當進行瀏覽器前進后退操作時，可以觸發(fā)一些操作：

// 獲取當前歷史狀態(tài) state
easierHis.popState( (state) => { do something... } );

/* 注：這里我們給 popState 方法傳入一個回調(diào)，回調(diào)的內(nèi)容就是我們想要觸發(fā)的操作 */

5.2 一個完整的需求實例:

綜合考慮一個實際的應用場景，比如我們想要用自己構(gòu)造的這種類 pjax 機制實現(xiàn)一個有記錄、可前進回退的翻頁效果。大致的實現(xiàn)如下：

import easierHis from "./easierHistory";

// 默認加載第 1 頁數(shù)據(jù)
if (!easierHis.getState()) {
  loadPage(1);      // 用于翻頁和加載數(shù)據(jù)的方法
  easierHis.putState({page: 1});
}

// 瀏覽器前進/后退時，根據(jù) state 數(shù)據(jù)加載對應頁碼的數(shù)據(jù)
easierHis.popState((state) => {
  let cur_page = !state ? 1 : parseInt(state.page);
  loadPage(cur_page);
});

// 加載或跳轉(zhuǎn)某頁的方法
function goto(page){
  loadPage(page);
  easierHis.putState({page: page});
}

從上一小節(jié)的需求出發(fā)，我們來看一看這個小工具（包）的具體實現(xiàn)。
這里直接看代碼，行文思路和具體方法的用法，可以參考代碼注釋：

/* 基于 ES5 的 easierHistory 實現(xiàn) */
"use strict";

// 全局對象
var easierHistory = {};

/*
** @method putState : 實現(xiàn) 類PJAX 機制的輔助函數(shù)，用于在 history 菊花上插一刀
** @param {Object} state_content : 第 1 個參數(shù)(必填)，表示當前 state 的對象字面量
** @param {Boolean} sync_prior : 第 2 個參數(shù)(選填)，傳 true 則優(yōu)先使用方案 $1，反之直接使用方案 $2，默認值為 true
** @return {Object} _state : 返回 state
**
** $1 : 基于 history.pushState (絕大部分現(xiàn)代瀏覽器均支持)
** $2 : 通過操作 url 的 hash 字符串內(nèi)容的方式來進行兼容
*/
easierHistory.putState = function (state_content, sync_prior) {
  var _state = arguments[0] || {};
  var _prior = typeof arguments[1] == "undefined" ? true : arguments[1];

  // 拼接 search 和 hash 字符串
  var _search = "?";
  var _hash = "";
  for (var key in _state) {
    _search += key + "=" + _state[key] + "&";
    _hash += "#" + key + "=" + _state[key];
  }
  _search = _search.replace(/&$|?$/, "");

  // 根據(jù)瀏覽器支持情況，選擇一種實現(xiàn)方式
  if (!history.pushState || !_prior) {
    location.hash = _hash;                       // $2 基于 location.hash 的實現(xiàn)
  } else {
    history.pushState(_state, "", _search);      // $1 基于 pushState 的實現(xiàn)
  }

  // 返回當前 state
  return _state;
}

/*
** @method getState_byHistory : 用于獲取 history 狀態(tài)
** @return {Object} curState : 當前 history 狀態(tài)
*/
easierHistory.getState_byHistory = function () {
  if (history.state) {
    return history.state;
  }

  if (location.search) {
    return location.search.substring(1).split("&").reduce(function (curState, queryStr) {
      if (queryStr.indexOf("=") !== -1) {
        curState[queryStr.split("=")[0]] = queryStr.split("=")[1];
      }

      return curState;
    }, {});
  }

  return null;
};

/*
** @method getState_byHash : 將 location.hash 的內(nèi)容解析為 json 對象
** @return {Object} curState : 轉(zhuǎn)換后的 json 對象
*/
easierHistory.getState_byHash = function () {
  if (!location.hash) {
    return null;
  }

  return location.hash.split("#").reduce(function (curState, hashStr) {
    if (hashStr.indexOf("=") !== -1) {
      curState[hashStr.split("=")[0]] = hashStr.split("=")[1];
    }

    return curState;
  }, {});
};

easierHistory.getState = function () {
  return easierHistory.getState_byHistory() || easierHistory.getState_byHash();
};

/*
** @method popState : 給 window對象 綁定 popState 事件，若瀏覽器不支持則向下兼容 hashchange 事件
** @param {Function} cbFunc : 事件回調(diào)
*/
easierHistory.popState = function (cbFunc) {
  if (easierHistory.getState_byHistory()) {
    window.onpopstate = function () {          // 基于 popstate 方法的實現(xiàn)（html5 特性）
      cbFunc(easierHistory.getState());
    };
  } else {
    window.onhashchange = function () {        // 基于 hashchange 方法的實現(xiàn)（兼容性更強）
      cbFunc(easierHistory.getState());
    };
  }
};


module.exports = easierHistory;

當然，上面的代碼可以直接在瀏覽器運行（直接使用 easierHistory對象），把 module.exports 語句去掉即可。

原創(chuàng)不易，轉(zhuǎn)稿請注明作者、出處