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

資訊專欄INFORMATION COLUMN

大話 SPA router

wayneli / 3476人閱讀

摘要：而單頁應(yīng)用只提供一個文件，在頁面初始化的時候加載等等，然后通過去動態(tài)更新視圖，從而實(shí)現(xiàn)交互，這避免了頁面的刷新，跳轉(zhuǎn)等等。這個方法是用來更換歷史記錄的。獲取當(dāng)前歷史棧棧頂數(shù)據(jù)。比如說在這里面可以通過路徑的不同，然后去渲染不同的頁面。

好吧，俺承認(rèn)好像要當(dāng)一把標(biāo)題黨了，這篇文章目的是記錄一下對于 spa 的核心 —— 路由的學(xué)習(xí)，并沒有什么超人類的東西，好了，我們開始吧。
SPA 是個啥？

相信還是有不少的萌新是不知道 SPA 是個啥？是不是想問一句，你是誰？你是不是搞美容的那個 SPA。其實(shí)并不是，SPA 在前端領(lǐng)域可不是美容的，它是單頁應(yīng)用的意思，那么啥是單頁應(yīng)用呢？在這個時代如果不知道這個名詞的多半是萌新了,我們也簡單的聊一聊這個東西。

以前我們開發(fā)應(yīng)用的時候，會寫多個頁面，比如說首頁、詳情等等，我們通過點(diǎn)擊頁面的 a 標(biāo)簽，然后去獲取另一個頁面，重新加載，或者跳轉(zhuǎn)。而單頁應(yīng)用只提供一個 HTML 文件，在頁面初始化的時候加載 js、css 等等，然后通過 js 去動態(tài)更新視圖，從而實(shí)現(xiàn)交互，這避免了頁面的刷新，跳轉(zhuǎn)等等。

So，單頁應(yīng)用的優(yōu)點(diǎn)是啥呢？

前后端分離，提升開發(fā)效率

減輕服務(wù)器壓力，前端完成很大一部分邏輯

提升用戶體驗(yàn)，如絲般潤滑啊

技術(shù)核心 
其實(shí)談到 SPA，我們實(shí)現(xiàn)的方法大概就有 hash 和 H5 的 History 兩種，我們來了解下。
History API

在 HTML5 中，我們可以發(fā)現(xiàn) History 多出了幾個 API，我們來一起走一遍：

history.pushState( data, title[, url] ): 顧名思義，往歷史記錄棧棧頂添加一條數(shù)據(jù)，data 會作為觸發(fā) popstate 事件的時候的參數(shù)，titile 為標(biāo)題，url 為頁面地址。

history.replaceState( data, title[, url] ): 這個方法是用來更換歷史記錄的。

history.state: 獲取當(dāng)前歷史棧棧頂數(shù)據(jù)。

event -> popstate: 當(dāng)用戶點(diǎn)擊瀏覽器回退或者前進(jìn)按鈕就會觸發(fā) popstate 事件。

我們來搞一個簡單的例子，就知道 history 是怎么做的了。

這是 html 文件，下面就是 js 文件了：

const routes = document.querySelectorAll(".route");
routes.forEach(route => {
    route.addEventListener("click", e => {
        e.preventDefault();
        // 在這里面，我們也是可以通過參數(shù)的不同，然后渲染不同的頁面。
        const path = route.getAttribute("path");
        window.history.pushState({ public: "data" }, null, path);
    }, false);
});

window.addEventListener("popstate", e => {
    // 比如說在這里面可以通過路徑的不同，然后去渲染不同的頁面。
}, false);

我們首先是通過點(diǎn)擊，然后將 data、url 等參數(shù) push 到棧里面，然后渲染頁面，如果說我們通過瀏覽器的回退或者前進(jìn)，就會觸發(fā) popstate，然后通過不同路徑進(jìn)行頁面渲染，其實(shí) history 就是這么一個基本原理。

Hash

這種方案就是去監(jiān)聽 hash 的變化，然后去做相應(yīng)的操作，其實(shí)非常簡單，我們需要用到 location.hash 和 hashchange 這個事件就好了，很簡單，和上面的操作差不多這里就不說了。

