2. 程式人生 > >history原始碼解析-管理會話歷史記錄

history原始碼解析-管理會話歷史記錄

阿新 • • 發佈：2018-12-03

history是一個JavaScript庫，可讓你在JavaScript執行的任何地方輕鬆管理會話歷史記錄

1.前言

history是由Facebook維護的，react-router依賴於history，區別於瀏覽器的window.history，history是包含window.history的，讓開發者可以在任何環境都能使用history的api（例如Node、React Native等）。

本篇讀後感分為五部分，分別為前言、使用、解析、demo、總結，五部分互不相連可根據需要分開看。

前言為介紹、使用為庫的使用、解析為原始碼的解析、demo是抽取原始碼的核心實現的小demo，總結為吹水，學以致用。

建議跟著原始碼結合本文閱讀，這樣更加容易理解！

  1. history
  2. history解析的Github地址

2.使用

history有三種不同的方法建立history物件，取決於你的程式碼環境：

  1. createBrowserHistory：支援HTML5 history api的現代瀏覽器（例如：/index）；
  2. createHashHistory：傳統瀏覽器（例如：/#/index）；
  3. createMemoryHistory：沒有Dom的環境（例如：Node、React Native）。

注意：本片文章只解析createBrowserHistory，其實三種構造原理都是差不多的

<!DOCTYPE html>
<html>
  <head>
    <script src="./umd/history.js"></script>
    <script>
      var createHistory = History.createBrowserHistory
      // var createHistory = History.createHashHistory

      var page = 0
      // createHistory建立所需要的history物件
      var h = createHistory()

      // h.block觸發在位址列改變之前，用於告知使用者位址列即將改變
 

      h.block(function (location, action) {
        return 'Are you sure you want to go to ' + location.path + '?'
      })

      // h.listen監聽當前位址列的改變
      h.listen(function (location) {
        console.log(location, 'lis-1')
      })
    </script>
  </head>
  <body>
    <p>Use the two buttons below to test normal transitions.</p>
    <p>
      <!-- h.push用於跳轉 -->
      <button onclick="page++; h.push('/' + page, { page: page })">history.push</button>
      <!-- <button onclick="page++; h.push('/#/' + page)">history.push</button> -->

      <button onclick="h.goBack()">history.goBack</button>
    </p>
  </body>
</html>
複製程式碼

block用於地址改變之前的擷取，listener用於監聽位址列的改變，push、replace、go(n)等用於跳轉，用法簡單明瞭

3.解析

貼出來的原始碼我會刪減對理解原理不重要的部分！！!如果想看完整的請下載原始碼看哈

從history的原始碼庫目錄可以看到modules資料夾，包含了幾個檔案：

  1. createBrowserHistory.js 建立createBrowserHistory的history物件；
  2. createHashHistory.js 建立createHashHistory的history物件；
  3. createMemoryHistory.js 建立createMemoryHistory的history物件；
  4. createTransitionManager.js 過渡管理（例如：處理block函式中的彈框、處理listener的佇列）；
  5. DOMUtils.js Dom工具類（例如彈框、判斷瀏覽器相容性）；
  6. index.js 入口檔案；
  7. LocationUtils.js 處理Location工具；
  8. PathUtils.js 處理Path工具。

入口檔案index.js

export { default as createBrowserHistory } from "./createBrowserHistory";
export { default as createHashHistory } from "./createHashHistory";
export { default as createMemoryHistory } from "./createMemoryHistory";
export { createLocation, locationsAreEqual } from "./LocationUtils";
export { parsePath, createPath } from "./PathUtils";
複製程式碼

把所有需要暴露的方法根據檔名區分開，我們先看history的建構函式createBrowserHistory。

3.1 createBrowserHistory

// createBrowserHistory.js
function createBrowserHistory(props = {}){
  // 瀏覽器的history
  const globalHistory = window.history;
  // 初始化location
  const initialLocation = getDOMLocation(window.history.state);
  // 建立地址
  function createHref(location) {
    return basename + createPath(location);
  }

  ...

  const history = {
    //  window.history屬性長度
    length: globalHistory.length,

    // history 當前行為（包含PUSH-進入、POP-彈出、REPLACE-替換）
    action: "POP",

    // location物件（與地址有關）
    location: initialLocation,

    // 當前地址（包含pathname）
    createHref,

    // 跳轉的方法
    push,
    replace,
    go,
    goBack,
    goForward,

    // 擷取
    block,

    // 監聽
    listen
  };

  return history;
}

