阿里P7:你了解路由吗?

18,444 阅读7分钟

交代背景

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

跳槽心得:小厂出来的,除了基本功要扎实之外,投简历一定要先头小厂在投你想去的公司,遵循先易后难,先拿到一些offer,有了底气,才能有信心,才能有大概率去你想去的公司,虽然本人比较遗憾(也是能力不够)没有去到想去的公司,但是还是祝愿大家都能如愿去到想去的单位(个人感觉面试时信心非常重要,毕竟写代码的能力和面试中的表达那是两码事)

懵逼经历

面试头一遭,给了阿里,总结如下:

首先大佬让介绍自己:.......胡说八道了一堆

然后大佬让说一下自己的优点:......又胡说八道了一堆

接着大佬让分别说一下这些优点有都时怎么体现的:.....再次胡说八道一大堆(由于没有准备,即兴真的很糟糕)

再然后,噩梦开始..... 复盘总结如下:

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

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

真题模拟

大佬:你了解路由吗?

我:了解,这种spa应用,都是用的前端路由,其他的都是后端路由

大佬:哪能分别解释一下吗?

我:后端路由又可称之为服务器端路由,因为对于服务器来说,当接收到客户端发来的HTTP请求,就会根据所请求的相应URL,来找到相应的映射函数,然后执行该函数,并将函数的返回值发送给客户端。对于最简单的静态资源服务器,可以认为,所有URL的映射函数就是一个文件读取操作。对于动态资源,映射函数可能是一个数据库读取操作,也可能是进行一些数据的处理,等等。然后根据这些读取的数据,在服务器端就使用相应的模板来对页面进行渲染后,再返回渲染完毕的页面。这种方式在早期的前端开发中非常普遍,比如京东页面就是个后端路由,他请求的就是一个页面

对于前端路由来说,路由的映射函数通常是进行一些DOM的显示和隐藏操作

大佬:那他们分别有什么优缺点呢?

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

大佬:那前端路由有几种方案呢?

我: 前端路由主要有以下两种实现方案:

  • 1、hash
  • 2、history Api

大佬:那他们有什么区别呢?

我:hash在地址栏中的表现有一个# 而history并没有(这是我当时的答案,比较草率)

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

1、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的变化