首页 > 其他分享 >3.22 - 快手日常实习一面

3.22 - 快手日常实习一面

时间:2023-03-22 21:35:09浏览次数:38  
标签:hash 请求 快手 url 3.22 服务端 实习 路由 页面

 一、八股

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. 实现异步结果的返回

 

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

标签:hash,请求,快手,url,3.22,服务端,实习,路由,页面
From: https://www.cnblogs.com/ivy225/p/17245516.html

相关文章

  • flower in 3.22
    从wuha回来,累的要噶了。wuha集训总体是摆。给我印象比较深刻的是三件事:joke3579的蜜雪冰城,给BE来了一点surprise,还有昨天晚上的团建。我确实一直在根据自己的思考......
  • 3.22总结
    <%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>Inserttitleh......
  • 【每日进步一点点系列】七道精选 数据库 实习面试题
    目录​​前言​​​​1.InnoDB和MyISAM的区别​​​​2.数据库的索引是什么结构,为什么不用哈希表?​​​​3.聚簇索引和非聚簇索引​​​​4.索引怎么实现的B+树,为什么选这......
  • 百度2024届暑期实习后端算法题详解
    目录一Coding1题目描述解题思路详细代码二Coding2题目描述解题思路详细代码三Coding3题目描述解题思路详细代码这是百度2024届暑期实习后端岗位的第一轮笔试,总共有十五......
  • 美团2024届暑期实习第一轮后端笔试详解
    目录Coding一Coding二Coding三Coding四Coding五这是美团2024届暑期实习后端岗位的第一轮笔试,总共有五道编程题,四道情景算法题,一道二叉树题目,时长两个小时,我用的是g......
  • PHP对接快手平台
    学习记录留作参考祝君好运实际业务中需要使用PHP对接快手平台,而快手官方只给出了一个JAVA的SDK。结合网络上找到的一些代码,自己又整理了一份。参考内容:快手开放平台......
  • 前端实习收获
     在第二大学远程实习学习前端也有一段时间了了,大大小小也踩了不少坑,下面讲一讲自己的学习心得。1.继承虽说JS里没有继承这种说法,但是学会使用继承能极大的提高开发效率。......
  • OpenKruise 开发者不容错过的带薪实习机会!马上加入 LFX Mentorship 计划
    LFXMentorship计划由LinuxFoundation组织发起,为像OpenKruise这样的CNCF托管项目提供了激励开源贡献、扶植社区发展的优秀土壤。参与其中的开发者不仅有机会在经验......
  • 快手POSO论文阅读
    背景我们知道,对于冷启动的用户,由于用户行为数据比较少,预估难度较大。常用的解决方案如采用泛化特征代替id类特征、用泛化特征训练一个辅助tower帮助主tower学校、元学习等......
  • 快手 客户端测开 面经
    一面1.自我介绍2.讲一个项目3.履约系统的业务量是多大4.mq消息怎么测试的5.ssm是什么6.主要负责客户端还是服务端7.测试移动端,你的优缺点是什么8.验证新用户或新设......