关于秋招的一些感想
最近一段时间忙着秋招，一路经历了阿里终面挂，美团终面挂等等，感觉自己有点苦逼（尤其是因为没HC而挂是最难受的）。虽然到现在还没得到满意的结果，但这个过程还是有所收获的，这是虽然一个自我怀疑的过程，但也是一个不断弥补自身不足，学习的过程，其中与一些面试我的师兄在交流的过程中也是受益匪浅，并且也对自身以后要走的路有了一个更加明确的认识，所以前途漫漫还需努力呀！
一、路由
在现代前端开发中，路由是非常重要的一环。但路由到底是什么呢？有些说：路由就是指随着浏览器地址栏的变化，展示给用户的页面也不相同。这是从路由的用途上来解释路由是什么的，还有一种说法是：路由就是URL到函数的映射。这是从路由的实现原理上来解释路由是什么的。这两种说法都很有道理，但我个人认为还是第二种比较切合我自己对路由的理解吧。
上面已经说了上面是路由，而路由本身也经历了不同的发展阶段：
- 后端路由
- 前端路由
后端路由又可称之为服务器端路由，因为对于服务器来说，当接收到客户端发来的HTTP请求，就会根据所请求的相应URL，来找到相应的映射函数，然后执行该函数，并将函数的返回值发送给客户端。对于最简单的静态资源服务器，可以认为，所有URL的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据的处理，等等。然后根据这些读取的数据，在服务器端就使用相应的模板来对页面进行渲染后，再返回渲染完毕的页面。这种方式在早期的前端开发中非常普遍，它的好处与坏处都很明显：
- 好处：安全性好，SEO好。
- 缺点：加大服务器的压力，不利于用户体验，代码冗合。
也正是由于后端路由还存在着自己的不足，前端路由才有了属于自己的一片天地与发展的空间。对于前端路由来说，路由的映射函数通常是进行一些DOM的显示和隐藏操作。这样，当访问不同的路径的时候，会显示不同的页面组件。前端路由主要有以下两种实现方案：
- hash
- history API
当然，前端路由也存在缺陷：使用浏览器的前进，后退键时会重新发送请求，来获取数据，没有合理地利用缓存。但总的来说，现在前端路由已经是实现路由的主要方式了，我们常用的诸如react-router等前端框架的路由控制都是基于前端路由进行开发的，因此将前端路由进行一个了解
还是很有必要的。
二、前端路由的实现
2.1 基于hash
早期的前端路由的实现就是基于location.hash来实现的。其实现原理也很简单，location.hash的值就是URL中#后面的内容。比如下面这个网站，它的location.hash='#me'：
此外，hash也存在下面几个特性：
- URL中hash值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash部分不会被发送。
- hash值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash的切换。
- 我们可以使用hashchange事件来监听hash的变化。
出发hsah变化的方式也有两种，一种是通过a标签，并设置href属性，当用户点击这个标签后，URL就会发生改变，也就会触发hashchange事件了：
<a href="#srtian">srtian</a>
还有一种方式就是直接使用JavaScript来对loaction.hash进行赋值，从而改变URL，触发hashchange事件：
location.hash="#srtian"
2.2 基于History API
前面的hash虽然也很不错，但使用时都需要加上#，并不是很美观。因此到了HTML5，又提供了History API来实现URL的变化。其中做最主要的API有以下两个：history.pushState()和history.repalceState()。
这两个API可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录。此外，这两个api都接受三个参数：
window.history.pushState(null, null, "http://www.163.com");
- 状态对象（state object）：一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，会触发popstate事件，并能在事件中使用该对象。
- 标题（title）：一般浏览器会忽略，最好传入null。
- 地址（URL）：就是需要新增的历史记录的地址，浏览器不会去直接加载改地址，但后面也可能会去尝试加载该地址。此外需要注意的是，传入的URL与当前URL应该是同源的。
这一块的详情可以去看MDN，它做了一个比较详细的介绍：
此外，还提供了popstate事件来监听历史记录的变化。
可以看看下面这个实例：
<p id="example">
<a href="/name" title="name">name</a>
<a href="/age" title="age">age</a>?
</p>
<div class="main" id="main"></div>
<script>
;(function(){
var examplebox = document.getElementById('example')
var mainbox = document.getElementById('main')
examplebox.addEventListener('click', function(e){
e.preventDefault()
var elm = e.target
var uri = elm.href
var tlt = elm.title
history.pushState({path:uri,title:tlt}, null, uri)
mainbox.innerHTML = 'current page is '+tlt
})
window.addEventListener('popstate',function(e){
var state = e.state
mainbox.innerHTML = 'current page is ' + state.title
})
})()
</script>
两种实现方式的对比：基于Hash的路由实现，兼容性更好；而基于History API的路由，则更正式，更美观，可以设置与当前URL同源的任意URL，路径更直观。此外，基于Hash的路由不需要对服务器做改动，基于History API的路由需要对服务器做一些改造，需要对不同的路由进行相应的设置才行。
三、React-Router
由于我现在也就对React-Router比较熟悉，Vue学了太久了，忘记了。Angular刚学，还没到路由这块这来，因此就以React-Router为例，来聊聊现代前端框架的路由实现思路。先来看看一个简单的React中的Router代码：
<Router>
<Switch>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
</Switch>
</Router>
其实现思路也很简单如下图所示：
image
其实现思路很简单：About和User这两个component一直都存在。当路由发生改变时，与URL相匹配的component机会被成功渲染。而不匹配的component就设置为null。
具体实现，大家可以看这篇文章，这位大佬做了很详细的介绍：
参考资料：
https://github.com/youngwind/blog/issues/109
https://zhuanlan.zhihu.com/p/24814675
网友评论