第一次面试？享受面试拷打，弥补自己的不足

Virtual09
2,048 阅读6分钟

前言

     前前后后学习前端也有小小半年了，Virtual09我呢也开始面试了。刚开始面试，我抱着忐忑的心理准备面试，一番下来啊，发现自己受益良多，现在我就和大家分享下我第一次面试历程.

正文

自我介绍

面试官你好，我是一位来自xxx大学的大三学生，我叫xxx,在大一期间我就通过我的学长了解到了前端Web开发，刚开始我就发现，我被其可以自我设定页面样式给深深的吸引住了，后面就自己在B站上跟着视频，自学一些基础内容，后面发现自己学的内容，完全不足以支持自己继续开发更好看的页面，就开始系统的学习前端三件套，VUe3,Vant,Element-ui等等全家桶，自己也会阅读《你不知道的JavaScript》，自从chatgpt的诞生，我就对AI 非常的感兴趣，自己也研究了下国内的CozeAPI。

聊一下你在调用CozeAPI接口，出现问题如何解决

调用接口出现问题，我一般是会先查阅API文档，检查一下我的后端代码是不是写错了，如果没有就会检查自己的参数是不是写错了。然后在这里面试官就问了一个问题如果出现问题，如何反馈给用户

这里我就提到了koa框架中

ctx.body = {
                code:'8000',
                data:res,
                msg:res.msg
            }

我们可以使用上下文对象，将信息传递给前端，前端再将数据反馈给用户，这里我们捕获错误用的是try{}catch{}进行一个错误捕获，错误分为两种，一种是基本错误，也就是信息错误

if(res.code === 0){
            ctx.body = {
                code:'8000',
                data:res,
                msg:res.msg
            }
            return
        }else{
            ctx.body = {
                code:'8001',
                data:'error',
                msg:res.msg
            }
        }

这里我们使用if语句进行判断，如果返回的数据不是我们需求的数据就可以做else数据错误返回，但是如果是由catch捕获到的错误就可以理解为是服务器异常,因为catch就是try没有走通，

image.png 这代码没有执行，或者是执行出错，就可以理解为服务器异常。

聊一下你项目中的懒加载

懒加载，我通过Pinia创建一个中央数据库，里面存放系列假数据，对于假数据，我通过TypeScript中的数据类型约束--泛型严格约束假数据的值以免数据出错，在TypeScript中，我们可以自定义类型，自定义类型我们可以使用关键字Interface,或者创建一个文件，用type关键字。然后通过原生的IntersectionObserver对节点使用watch进行监听，当节点更新时，就会通过new IntersectionObserver创建一个新的实例对象，监听元素是否进入了视窗，如果进入了视窗就会触发加载更多。然后在这里面试官问了一个问题如何处理observer对于不通过的浏览器的兼容性
1：我们可以直接检查浏览器是否支持IntersectionObserver

if ('IntersectionObserver' in window) {
  // 浏览器支持 IntersectionObserver
} else {
  // 浏览器不支持 IntersectionObserver
}

2:如果浏览器不支持IntersectionObserver，我们可以使用polyfill中的intersection-observer 安装polyfill

npm install intersection-observer

然后具体懒加载时如何实现的可以移步至文章《ts+hooks+pinia = 技术亮点之懒加载！！》

聊一下你的jwt.js

这里的jwt.js用于处理后端鉴权。调用jwt.sign()方法生成一个token,接受一个参数，这个参数是我们从前端登录界面传过来的信息，我们用这个信息生成一个token然后通过上下文对象返回给前端，前端并把数据存储在本地浏览器中，每当用户发送请求接口给后端，就必须把这个token一起带给后端进行判断，是否是该用户。然后这里面试官提出了一个问题为什么使用localStorage存储数据不用session
localStorage

-持久性存储：localStorage 中的数据是持久性的，即使浏览器关闭后数据仍然存在，除非用户手动清除或通过 JavaScript 删除。 -跨页面共享：localStorage 中的数据在整个域名下都是共享的，也就是说，任何来自同一域名的页面都可以访问同一个 localStorage。

  • 大小限制：大多数浏览器对 localStorage 的大小限制约为 5MB，但具体限制可能因浏览器而异。 从性能角度来讲的话，页面加载时localStorage的数据都会被加载到内存中，这会影响到页面的加载时间，当存储大量的数据时，这一点更加明显 sessionStorage

  • 会话存储：sessionStorage 中的数据仅在当前浏览器窗口或标签页的生命周期内有效。当页面被关闭时，sessionStorage 中的数据就会被清除。

  • 页面共享：sessionStorage 中的数据在同一窗口或标签页打开的页面间共享。如果在新的窗口或标签页打开相同的页面，则会创建一个新的 sessionStorage 对象。

  • 大小限制：sessionStorage 的大小限制通常与 localStorage 相同。

聊一下七层模型

七层模型是一种概念性的框架，分别是应用层，表示层，会话层，传输层，网络层，数据链路层，物理层。

聊一下Promise

Promise 是 JavaScript 中的一种异步编程模式，它提供了一种更优雅的方式来处理异步操作的结果，替代了传统的回调函数。Promise 对象代表了一个最终可能完成或失败的异步操作，并且一旦完成就不会改变。 Promise拥有三种状态：pending、fulfilled(resolved)、rejected,实例化一个Promise对象时，会的带一个状态为pending的实例对象,该对象可以访问Promise原型上的then()方法,当该对象中的状态没有变更为fulfilled,then接受到的回调是不会触发的,同理该对象中的状态没有变更为rejected,catch接受到的回调也不会触发

tailwindcss对比css的优势

Tailwind 的实用类是独立的，这意味着它们不会相互干扰，减少了样式冲突的风险，可以避免重复书写css代码，减少代码样式的冗余。

文章到这里也就结束，希望本文对大家有用，感谢大家阅读，祝诸君越面越好！！

avatar
文章
阅读
粉丝