美文网首页
前端路由实现原理 demo

前端路由实现原理 demo

作者: Allan要做活神仙 | 来源:发表于2018-08-26 13:36 被阅读18次

    Hash

    function Router() {
      this.routes = {};
      this.currentUrl = "";
    }
    Router.prototype.route = function(path, callback) {
      this.routes[path] = callback || function() {};
    };
    Router.prototype.refresh = function() {
      this.currentUrl = location.hash.slice(1) || "/";
      this.routes[this.currentUrl]();
    };
    Router.prototype.init = function() {
      window.addEventListener("load", this.refresh.bind(this), false);
      window.addEventListener("hashchange", this.refresh.bind(this), false);
    };
    
    window.Router = new Router();
    window.Router.init();
    
    var content = document.querySelector("body");
    // change Page anything
    function changeBgColor(color) {
      content.style.backgroundColor = color;
    }
    
    Router.route("/", function() {
      changeBgColor("white");
    });
    Router.route("/orange", function() {
      changeBgColor("orange");
    });
    Router.route("/purple", function() {
      changeBgColor("purple");
    });
    

    相关文章

      网友评论

          本文标题:前端路由实现原理 demo

          本文链接:https://www.haomeiwen.com/subject/xcloiftx.html