《一周一个大厂》回顾Taptap的面签体验，找出不足，一一攻破！

序大家好，我是林三鑫。用最通俗易懂的语言解释最难的知识点是我的座右铭。一个系列的文章，大体流程是这样的：我会收集一些大厂的面对面的经验，试着回答一下。如果您能全部回答，请等待下周的另一轮。如果你不能，记录下来并克服它们。写一篇文章，然后本系列下一轮的目的是：逼迫自己学习，写文章巩固新知识，复习旧知识Taptap今天是大厂一周的第一期。今天就来回顾一下Taptap的上手体验吧。找出不足，一一克服！一方面1.皮肤变化做了什么？你有没有处理过可能改变尺寸的皮肤变化？我在微信小程序和PC管理系统做过换皮小程序：我们公司是一个游戏。小程序，这个小程序涉及到换肤的地方就是阅读剧情的弹出抽屉。需求是通过用户点击按钮同时改变三种皮肤和阅读文本的颜色。我的方案是用Map来存储三种皮肤信息。点击按钮后，会匹配地图中对应的皮肤，替换抽屉的背景图。常规方式，修改阅读文本的HTML代码，替换style中的color属性。,实现换肤效果PC管理系统：我公司后台管理系统，具有夜间模式和白天模式切换功能，与产品确认主题颜色后，开始编程。由于我们的系统是使用antd组件库编写的，所以需要导入antd对应的主题文件，并封装对应的切换主题hook。同时主题ID要保存在localStorage中，保证主题刷新后恢复。接下来封装一个AppDarkModeToggle的切换组件，切换后触发事件，改变html的data-dark属性，通过属性选择器触发底部标签的样式切换，改变布局的背景色和字体Header、Sider、Footer等组件同时切换颜色等。2.i18n在团队内部做了哪些实践？项目实施i18n意味着产品无需大的改动即可适应不同语言和地区的需求。我在我的项目中也做了i18n。我们做的是官网和管理系统的国际语言切换。中英文切换。我当时的步骤是1.根据设计稿情况确定中英文文本2.整理成en和zh两个文件夹，分别存放语言对应的数据3.确保数据是key的形式-valuepairsofobjects4.使用vite的import.meta.globEager方法将这两个数据组织成i18n插件需要的格式（不同的插件需要不同的格式）5.工程启动时初始化i18n插件初始化6、封装对应的切换语言组件——AppLocalePicker，用于切换主题和更改html标签的lang属性7、同时做好语言标识的初始化工作，避免之后状态丢失刷新3.Webpack迁移Vite时遇到了什么问题1.环境变量需要Vite_前缀2.获取环境变量的方式是import.meta3.Vue中使用tsx报错：Reactisnotdefined//vite.config.tsesbuild:{jsxFactory:'h',jsxFragment:'Fragment',jsxInject:'import{h}from"vue";',},4.主题插件vite-plugin-theme5.Windicss插件vite-plugin-windicss6.尽量不要使用commonjs，你使用esmodule4，CI/CD做过哪些实践？CI代表持续集成。我的理解就是我们每天写代码提交到主干。这是一个非常重复的操作。持续集成，我的理解，会以最快的速度帮你把代码提交到主分支的好处是，当开发人员数量多的时候，这样的快速集成有助于减少开发人员代码之间的冲突。CD代表持续部署。我理解既然有持续集成代码的话，代码的集成肯定是为了最后的发布和部署，所以持续部署就是在自动集成代码之后，自动将代码部署到环境中，节省了大量的人力。我在之前的公司参与过CI/CD的工作流程用过，但没有深入实施。当时公司用的是Jenkins5，你知道鉴权吗？jwt如何实现kicking，session和jwt认证的区别？会话认证会话认证需要服务器存储1.用户登录2.服务器接收到登录请求，生成对应的用户ID，存在服务器上3.服务器将ID发送给前端，存储在饼干里。还有就是浏览器4.前端每次请求都会带上这个cookie去请求。5.服务器接收标识并使用标识在数据库中进行匹配。如果匹配，它将接受它。如果不匹配，则不会接受。6.当用户登出时，前后端会销毁这个标识jwt认证jwt认证不需要服务器保存1.用户登录2.服务器收到登录请求，生成token用于前端根据用户信息3.前端收到token，存在浏览器本地缓存中（如LocalStorage）4.在下一次请求中，需要在请求头中包含token。5、服务端解析前端发来的token，有效则接受，无效则返回401。6.用户注销这时候只需要前端销毁tokenjwt就可以踢人了。我理解jwt踢人，就是后端控制一个人的token失效。我可以想到四种方法。1+token发送给前端，当我想踢人的时候，后端会生成一个新的ID2，并将这个用户对应的token修改为ID2+token，那么下次这个用户会带上ID1下次+访问token的时候会检查，如果不通过这个方法，需要使用服务器存储，违背了jwt认证的初衷2.设置两个token，一个access_token，一个refresh_token.前者过??期时间较短，为1小时，后者过期时间较长，为1个月。将refresh_token存入后端数据库（如redis），将access_token发送给前端。前端在请求access_token时，要判断redis中的refresh_token是否过期。如果没有过期则通过，或者access_token已经过期。刷新access_token返回给前端即可。那么如果你想踢人下线，好办，把redis的refresh_token清空即可。缺点同第一点。3.黑名单模式。就是把需要被踢的用户的token放在一个数组中。用户访问时，遍历数组，看有没有这个人，有就踢下线。其中，踢人下线是利用Websocket技术实时踢人出房间，不涉及token6.三路TCP握手http1.0http1.1http2有什么区别？HTTP一直是我的短板，记录一下，记录一下7、https，为什么能防中间人攻击？推荐一篇我写的文章，我画了13张图，用最通俗易懂的话来说说HTTPS，收下！8、冒泡排序的平均时间复杂度为O(n^2)。思维数组中有n个数，每相邻两个数进行比较，如果前者大于后者，则交换两个数；这样，在第一个回合中，可以选择最大的数字放在最后；然后经过n-1（数组长度-1）轮，完成所有数字的排序。实现//从大到小排序vararray=[10,20,9,8,79,65,100];//比较轮数for(vari=0;iarray[j+1]){vartemp=array[i];数组[j]=数组[j+1]；数组[j+1]=温度；}//endif}//endfortimes}//endforrounds控制台。日志（数组）；两侧1.给你一个已经升序排列的数组，给你一个数，求这个数在这个数组中出现了多少次。既然已经升序排序了，那就意味着如果这个数出现了很多次。一定是挨着的，所以没必要遍历整个数组，只要从这个数开始，以这个数为末尾，算完这段就可以跳出遍历，不用不需要做下面无用的工作（这是我唯一能想到的优化点）implementconstarr=[1,2,3,4,5,5,6,6,7]constcomputed=(arr:number[],num:number):number=>{letflag=falseletsum=0for(letitemofarr){if(item===num){sum++flag=true继续}if(item!==num&&flag)break}returnsum}console.log(computed(arr,5))2.洗牌算法，如何验证这个洗牌算法能把牌洗够1.随机索引I1，创建一个空数组2.生成一个0——length-1的随机索引，并将这个随机索引对应的元素放入新数组中3.删除原数组中索引对应的元素，更新原数组的长度4.重复2和3你ntiltheoriginalarraylength===05.返回新数组constshuffle=(arr:number[])=>{if(!arr.length)return[]letrandom:numberletres:number[]=[]while(arr.length){random=Math.floor(Math.random()*arr.length)res.push(arr[random])arr.splice(random,1)}returnres}2、随机索引II1，选择数组最后一个元素（长度n）(arr[length-1])，与n个元素中的任意一个交换，此时最后一个元素已经确定2，选择倒数第二个元素(arr[length-2])，与n中的任意一个交换-1个元素3.重复步骤1和2，直到剩下1个元素constshuffle=(arr:number[])=>;{if(!arr.length)return[]letindex=arr.length-1letrandom:numberwhile(index){random=Math.floor(Math.random()*index--)//或//随机=(Math.random()*index--)>>>0consttemp=arr[index]arr[index]=arr[random]arr[random]=temp//这行得通，但我的eslint不行哈哈//[arr[lastIndex],arr[random]]=[arr[random],arr[lastIndex]]}returnarr}3.排序方法constshuffle=(arr:number[])=>{returnarr.sort(()=>0.5-Math.random())}3.节点流来获取具有大量数据的日志。由于内存限制，一次只能取一部分。现在我希望从所有日志中随机获取10,000个条目。怎么做？这个问题不会。记录一下，记录一下4.介绍哪些项目是你主导和提出的事情。你主导过两三个项目：项目A：小程序项目B：官网项目C：后台管理系统不足记录TCP三次握手http1.0http1.1http2有什么区别？节点流使用CI/CD实践经验不足结语我是林三鑫，一个狂热的前端菜鸟程序员。如果你有上进心，喜欢前端，想学前端，那我们就交个朋友一起钓鱼哈哈，又来写经了