阿里P7：你了解路由吗？

交代背景

年后被迫跳槽，其中种种一言难尽，因而投递简历，虽然有了年前尝试积累，但年前毕竟不是真正的跳槽。因为没有遵循大佬们的跳槽心得，面试时，先投小厂，再投大厂，致使，随机面试，上来就碰见了个阿里的P7，被问的哑口无言。时隔半月，复盘总结

跳槽心得：小厂出来的，除了基本功要扎实以外，投简历必定要先头小厂在投你想去的公司，遵循先易后难，先拿到一些offer，有了底气，才能有信心，才能有大几率去你想去的公司，虽然本人比较遗憾（也是能力不够）没有去到想去的公司，可是仍是祝愿你们都能如愿去到想去的单位（我的感受面试时信心很是重要，毕竟写代码的能力和面试中的表达那是两码事）

懵逼经历

面试头一遭，给了阿里，总结以下：

首先大佬让介绍本身：.......胡说八道了一堆

而后大佬让说一下本身的优势：......又胡说八道了一堆

接着大佬让分别说一下这些优势有都时怎么体现的：.....再次胡说八道一大堆（因为没有准备，即兴真的很糟糕）

再而后，噩梦开始..... 复盘总结以下：

• 围绕一个知识点连续发问，直到无言以对（反映出面试大厂准备必定要深刻，切忌知道皮毛）
• 问的知识点都是你以前在优势中提到的技术积累（反映出在介绍本身时必定要慎重，不太深刻的知识必定不要放在介绍里）
• 问的问题考察还都是以基础为主，只不过深刻挖掘这些基础知识了（反映出基础必定要扎实再去阿里）

以上都是三点总结为血泪教训，接下来我以题目的例子为例，模拟大佬面试问的一个问题（假设我都能回答上来），帮助后来人在遇见想去的公司以前，杜撰面试场景，增长成功的机会！

真题模拟

大佬：你了解路由吗？

我：了解，这种spa应用，都是用的前端路由，其余的都是后端路由

大佬：哪能分别解释一下吗？

我：后端路由又可称之为服务器端路由，由于对于服务器来讲，当接收到客户端发来的HTTP请求，就会根据所请求的相应URL，来找到相应的映射函数，而后执行该函数，并将函数的返回值发送给客户端。对于最简单的静态资源服务器，能够认为，全部URL的映射函数就是一个文件读取操做。对于动态资源，映射函数多是一个数据库读取操做，也多是进行一些数据的处理，等等。而后根据这些读取的数据，在服务器端就使用相应的模板来对页面进行渲染后，再返回渲染完毕的页面。这种方式在早期的前端开发中很是广泛，好比京东页面就是个后端路由，他请求的就是一个页面

对于前端路由来讲，路由的映射函数一般是进行一些DOM的显示和隐藏操做

大佬：那他们分别有什么优缺点呢？

我：后端路由优势是：安全性好，SEO好，缺点是：加大服务器的压力，不利于用户体验，代码冗合 ，前端的路由就是优势是：前端路由在访问一个新页面的时候仅仅是变换了一下路径而已，没有了网络延迟，对于用户体验来讲会有至关大的提高缺点是：使用浏览器的前进，后退键的时候会从新发送请求，没有合理地利用缓存，一样的不利于seo

大佬：那前端路由有几种方案呢？

我： 前端路由主要有如下两种实现方案：

• 一、hash
• 二、history Api

大佬：那他们有什么区别呢？

我：hash在地址栏中的表现有一个# 而history并无（这是我当时的答案，比较草率）

大佬：那你分别说说他们的实现原理

一、hash

我：hash实现就是基于location.hash来实现的。其实现原理也很简单，location.hash的值就是URL中#后面的内容。好比百度网站，设置它的location.hash='#abcsdf'，那么他的网址就是：

https://www.baidu.com/#abcsdf
复制代码

咱们可使用hashchange事件来监听hash的变化。而且经过history.length能看到路由总数