export default createBrowserHistory;
複製程式碼

無論是從程式碼還是從用法上我們也可以看出，執行了createBrowserHistory後函式會返回history物件，history物件提供了很多屬性和方法，最大的疑問應該是initialLocation函式，即history.location。我們的解析順序如下：

  1. location；
  2. createHref；
  3. block；
  4. listen；
  5. push；
  6. replace。

3.2 location

location屬性儲存了與位址列有關的資訊，我們對比下createBrowserHistory的返回值history.location和window.location

// history.location
history.location = {
  hash: ""
  pathname: "/history/index.html"
  search: "?_ijt=2mt7412gnfvjpfeuv4hjkq2uf8"
  state: undefined
}

// window.location
window.location = {
  hash: ""
  host: "localhost:63342"
  hostname: "localhost"
  href: "http://localhost:63342/history/index.html?_ijt=2mt7412gnfvjpfeuv4hjkq2uf8"
  origin: "http://localhost:63342"
  pathname: "/history/index.html"
  port: "63342"
  protocol: "http:"
  reload: ƒ reload()
  replace: ƒ ()
  search: "?_ijt=2mt7412gnfvjpfeuv4hjkq2uf8"
}
複製程式碼

結論是history.location是window.location的兒砸！我們來研究研究作者是怎麼處理的。

const initialLocation = getDOMLocation(window.history.state)
複製程式碼

initialLocation函式等於getDOMLocation函式的返回值（getDOMLocation在history中會經常呼叫，理解好這個函式比較重要）。

// createBrowserHistory.js
function createBrowserHistory(props = {}){
  // 處理basename（相對地址，例如：首頁為index，假如設定了basename為/the/base，那麼首頁為/the/base/index）
  const basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : "";
  
  const initialLocation = getDOMLocation(window.history.state);

  // 處理state引數和window.location
  function getDOMLocation(historyState) {
    const { key, state } = historyState || {};
    const { pathname, search, hash } = window.location;

    let path = pathname + search + hash;

    // 保證path是不包含basename的
    if (basename) path = stripBasename(path, basename);

    // 建立history.location物件
    return createLocation(path, state, key);
  };

  const history = {
    // location物件（與地址有關）
    location: initialLocation,
    ...
  };

  return history;
}
複製程式碼

一般大型的專案中都會把一個功能拆分成至少兩個函式，一個專門處理引數的函式和一個接收處理引數實現功能的函式：

  1. 處理引數：getDOMLocation函式主要處理state和window.location這兩引數，返回自定義的history.location物件，主要構造history.location物件是createLocation函式；
  2. 構造功能：createLocation實現具體構造location的邏輯。

接下來我們看在LocationUtils.js檔案中的createLocation函式

// LocationUtils.js
import { parsePath } from "./PathUtils";

export function createLocation(path, state, key, currentLocation) {
  let location;
  if (typeof path === "string") {
    // 兩個引數 例如: push(path, state)

    // parsePath函式用於拆解地址 例如：parsePath('www.aa.com/aa?b=bb') => {pathname: 'www.aa.com/aa', search: '?b=bb', hash: ''}
    location = parsePath(path);
    location.state = state;
  } else {
    // 一個引數 例如: push(location)
    location = { ...path };

    location.state = state;
  }

  if (key) location.key = key;

  // location = {
  //   hash: ""
  //   pathname: "/history/index.html"
  //   search: "?_ijt=2mt7412gnfvjpfeuv4hjkq2uf8"
  //   state: undefined
  // }
  return location;
}

// PathUtils.js
export function parsePath(path) {
  let pathname = path || "/";
  let search = "";
  let hash = "";

  const hashIndex = pathname.indexOf("#");
  if (hashIndex !== -1) {
    hash = pathname.substr(hashIndex);
    pathname = pathname.substr(0, hashIndex);
  }

  const searchIndex = pathname.indexOf("?");
  if (searchIndex !== -1) {
    search = pathname.substr(searchIndex);
    pathname = pathname.substr(0, searchIndex);
  }

  return {
    pathname,
    search: search === "?" ? "" : search,
    hash: hash === "#" ? "" : hash
  };
}
複製程式碼

