国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

你需要知道的單頁面路由實現(xiàn)原理

light / 3267人閱讀

摘要：顯示為顯示為顯示為單頁面應(yīng)用用戶訪問軌跡埋點開發(fā)過單頁面應(yīng)用的同學(xué)，一定比較清楚，單頁面應(yīng)用的路由切換是無感知的，不會重新進(jìn)行請求去獲取頁面，而是通過改變頁面渲染視圖來實現(xiàn)。

前言

最近開發(fā)的埋點項目，需要記錄用戶行為軌跡即用戶頁面訪問順序。需要在頁面跳轉(zhuǎn)的時候，記錄用戶訪問的信息（比如 url ，請求頭部等），非單頁面應(yīng)用可以給 window 對象加上一個 beforeunload 事件，在頁面離開時觸發(fā)采集開關(guān)，但是現(xiàn)在很多業(yè)務(wù)是單頁面應(yīng)用，用戶切換地址的時候，是無刷新的局部更新，沒有辦法觸發(fā) beforeunload。所以單頁面應(yīng)用的路由插件一定運用了 window 自帶的，無刷新修改用戶瀏覽記錄的方法，pushState 和 replaceState。

pushState 和 replaceState 了解一下 
history 提供了兩個方法，能夠無刷新的修改用戶的瀏覽記錄，pushSate，和 replaceState，區(qū)別的 pushState 在用戶訪問頁面后面添加一個訪問記錄， replaceState 則是直接替換了當(dāng)前訪問記錄

history 對象的詳細(xì)信息已經(jīng)有很多很好很詳細(xì)的介紹文獻(xiàn)，這里不再做總結(jié)，我們引用阮老師的教程介紹，history對象 -- JavaScript 標(biāo)準(zhǔn)參考教程（alpha）

history.pushState

history.pushState方法接受三個參數(shù)，依次為：

state：一個與指定網(wǎng)址相關(guān)的狀態(tài)對象，popstate事件觸發(fā)時，該對象會傳入回調(diào)函數(shù)。如果不需要這個對象，此處可以填null。
title：新頁面的標(biāo)題，但是所有瀏覽器目前都忽略這個值，因此這里可以填null。
url：新的網(wǎng)址，必須與當(dāng)前頁面處在同一個域。瀏覽器的地址欄將顯示這個網(wǎng)址。
假定當(dāng)前網(wǎng)址是example.com/1.html，我們使用pushState方法在瀏覽記錄（history對象）中添加一個新記錄。



var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "2.html");

添加上面這個新記錄后，瀏覽器地址欄立刻顯示 example.com/2.html，但并不會跳轉(zhuǎn)到 2.html，甚至也不會檢查2.html 是否存在，它只是成為瀏覽歷史中的最新記錄。這時，你在地址欄輸入一個新的地址(比如訪問 google.com )，然后點擊了倒退按鈕，頁面的 URL 將顯示 2.html；你再點擊一次倒退按鈕，URL 將顯示 1.html。

總之，pushState 方法不會觸發(fā)頁面刷新，只是導(dǎo)致 history 對象發(fā)生變化，地址欄會有反應(yīng)。

如果 pushState 的 url參數(shù)，設(shè)置了一個新的錨點值（即hash），并不會觸發(fā) hashchange 事件。如果設(shè)置了一個跨域網(wǎng)址，則會報錯。



// 報錯
history.pushState(null, null, "https://twitter.com/hello");

上面代碼中，pushState想要插入一個跨域的網(wǎng)址，導(dǎo)致報錯。這樣設(shè)計的目的是，防止惡意代碼讓用戶以為他們是在另一個網(wǎng)站上。

history.replaceState

history.replaceState 方法的參數(shù)與 pushState 方法一模一樣，區(qū)別是它修改瀏覽歷史中當(dāng)前紀(jì)錄,假定當(dāng)前網(wǎng)頁是 example.com/example.html。



history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");

history.back()
// url顯示為http://example.com/example.html?page=1

history.back()
// url顯示為http://example.com/example.html

history.go(2)
// url顯示為http://example.com/example.html?page=3

單頁面應(yīng)用用戶訪問軌跡埋點

開發(fā)過單頁面應(yīng)用的同學(xué)，一定比較清楚，單頁面應(yīng)用的路由切換是無感知的，不會重新進(jìn)行 http 請求去獲取頁面，而是通過改變頁面渲染視圖來實現(xiàn)。所以他的實現(xiàn)原理一定也是通過原生的 pushState 或則 replaceState 來實現(xiàn)的。所以在頁面跳轉(zhuǎn)的時候一定會調(diào)用 pushState 或則 replaceState ，要記錄用戶的跳轉(zhuǎn)信息，我們只要攔截 pushState 和 replaceState，在執(zhí)行默行為前先執(zhí)行我們的方法就能夠采集到用戶的跳轉(zhuǎn)信息了



