前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
以 Vue 为例,我整理了如下的面试题。
如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
- 通过
window.location
方法,改变浏览器地址
接下来我们利用这些特点,去实现一个 hash
模式的简易路由:在线运行
- page1
- page2
-
当然,这是很简单的实现,真正的 hash 模式,还要考虑到很多复杂的情况,大家有兴趣就去看看源码。
浏览器展示效果如下:
历史模式
history
模式会比hash
模式稍麻烦一些,因为history
模式依赖的是原生事件popstate
,下面是来自 MDN 的解释:image.png
小知识:pushState 和 replaceState 都是 HTML5 的新 API,他们的作用很强大,可以做到改变浏览器地址却不刷新页面。这是实现改变地址栏却不刷新页面的重要方法。
包括
a
标签的点击事件也是不会被popstate
监听。我们需要想个办法解决这个问题,才能实现history
模式。image.png
**解决思路:**我们可以通过遍历页面上的所有
a
标签,阻止a
标签的默认事件的同时,加上点击事件的回调函数,在回调函数内获取a
标签的href
属性值,再通过pushState
去改变浏览器的location.pathname
属性值。然后手动执行popstate
事件的回调函数,去匹配相应的路由。逻辑上可能有些饶,我们用代码来解释一下:在线地址History 模式 - page1
- page2
-
这里注意,不能在浏览器直接打开静态文件,需要通过 web 服务,启动端口去浏览网址。
总结
–
这篇文章主要知识点集中在前端路由这块,能完全看完,并且把实现原理捋一遍,我想你应该对现代前端框架会有一个新的理解。没有新的理解的同学,来杭州打我,我不还手。
作者:尼克陈
来源:https://juejin.cn/post/6917523941435113486
- EOF -
推荐阅读 点击标题可跳转
最后
为了帮助大家更好的了解前端,特别整理了《前端工程师面试手册》电子稿文件。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】