createLocation根據傳遞進來的path或者location值，返回格式化好的location，程式碼簡單。

3.3 createHref

createHref函式的作用是返回當前路徑名，例如地址http://localhost:63342/history/index.html?a=1，呼叫h.createHref(location)後返回/history/index.html?a=1

// createBrowserHistory.js
import {createPath} from "./PathUtils";

function createBrowserHistory(props = {}){
  // 處理basename（相對地址，例如：首頁為index，假如設定了basename為/the/base，那麼首頁為/the/base/index）
  const basename = props.basename ? stripTrailingSlash(addLeadingSlash(props.basename)) : "";

  function createHref(location) {
    return basename + createPath(location);
  }
  
  const history = {
    // 當前地址（包含pathname）
    createHref,
    ...
  };

  return history;
}

// PathUtils.js
function createPath(location) {
  const { pathname, search, hash } = location;

  let path = pathname || "/";
  
  if (search && search !== "?") path += search.charAt(0) === "?" ? search : `?${search}`;

  if (hash && hash !== "#") path += hash.charAt(0) === "#" ? hash : `#${hash}`;

  return path;
}
複製程式碼

3.4 listen

在這裡我們可以想象下大概的 監聽 流程：

  1. 繫結我們設定的監聽函式；
  2. 監聽歷史記錄條目的改變，觸發監聽函式。

在第二章使用程式碼中，建立了History物件後使用了h.listen函式。

// index.html
h.listen(function (location) {
  console.log(location, 'lis-1')
})
h.listen(function (location) {
  console.log(location, 'lis-2')
})
複製程式碼

可見listen可以繫結多個監聽函式，我們先看作者的createTransitionManager.js是如何實現繫結多個監聽函式的。

createTransitionManager是過渡管理（例如：處理block函式中的彈框、處理listener的佇列）。程式碼風格跟createBrowserHistory幾乎一致，暴露全域性函式，呼叫後返回物件即可使用。

// createTransitionManager.js
function createTransitionManager() {
  let listeners = [];

  // 設定監聽函式
  function appendListener(fn) {
    let isActive = true;

    function listener(...args) {
      // good
      if (isActive) fn(...args);
    }

    listeners.push(listener);

    // 解除
    return () => {
      isActive = false;
      listeners = listeners.filter(item => item !== listener);
    };
  }

  // 執行監聽函式
  function notifyListeners(...args) {
    listeners.forEach(listener => listener(...args));
  }

  return {
    appendListener,
    notifyListeners
  };
}
複製程式碼
  1. 設定監聽函式appendListener：fn就是使用者設定的監聽函式，把所有的監聽函式儲存在listeners陣列中；
  2. 執行監聽函式notifyListeners：執行的時候僅僅需要迴圈依次執行即可。

這裡感覺有值得借鑑的地方：新增佇列函式時，增加狀態管理（如上面程式碼的isActive），決定是否啟用。

有了上面的理解，下面看listen原始碼。

// createBrowserHistory.js
import createTransitionManager from "./createTransitionManager";
const transitionManager = createTransitionManager();

function createBrowserHistory(props = {}){
  function listen(listener) {
    // 新增 監聽函式 到 佇列
    const unlisten = transitionManager.appendListener(listener);

    // 新增 歷史記錄條目 的監聽
    checkDOMListeners(1);

    // 解除監聽
    return () => {
      checkDOMListeners(-1);
      unlisten();
    };
  }

  const history = {
    // 監聽
    listen
    ...
  };

  return history;
}


複製程式碼

history.listen是當歷史記錄條目改變時，觸發回撥監聽函式。所以這裡有兩步：

  1. transitionManager.appendListener(listener)把回撥的監聽函式新增到佇列裡；
  2. checkDOMListeners監聽歷史記錄條目的改變；

下面看看如何歷史記錄條目的改變checkDOMListeners(1)。

