3.22 - 快手日常实习一面

发布时间 2023-03-22 21:32:31作者: Bookisso

 一、八股

1. HTTPS和HTTP

2. 判断相等的方法、区别
一共三种:==、=== 和 Object.is()
==: 双方类型不同时会强制转换。
强制转换规则:两个基础类型进行比较时,都转换成数字类型toNumber;有引用类型进行比较时,对引用类型进行toPrimitive转换,会先调用Object的toString()方法和valueOf()方法转换为基础类型后,再进行比较。
优先级:Date对象是先toString,其他都是先valueOf()。
===: 不会强制转换,不同就返回False。特殊值处理:null和undefined都返回true,对NaN返回false
Object.is(value1, value2):在===的基础上,改变了+0、-0和对NaN的判断。

3. Vue,Vue-Router,Vuex分别是什么

Vue是一个前端开发框架,它基于HTML、CSS和JavaScript构建,提供了一套声明式的、组件化的编程模型,帮助开发者高效地开发页面。

Vue-Router是Vue官方提供的路由管理工具,它包括动态路由选择、嵌套路由、基于组件的路由配置、HTML5的historyAPI和hashAPI、路由参数查询等功能。说白了,管理用户在输入url后跳转到哪个页面,并可以和路由信息进行交互。

Vuex是一个状态管理库,它采用集中式保存所有组件的状态。当多个组件间需要进行状态共享时,就要把共享地状态存储到Vuex中,这样状态发生改变,就能通知到所有涉及的组件改变对应的视图。


4. history和hash模式的区别
hash模式:最直观的区别在于url中有一个#,#后面的就是该页面的hash值。hash值不会作为请求路径传递给服务端,因此改变hash,并不会导致页面的重新加载。该模式兼容性好。
实现原理: 监听hash值的改变进行前端的路由跳转,因此无法实现原地跳转。
history模式:模式没有#,每一次改变url都会向服务端发送请求,服务端对url进行解析,并做相应的逻辑处理。虽然好看,但兼容性不高,需要后端服务器一起配合,不然就404了。
实现原理(状态改变方式):pushState, replaceState => 修改当前的历史状态 go, forward, back => 切换历史状态

其实我一直对前端路由的概念没有深入的理解,在第n次被问到两种模式的区别以及第n次模式化地背标准答案后,我决定今天一定要把这个概念理解透彻。


单页面应用需要一个方法来定位到当前页面所在的位置。因为我们一直在一个页面内进行反复跳转,状态不断改变,如果不定位,那一刷新就会返回到初始的状态了,并不友好。前端路由就因此诞生,用于定位当前单页面应用的状态。

其次需要了解HTTP请求和AJAX请求的区别。
HTTP请求通过一个httpRequest对象向服务端发送请求,并将返回的结果渲染为当前页面,实现页面刷新。
AJAX请求通过一个xmlHttpRequest对象向服务端发送请求,将返回的数据传入到当前页面的一个区域内,实现部分刷新,而整个浏览器的页面没有刷新。
显然,单页面应用中我们需要采用AJAX请求来进行页面交互,因为我们一共只有一个页面,不需要再刷新了。
但在服务端眼里,这两种请求没有区别,都是需要根据解析请求中的url,来判断需要返回哪个资源。
因此,客户向服务器发送请求的路径决定了请求的结果。

hash模式下,#后面的代表当前页面的hash值,用来定位当前页面的所在位置,并且hash值不会作为url传给服务端。
也就是说,随便你#后面的内容怎么改,我这个页面http的请求地址永远是#前面的地址,只要这个服务器地址还在,那我的就不会报错。
那页面是怎么改变的呢?这里用到window自带的方法onhashchange,用来定位的这个值一旦改变了,我们就让客户端自己按照之前写好的规则取加载代码,来定位页面,不需要向后端再发送请求了。定位不到?那就不改变嘛,找不到就摆烂,反正我请求地址没问题哦。

history就不一样了,它可是正儿八经地会向后端发送ajax请求的。后端就得解析发送过来的url,解析path,看path里哪个代表资源所在的文件夹,哪个代表资源的id,一顿分析后找到了,把这个资源返回给客户端。但如果服务端找不到这个资源呢,那它肯定要给客户端返回错误的啊,告诉他找不到,也就产生了404。

hash模式相当于自己人,咱们自己内部查查,根据自己内部的系统,查不到就算了,也不用告诉别人,自己人和外面人用#分隔开;
history模式相当于外面人来查,对方有对方自己查找的方式,它查不到肯定要上报这个错误的。

 

二、代码
1. 实现原生forEach
2. 实现return False的提前退出
3. 实现异步结果的返回

 

三、场景
实现图片点击放大,以知乎为例