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

mcterry 發(fā)布于2019-08-20 17:18 / 1684人閱讀

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

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

多個(gè)路由集中處理
匹配對(duì)應(yīng)路由
利用回調(diào)處理相應(yīng)的邏輯

代碼(詳細(xì)的注釋)

  
    index
    item
    list
  
  

  

  頭部
  


    function Router() {
       // 路由儲(chǔ)存
       this.routes = {};
       // 當(dāng)前路由
       this.currentUrl = "";
    }
    Router.prototype = {
      // 路由處理
      route: function (path, callback) {
        this.routes[path] = callback || function(){};
      },
       // 頁(yè)面刷新
      refresh: function () {
        // 當(dāng)前的hash值
        this.currentUrl = location.hash.slice(1) || "/";
        // 執(zhí)行hash值改變后相對(duì)應(yīng)的回調(diào)函數(shù)
        this.routes[this.currentUrl]();
      },
      // 頁(yè)面初始化
      init: function () {
        // 頁(yè)面加載事件
        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)前是首頁(yè)");
    })

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

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