// createBrowserHistory.js
function createBrowserHistory(props = {}){
  let listenerCount = 0;

  function checkDOMListeners(delta) {
    listenerCount += delta;
    
    // 是否已經新增
    if (listenerCount === 1 && delta === 1) {
      // 新增繫結，當歷史記錄條目改變的時候
      window.addEventListener('popstate', handlePopState);
    } else if (listenerCount === 0) {
      //  解除繫結
      window.removeEventListener('popstate', handlePopState);
    }
  }
  
  // getDOMLocation(event.state) = location = {
  //   hash: ""
  //   pathname: "/history/index.html"
  //   search: "?_ijt=2mt7412gnfvjpfeuv4hjkq2uf8"
  //   state: undefined
  // }
  function handlePopState(event) {
    handlePop(getDOMLocation(event.state));
  }
  
  function handlePop(location) {
    const action = "POP";
    setState({ action, location })
  }
}
複製程式碼

雖然作者寫了很多很細的回撥函式，可能會導致有些不好理解，但細細看還是有它道理的：

  1. checkDOMListeners：全域性只能有一個監聽歷史記錄條目的函式（listenerCount來控制）；
  2. handlePopState：必須把監聽函式提取出來，不然不能解綁；
  3. handlePop：監聽歷史記錄條目的核心函式，監聽成功後執行setState。

setState({ action, location })作用是根據當前地址資訊（location）更新history。

// createBrowserHistory.js
function createBrowserHistory(props = {}){
  function setState(nextState) {
    // 更新history
    Object.assign(history, nextState);
    history.length = globalHistory.length;

    // 執行監聽函式listen
    transitionManager.notifyListeners(history.location, history.action);
  }

  const history = {
    // 監聽
    listen
    ...
  };

  return history;
}
複製程式碼

在這裡，當更改歷史記錄條目成功後：

  1. 更新history；
  2. 執行監聽函式listen；

這就是h.listen的主要流程了，是不是還挺簡單的。

3.5 block

history.block的功能是當歷史記錄條目改變時，觸發提示資訊。在這裡我們可以想象下大概的 擷取 流程：

  1. 繫結我們設定的擷取函式；
  2. 監聽歷史記錄條目的改變，觸發擷取函式。

哈哈這裡是不是感覺跟listen函式的套路差不多呢？其實h.listen和h.block的監聽歷史記錄條目改變的程式碼是公用同一套（當然拉只能繫結一個監聽歷史記錄條目改變的函式），3.1.3為了方便理解我修改了部分程式碼，下面是完整的原始碼。

在第二章使用程式碼中，建立了History物件後使用了h.block函式（只能繫結一個block函式）。

// index.html
h.block(function (location, action) {
  return 'Are you sure you want to go to ' + location.path + '?'
})
複製程式碼

同樣的我們先看看作者的createTransitionManager.js是如何實現提示的。

createTransitionManager是過渡管理（例如：處理block函式中的彈框、處理listener的佇列）。程式碼風格跟createBrowserHistory幾乎一致，暴露全域性函式，呼叫後返回物件即可使用。

// createTransitionManager.js
function createTransitionManager() {
  let prompt = null;

  // 設定提示
  function setPrompt(nextPrompt) {
    prompt = nextPrompt;

    // 解除
    return () => {
      if (prompt === nextPrompt) prompt = null;
    };
  }

  /**
   * 實現提示
   * @param location：地址
   * @param action：行為
   * @param getUserConfirmation 設定彈框
   * @param callback 回撥函式：block函式的返回值作為引數
   */
  function confirmTransitionTo(location, action, getUserConfirmation, callback) {
    if (prompt != null) {
      const result = typeof prompt === "function" ? prompt(location, action) : prompt;

      if (typeof result === "string") {
        // 方便理解我把原始碼getUserConfirmation(result, callback)直接替換成callback(window.confirm(result))
        callback(window.confirm(result))
      } else {
        callback(result !== false);
      }
    } else {
      callback(true);
    }
  }

  return {
    setPrompt,
    confirmTransitionTo
    ...
  };
}
複製程式碼

setPrompt和confirmTransitionTo的用意：

  1. 設定提示setPrompt：把使用者設定的提示資訊函式儲存在prompt變數；
  2. 實現提示confirmTransitionTo：
    1. 得到提示資訊：執行prompt變數；
    2. 提示資訊後的回撥：執行callback把提示資訊作為結果返回出去。

下面看h.block原始碼。

// createBrowserHistory.js
import createTransitionManager from "./createTransitionManager";
const transitionManager = createTransitionManager();