大佬：你能不能用hash的方案实现一个路由切换

//首先咱们要有个html
  <ul>
      <li><a href="#luyou1">路由1</a></li>
      <li><a href="#luyou2">路由2</a></li>
      <li><a href="#luyou3">路由3</a></li>
    </ul>
    <div id="luyouid"></div>
复制代码

//ts逻辑
      class router {
        //存贮当前路由
        hashStr: String;
        constructor(hash: String) {
          //初始化赋值
          this.hashStr = hash;
          //初始化
          this.watchHash();
          //绑定监听改变事件,因为this被换了，必须用bind绑定
          this.watch = this.watchHash.bind(this);
          window.addEventListener("hashchange", this.watch);
        }
        //监听方法
        watchHash() {
          console.log();
          let hash: String = window.location.hash.slice(1);
          this.hashStr = hash;
          console.log(hashStr);
          if (hashStr) {
            if (hashStr == "luyou1") {
              document.querySelector("#luyouid").innerHTML = "好好学习每天向上";
            } else if (hashStr == "luyou2") {
              document.querySelector("#luyouid").innerHTML = "每天向上好好学习";
            } else {
              document.querySelector("#luyouid").innerHTML = "学习向上";
            }
          }
        }
      }
复制代码

大佬：那history Api 的原理呢？

history

我：history 这个对象在html的时候新加入两个api history.pushState() 和 history.repalceState() 这两个 API能够在不进行刷新的状况下，操做浏览器的历史纪录。惟一不一样的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，

大佬：那这个两个api怎么用？

window.history.pushState(state,title,url)
//state：须要保存的数据，这个数据在触发popstate事件时，能够在event.state里获取
//title：标题，基本没用，通常传null
//url：设定新的历史纪录的url。新的url与当前url的origin必须是同样的，不然会抛出错误。url能够时绝对路径，也能够是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/

window.history.replaceState(state,title,url)
//与pushState 基本相同，但她是修改当前历史纪录，而 pushState 是建立新的历史纪录
复制代码

大佬：除了这两个api history还有其余的啥api呢？

window.history.back()//后退
window.history.forward()//前进
window.history.go(1)//前进一部，-2回退两不，window.history.length能够查看当前历史堆栈中页面的数量
复制代码

大佬：这些操做执行了怎么监听呢？

我：每当同一个文档的浏览历史（即history）出现变化时，就会触发popState事件，只要咱们监听事件便可

window.addEventListener('popstate', function(event) {
});
复制代码

大佬：全部的都能监听，你肯定吗？

我：仅仅调用pushState方法或replaceState方法，并不会触发该事件，只有用户点击浏览器后退和前进按钮时，或者使用js调用back、forward、go方法时才会触发。

大佬：那么如何监听 pushState 和 replaceState 的变化呢？

我：咱们能够建立2个全新的事件，事件名为pushState和replaceState，咱们就能够在全局监听

//建立全局事件
var _wr = function(type) {
   var orig = history[type];
   return function() {
       var rv = orig.apply(this, arguments);
      var e = new Event(type);
       e.arguments = arguments;
       window.dispatchEvent(e);
       return rv;
   };
};
//重写方法
 history.pushState = _wr('pushState');
 history.replaceState = _wr('replaceState');
//实现监听
window.addEventListener('replaceState', function(e) {
  console.log('THEY DID IT AGAIN! replaceState 111111');
});
window.addEventListener('pushState', function(e) {
  console.log('THEY DID IT AGAIN! pushState 2222222');
});
复制代码

最后

至此，一个问题算是圆满结束了。其实我在真实的面试中只回答到了，问我history有哪些api，而后实在是不会了，这种连续刨根问底的发文方式，我以为好像是阿里面试官的广泛面试方式，因此，请切记，若是简历上写的东西必定确保很是了解，否则千万别写，否则这种刨根问底的问法，你在不是很了解的知识点上早晚要露馅的。

而后，祝你们跳槽都能去满意的单位！

参考：如何监听URL的变化