// 改寫思路：拷貝 window 默認(rèn)的 replaceState 函數(shù)，重寫 history.replaceState 在方法里插入我們的采集行為，在重寫的 replaceState 方法最后調(diào)用，window 默認(rèn)的 replaceState 方法

collect = {}

collect.onPushStateCallback : function(){}  // 自定義的采集方法

(function(history){
    var replaceState = history.replaceState;   // 存儲原生 replaceState
    history.replaceState = function(state, param) {     // 改寫 replaceState
       var url = arguments[2];
       if (typeof collect.onPushStateCallback == "function") {
             collect.onPushStateCallback({state: state, param: param, url: url});   //自定義的采集行為方法
       }
       return replaceState.apply(history, arguments);    // 調(diào)用原生的 replaceState
    };
 })(window.history);

vue-router 的路由實現(xiàn)

既然知道了這個原理，我們來看下 vue-router 的實現(xiàn)，我們打開 vue-router 項目地址,把項目克隆下來，或則直接在 github 上預(yù)覽，在 Vue 開發(fā)的項目里，我們通過 router.push("home") 來實現(xiàn)頁面的跳轉(zhuǎn)，所以我們檢索下，push 方法的實現(xiàn)

我們檢索到了 20 個 js 文件，

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/107749.html

相關(guān)文章

  • 【Vue.js 牛刀小試】：第十二章 - 使用 Vue Router 實現(xiàn) Vue 中的前端路由控制

    摘要：而路由則是使用了中新增的事件和事件。總結(jié)這一章主要是介紹了如何使用在中構(gòu)建我們的前端路由。 系列目錄地址 一、基礎(chǔ)知識概覽 第一章 - 一些基礎(chǔ)概念（posted at 2018-10-31） 第二章 - 常見的指令的使用（posted at 2018-11-01） 第三章 - 事件修飾符的使用（posted at 2018-11-02） 第四章 - 頁面元素樣式的設(shè)定（posted a...

    cpupro 評論0 收藏0

  • 你知道前端單頁面路由是怎么實現(xiàn)的嗎？

    摘要：出于安全的考慮，開發(fā)人員無法得知用戶瀏覽過的。這個方法接受一個參數(shù)，表示向后或向前跳轉(zhuǎn)的頁面數(shù)的一個整數(shù)值。該事件觸發(fā)時，該對象會傳入回調(diào)函數(shù)。假定當(dāng)前網(wǎng)頁是。顯示為顯示為顯示為顯示為顯示為顯示為三事件事件是對象上的事件，配合和方法使用。 首先要學(xué)習(xí)一下history對象，history對象保存著用戶的上網(wǎng)記錄，從瀏覽器窗口打開的那一刻算起。出于安全的考慮，開發(fā)人員無法得知用戶瀏覽過的...

    wthee 評論0 收藏0

  • 前端基礎(chǔ)

    摘要：談起閉包，它可是兩個核心技術(shù)之一異步基于打造前端持續(xù)集成開發(fā)環(huán)境本文將以一個標(biāo)準(zhǔn)的項目為例，完全拋棄傳統(tǒng)的前端項目開發(fā)部署方式，基于容器技術(shù)打造一個精簡的前端持續(xù)集成的開發(fā)環(huán)境。 這一次，徹底弄懂 JavaScript 執(zhí)行機制 本文的目的就是要保證你徹底弄懂javascript的執(zhí)行機制，如果讀完本文還不懂，可以揍我。 不論你是javascript新手還是老鳥，不論是面試求職，還是日...

    graf 評論0 收藏0

  • vue-router 基礎(chǔ)知識點

    摘要：路由模塊的本質(zhì)就是建立起和頁面之間的映射關(guān)系。模式的原理是事件監(jiān)測值變化，可以在對象上監(jiān)聽這個事件。這兩個方法應(yīng)用于瀏覽器記錄棧，在當(dāng)前已有的基礎(chǔ)之上，它們提供了對歷史記錄修改的功能。 vue-router 這里的路由并不是指我們平時所說的硬件路由器，這里的路由就是SPA（單頁應(yīng)用）的路徑管理器。再通俗的說，vue-router就是WebApp的鏈接路徑管理系統(tǒng)。vue-router是...

    ningwang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<