function createBrowserHistory(props = {}){
  let isBlocked = false;

  function block(prompt = false) {
    // 設定提示
    const unblock = transitionManager.setPrompt(prompt);

    // 是否設定了block
    if (!isBlocked) {
      checkDOMListeners(1);
      isBlocked = true;
    }

    // 解除block函式
    return () => {
      if (isBlocked) {
        isBlocked = false;
        checkDOMListeners(-1);
      }

      // 消除提示
      return unblock();
    };
  }

  const history = {
    // 擷取
    block,
    ...
  };

  return history;
}
複製程式碼

history.block的功能是當歷史記錄條目改變時，觸發提示資訊。所以這裡有兩步：

  1. transitionManager.setPrompt(prompt) 設定提示；
  2. checkDOMListeners 監聽歷史記錄條目改變的改變。

這裡感覺有值得借鑑的地方：呼叫history.block，它會返回一個解除監聽方法，只要呼叫一下返回函式即可解除監聽或者復原（有趣）。

我們看看監聽歷史記錄條目改變函式checkDOMListeners(1)（注意：transitionManager.confirmTransitionTo）。

// createBrowserHistory.js
function createBrowserHistory(props = {}){
  function block(prompt = false) {
    // 設定提示
    const unblock = transitionManager.setPrompt(prompt);

    // 是否設定了block
    if (!isBlocked) {
      checkDOMListeners(1);
      isBlocked = true;
    }

    // 解除block函式
    return () => {
      if (isBlocked) {
        isBlocked = false;
        checkDOMListeners(-1);
      }

      // 消除提示
      return unblock();
    };
  }

  let listenerCount = 0;

  function checkDOMListeners(delta) {
    listenerCount += delta;
    
    // 是否已經新增
    if (listenerCount === 1 && delta === 1) {
      // 新增繫結，當地址欄改變的時候
      window.addEventListener('popstate', handlePopState);
    } else if (listenerCount === 0) {
      //  解除繫結
      window.removeEventListener('popstate', handlePopState);
    }
  }
  
  // getDOMLocation(event.state) = location = {
  //   hash: ""
  //   pathname: "/history/index.html"
  //   search: "?_ijt=2mt7412gnfvjpfeuv4hjkq2uf8"
  //   state: undefined
  // }
  function handlePopState(event) {
    handlePop(getDOMLocation(event.state));
  }
  
  function handlePop(location) {
    // 不需要重新整理頁面
    const action = "POP";

    // 實現提示
    transitionManager.confirmTransitionTo(
      location,
      action,
      getUserConfirmation,
      ok => {
        if (ok) {
          // 確定
          setState({ action, location });
        } else {
          // 取消
          revertPop(location);
        }
      }
    );
  }

  const history = {
    // 擷取
    block
    ...
  };

  return history;
}
複製程式碼

就是在handlePop函式觸發transitionManager.confirmTransitionTo的（3.1.3我對這裡做了修改為了方便理解）。

transitionManager.confirmTransitionTo的回撥函式callback有兩條分支，使用者點選提示框的確定按鈕或者取消按鈕：

  1. 當用戶點選提示框的確定後，執行setState({ action, location })；
  2. 當用戶點選提示框的取消後，執行revertPop(location)（忽略）。

到這裡已經瞭解完h.block函式、h.listen和createTransitionManager.js。接下來我們繼續看另一個重要的函式h.push。

3.6 push

function createBrowserHistory(props = {}){
  function push(path, state) {
    const action = "PUSH";
    // 構造location
    const location = createLocation(path, state, createKey(), history.location);

    // 執行block函式，彈出框
    transitionManager.confirmTransitionTo(
      location,
      action,
      getUserConfirmation,
      ok => {
        if (!ok) return;

        // 獲取當前路徑名
        const href = createHref(location);
        const { key, state } = location;

        // 新增歷史條目
        globalHistory.pushState({ key, state }, null, href);
        
        if (forceRefresh) {
          // 強制重新整理
          window.location.href = href;
        } else {
          // 更新history
          setState({ action, location });
        }
      }
    );
  }

  const history = {
    // 跳轉
    push,
    ...
  };

  return history;
}
複製程式碼

這裡最重要的是globalHistory.pushState函式，它直接新增新的歷史條目。

3.7 replace

