成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端路由之 Hash 路由原生實(shí)現(xiàn)

mcterry / 1683人閱讀

摘要：路由的實(shí)現(xiàn)使用過框架路由的人肯定都有注意到中的號，為什么路由頁面不會跳轉(zhuǎn)還記得鏈接的錨點(diǎn)是怎么實(shí)現(xiàn)的嗎。

Hash 路由的實(shí)現(xiàn) 使用過框架路由的人肯定都有注意到url中的#號，為什么hash路由頁面不會跳轉(zhuǎn)——還記得a鏈接的錨點(diǎn)是怎么實(shí)現(xiàn)的嗎。 
多個路由集中處理


匹配對應(yīng)路由


利用回調(diào)處理相應(yīng)的邏輯
代碼(詳細(xì)的注釋) 
  
  

  

  
頭部

  



    function Router() {
       // 路由儲存
       this.routes = {};
       // 當(dāng)前路由
       this.currentUrl = "";
    }
    Router.prototype = {
      // 路由處理
      route: function (path, callback) {
        this.routes[path] = callback || function(){};
      },
       // 頁面刷新
      refresh: function () {
        // 當(dāng)前的hash值
        this.currentUrl = location.hash.slice(1) || "/";
        // 執(zhí)行hash值改變后相對應(yīng)的回調(diào)函數(shù)
        this.routes[this.currentUrl]();
      },
      // 頁面初始化
      init: function () {
        // 頁面加載事件
        window.addEventListener("load", this.refresh.bind(this), false);
        // hash 值改變事件
        window.addEventListener("hashchange", this.refresh.bind(this), false);
      }
    }
   
    // 全局掛載
    window.Router = new Router();
    // 初始化
    window.Router.init();

    let obj = document.querySelector(".result");
    
    function changeConent (cnt) {
      obj.innerHTML = cnt
    }

    // 匹配路由做相應(yīng)的操作
    Router.route("/", () => {
      changeConent("當(dāng)前是首頁");
    })

    Router.route("/item", () => {
      changeConent("當(dāng)前是item頁面");
    })

    Router.route("/list", () => {
      // ajax 的數(shù)據(jù)就可以這樣去拼接
      setTimeout(() => {
        obj.innerHTML = "
Hello World
"
      }, 1000)
    })

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83475.html

相關(guān)文章

  • 原生 js 實(shí)現(xiàn)一個前端路由 router

    摘要：實(shí)現(xiàn)原理現(xiàn)在前端的路由實(shí)現(xiàn)一般有兩種，一種是路由，另外一種是路由?，F(xiàn)在的前端主流框架的路由實(shí)現(xiàn)方式都會采用路由，本項(xiàng)目采用的也是。當(dāng)值發(fā)生改變的時候，我們可以通過事件監(jiān)聽到，從而在回調(diào)函數(shù)里面觸發(fā)某些方法。 效果圖： showImg(https://segmentfault.com/img/remote/1460000018058419?w=422&h=744); 項(xiàng)目地址：https...

    gggggggbong 評論0 收藏0

  • JS原生一步步實(shí)現(xiàn)前端路由和單頁面應(yīng)用

    摘要：這里借鑒了一下的處理方式，我們把單獨(dú)模塊的包裝成一個函數(shù)，提供一個全局的回調(diào)方法，加載完成時候再調(diào)用回調(diào)函數(shù)。 前端路由實(shí)現(xiàn)之 #hash 先上github項(xiàng)目地址： spa-routers運(yùn)行效果圖showImg(https://segmentfault.com/img/bVFi7l?w=581&h=312); 背景介紹 用了許多前端框架來做spa應(yīng)用，比如說backbone，ang...

    idealcn 評論0 收藏0

  • 前端路由原理解析和實(shí)現(xiàn)

    摘要：如何實(shí)現(xiàn)前端路由要實(shí)現(xiàn)前端路由，需要解決兩個核心如何改變卻不引起頁面刷新如何檢測變化了下面分別使用和兩種實(shí)現(xiàn)方式回答上面的兩個核心問題。 原文鏈接：github.com/whinc/blog/… 在單頁應(yīng)用如此流行的今天，曾經(jīng)令人驚嘆的前端路由已經(jīng)成為各大框架的基礎(chǔ)標(biāo)配，每個框架都提供了強(qiáng)大的路由功能，導(dǎo)致路由實(shí)現(xiàn)變的復(fù)雜。想要搞懂路由內(nèi)部實(shí)現(xiàn)還是有些困難的，但是如果只想了解路由實(shí)現(xiàn)基本...

    lavor 評論0 收藏0

  • 國內(nèi)存在感最低的前端API——瀏覽器路由

    摘要：最新一直在看關(guān)于和路由這塊的知識，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由的。在瀏覽器中實(shí)現(xiàn)前端路由主要有兩種方式一個是我們常用的，另一個是提供的。該對象的和分別表示的各個部分，它們因此被稱為分解屬性。 最新一直在看關(guān)于 Vue 和 React 路由這塊的知識，最終發(fā)現(xiàn)這些路由框架的模塊功能的實(shí)現(xiàn)都是基于瀏覽器原生路由 API?的。本著追根溯源的初心，于是就想著將瀏覽...

    U2FsdGVkX1x 評論0 收藏0

發(fā)表評論

0條評論

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