如果各位看官看的還行，可以到 GitHub 里給我一顆小小的 star 支持一下，謝謝。

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

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

相關(guān)文章

  • 大話React-Redux

    摘要：一組件將所有組件分成兩大類組件和容器組件。前者負(fù)責(zé)與外部的通信，將數(shù)據(jù)傳給后者，由后者渲染出視圖。也就是說，用戶負(fù)責(zé)視覺層，狀態(tài)管理則是全部交給它。前者需要從計(jì)算得到，后者需要向外發(fā)出。最后，生成對象，并使用在根組件外面包一層。 一、UI 組件 React-Redux 將所有組件分成兩大類：UI 組件（presentational component）和容器組件（container c...

    huangjinnan 評論0 收藏0

  • 利用vue-cli配合vue-router搭建一個完整的spa流程（二）

    摘要：利用配合搭建一個完整的流程一在一中寫到了主要頁面的編寫，現(xiàn)在開始三個路由頁面的編寫。每個列表綁定跳轉(zhuǎn)到詳情頁的函數(shù)。整體思想通過監(jiān)控的變化，變化后執(zhí)行函數(shù)，隨后重新獲取數(shù)據(jù)。 上篇文章太長了，編寫時拖動太麻煩，重開一篇。利用vue-cli配合vue-router搭建一個完整的spa流程（一） 在（一）中寫到了主要頁面的編寫，現(xiàn)在開始三個路由頁面的編寫。 第一步： 路由實(shí)例inde...

    mcterry 評論0 收藏0

  • vue 2 + vue-router 2 實(shí)現(xiàn)SPA

    摘要：標(biāo)簽是展示我們匹配到的組件的區(qū)域。其中可以是通過創(chuàng)建的組件構(gòu)造器，或者，只是一個組件配置對象。縮寫相當(dāng)于創(chuàng)建和掛載根實(shí)例。創(chuàng)建實(shí)例及配置，即。參考文獻(xiàn)官方文檔學(xué)習(xí)筆記構(gòu)建單頁應(yīng)用最佳實(shí)戰(zhàn)一個完整的應(yīng)用起手 github項(xiàng)目地址請點(diǎn)這里。 使用 Vue.js 時，我們就已經(jīng)把組件組合成一個應(yīng)用了，當(dāng)我們要把 vue-router 加進(jìn)來，只需要配置組件和路由映射，然后告訴 vue-rou...

    OBKoro1 評論0 收藏0

  • [譯]如何基于Laravel構(gòu)建Vue應(yīng)用（一）

    摘要：使用能優(yōu)雅的構(gòu)建并且與單頁面應(yīng)用程序完美結(jié)合。我們將重點(diǎn)關(guān)注所需的所有部分，然后在后續(xù)教程中，我們將進(jìn)一步演示如何使用作為層。例如，如果用戶刷新路由，我們將需要匹配該路由并返回應(yīng)用程序模板。運(yùn)行應(yīng)用程序該基礎(chǔ)用于構(gòu)建具有和路由器的。 使用Laravel能優(yōu)雅的構(gòu)建API并且與Vue單頁面應(yīng)用程序（SPA）完美結(jié)合。在本教程中，我們將展示如何啟動和運(yùn)行Vue路由器以及用于構(gòu)建SPA的La...

    Rocko 評論0 收藏0

  • 利用vue-cli配合vue-router搭建一個完整的spa流程（一）

    摘要：利用配合搭建一個完整的流程二前言所用的一些基本操作。全局安裝創(chuàng)建一個基于的模板創(chuàng)建過程中，為必須，其他語法檢測，單元測試等按需求安裝。為入口文件，的實(shí)例在這里書寫。掛載在中的標(biāo)簽上。定時器的作用是模擬數(shù)據(jù)請求延時。 2017/5/9 更新！GitHubpages搞了下，PC可以瀏覽。↓ https://15901233752.github.io... showImg(https://...

    cgh1999520 評論0 收藏0

發(fā)表評論

0條評論

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