function createBrowserHistory(props = {}){
  function replace(path, state) {
    const action = "REPLACE";
    // 構造location
    const location = createLocation(path, state, createKey(), history.location);

    // 執行block函式，彈出框
    transitionManager.confirmTransitionTo(
      location,
      action,
      getUserConfirmation,
      ok => {
        if (!ok) return;
        // 獲取當前路徑名
        const href = createHref(location);
        const { key, state } = location;

        globalHistory.replaceState({ key, state }, null, href);

        if (forceRefresh) {
          window.location.replace(href);
        } else {
          setState({ action, location });
        }
      }
    );
  }

  const history = {
    // 跳轉
    replace,
    ...
  };

  return history;
}
複製程式碼

其實push和replace的區別就是history.pushState和history.replaceState的區別。

3.8 go

function createBrowserHistory(props = {}){
   function go(n) {
    globalHistory.go(n);
  }

  function goBack() {
    go(-1);
  }

  function goForward() {
    go(1);
  }

  const history = {
    // 跳轉
    go,
    goBack,
    goForward,
    ...
  };

  return history;
}
複製程式碼

其實就是history.go的運用。

4.demo

手把手教你寫history，稍後放出哈哈哈～

5.總結

總的來說，如果不需要block的話，原生方法可以滿足。最主要還是對history.pushState、history.replaceState、history.go(n)、popstate方法的運用。公司加班嚴重，利用僅剩的時間擴充下自己的知識面，最好的方法那就是閱讀原始碼了哈哈。開始總會有點困難，第一次讀一臉懵逼，第二次讀二臉懵逼，第三次讀有點懵逼，第四次讀這b牛逼～。只要堅持下多寫點測試用例慢慢理解就好了，加油！

fafa

相關推薦

history原始碼解析-管理會話歷史記錄

history是一個JavaScript庫，可讓你在JavaScript執行的任何地方輕鬆管理會話歷史記錄 1.前言 history是由Facebook維護的，react-router依賴於history，區別於瀏覽器的window.history，history是包含window.histor

HTML5 history.pushState()和history.replaceState()新增、修改歷史記錄用法介紹

body popu spa htm 動作 使用 lang scrip null 抽空研究了下這兩個新方法，確實可以解決很多問題 1、使用pushState()方法 可以控制瀏覽器自帶的返回按鈕: 有時候我們想讓用戶點擊瀏覽器返回按鈕時，不返回，或執行其他操作，這時，

Html5使用history對象history.pushState()和history.replaceState()方法添加和修改瀏覽歷史記錄

append() 網頁 java 數據 let ice 才會 想要 對象 根據網上參考自己做個筆記：參考網址：http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5為histor

Android原始碼解析之應用程式資源管理器（Asset Manager）的建立過程分析

轉載自：https://blog.csdn.net/luoshengyang/article/details/8791064 我們分析了Android應用程式資源的編譯和打包過程，最終得到的應用程式資源就與應用程式程式碼一起打包在一個APK檔案中。Android應用程式在執行的過程中，是通過一個

MyBatis原始碼解析之日誌記錄

一 .概述 MyBatis沒有提供日誌的實現類，需要接入第三方的日誌元件，但第三方日誌元件都有各自的Log級別，且各不相同，但MyBatis統一提供了trace、debug、warn、error四個級別； 自動掃描日誌實現，並且第三方日誌外掛載入優先順序如下：slf4J → commonsLoging →

【學習轉載】MyBatis原始碼解析——日誌記錄

宣告：轉載自前輩：開心的魚a1 一 .概述 MyBatis沒有提供日誌的實現類，需要接入第三方的日誌元件，但第三方日誌元件都有各自的Log級別，且各不相同，但MyBatis統一提供了trace、debug、warn、error四個級別； 自動掃描日誌實現，並且第三方日誌外掛載入優先順序如下：sl

Shiro原始碼分析(2) - 會話管理器(SessionManager)

本文在於分析Shiro原始碼，對於新學習的朋友可以參考 [開濤部落格](http://jinnianshilongnian.iteye.com/blog/2018398)進行學習。 本文對Shiro中的SessionManager進行分析，SessionMan

History 歷史記錄

一. history 是什麼？ window上的一個物件，由來儲存瀏覽器訪問過的歷史   二. 用途： 可以動態跳轉任意一個已在歷史記錄中的地址   三. history方法： 1.forward() : 向後翻一頁 2. back(): 回退一頁

history.pushState() 給網站新增和修改瀏覽歷史記錄

假設一個使用場景： 後臺管理系統專案，左右固定佈局。左側是通用佈局，右側頁面是通過ajax切換的 當我們切換選單後，想返回上一頁，通常點選瀏覽器自帶的回退。會發現回退的不是上一頁，而是最開始開啟這個專案的那一頁。並且當我們重新整理當前頁面。也會自動回退到最初始的頁面

caffe原始碼解析：層（layer）的註冊與管理

caffe中所有的layer都是類的結構，它們的構造相關的函式都註冊在一個全域性變數g_registry_ 中。 首先這個變數的型別 CreatorRegistry是一個map定義， public: typedef shared_ptr<Layer<Dt

Multidex記錄三：原始碼解析

記錄Multidex原始碼解析 為什麼要用記錄呢，因為我從開始接觸Android時我們的專案就在65535的邊緣。不久Google就出了multidex的解決方案。我們也已經接入multidex好多年，但我自己還沒有接入，知其然而不知其所以然。出了問題只能自

yum history 歷史記錄功能

現在的 yum 帶有歷史記錄功能,可以檢視過往的事務,重做或回滾這些事務. 顯示事務的命令是 “yum history”， 在歷史中搜索某個軟體包是“yum history list XXXX”, 顯示某個事務的詳細資訊用 “yum history info N”

centos使用yum history歷史記錄功能解除安裝軟體

yum 帶有歷史記錄功能,可以檢視過往的事務,重做或回滾這些事務. 在歷史中搜索某個軟體包是“yum history list XXX“ 回滾是 “yum history undo N” 例如我要解除安裝yum安裝的git則： yum history

Hadoop_YARN資源管理系統原始碼解析

目錄 一、YARN產生的背景(MRv1的侷限性) 二、YARN原始碼結構 三、YARN基本架構 四、YARN各模組詳細分析 五、MRAppMaster-MapReduce On YARN實現 六、YarnChild-MR引擎啟動入口 七、總結 一、YARN

Android 本地歷史記錄、及產品標籤（支援單選、多選）實現（附原始碼）（使用鴻洋大神的FlowLayout開源庫）

        最近的專案需要做本地歷史記錄功能，以前寫的有些過時了，就在網上查了查較好的開源庫、實現方式等。最終選擇了鴻洋大神的FlowLayout流式佈局，再搭配SharedPreferencesUtil工具類來實現本地歷史記錄功能。同時FlowLayout開源庫還非常適

執行緒池的管理，原始碼解析以及RejectedExecution

       對於執行緒池用的也不少，但是最近還是糟了一坑。還是要深入瞭解一下執行緒池的使用，以免以後遭重        對於JavaEE專案來說，服務端專案是一直啟動著，有的時候需要非同步或者大併發的專案來的時候，就會想到使用多執行緒或者執行緒池來維護有關的執行緒。    

docker+jenkins的構建歷史記錄(Build History)時間不正確

nat coord 基礎 history run style 統一 ash 方法 1、分別查看宿主機時間和容器時間 宿主機時間 root@fcaad17f146a:/# date Fri Jan 11 14:17:53 CST 2019 容器時間 [root@001

【Spring實戰】----原始碼解析SessionFactory及Session的管理及getCurrentSession的使用

在上一篇Hibernate5整合中當使用sessionFactory.getCurrentSession()時會報錯Could not obtain transaction-synchronized Session for current thread，本篇就從原始碼角度

Etherlab原始碼解析----同步管理器SM配置(郵箱通訊）

主站和從站間的郵箱通訊通常使用SM0和SM1，IGH Etherlab在控制從站進入preop之前需要配置從站的SM0和SM1暫存器。 1、SM暫存器 SM0配置暫存器的起始地址為0x800,SM1配置暫存器的起始地址為0x808，每個通道使用8個位元組。

Etherlab原始碼解析----同步管理器SM配置(過程資料）

在進行過程資料通訊之前，EtherCAT主站需要配置從站的同步管理器，通常為SM2和SM3，本文介紹IGH Etherlab配置從站SM2和SM3的過程。 1、SM暫存器 SM配置暫存器從0x800開始，每個通道使用8個位元組。 2、執行