## 前端面试题(情景)


回答问题的重点!!!
1. 明确⾯试官的问题 不清楚可以追问 避免回答不在点上
2. 回答问题有条理有逻辑 建议按照总分⽅式
3. 技术问题最好有理有据 ⾔之有物 先说场景 再说思路 再说具体解决⽅案


1.问: 实际开发中有⽤过环境变量吗?
        有⽤过的,我在公司⾥⽤过的场景主要是为了和后台对接⼝的时候切换根域名baseURL时⽤,因为公司有⼏个不同的环境嘛,⼀个环境对应前端⼀个环境变量⽂件,同样⼀个环境变量⽐如说VUE_APP_URL可以在不同的⽂件⾥配置不同的接⼝地址,再配合运⾏命令配置启动时指定⼀下运⾏的环境变量⽂件很容易就切过去了。
 
  2.问: axios有没有做过⼀些业务封装?
     有的,在项⽬⾥⾯我主要是封装过axios的拦截器部分, 我在请求拦截器⾥⾯做了注⼊全局token的事情,这个事⼉是因为有很多接⼝都需要这token来做数据鉴权,为了避免书写多次 统⼀配置了⼀下响应拦截器的部分,我主要是做了⼀个⾃定义的成功错误判断 这个事⼉,可以简单说⼀下,因为我们知道 拦截器的成功和失败判断本身是通过 http 状态码 200- 300 但是我们后端业务状态⽐较多⼀些 他们并没有采取这种依据作为判断条件,这样会有问题,导致前后端逻辑对不上 最重要的问题是 发⽣接⼝错误 感知不到 我做的事⼉就是在成功回调⾥ ⾃⼰做了判断 成功就返回数据 失败就⼿动return Promise.reject()
     
  3.问: ⼯作⾥中的token是怎么管理的?
      我们公司的token管理都是通过vuex配合本地存储来做的ÿ

### 前端开发面试情景问题及答案 #### 1. 解决浮动元素导致父容器塌陷的方法有哪些? 解决浮动元素导致父容器塌陷有多种方法。一种常见的解决方案是在父级 `div` 中定义 `overflow:hidden` 或者设置其他非可见值,这使得浏览器能够自动计算并调整父容器的高度以适应其内部的浮动子元素[^3]。 另一种方案是对最后一个浮动元素之后添加清除浮动的标签 `<div style="clear:both;"></div>` 来确保后续的内容不会被前面的浮动影响,并且可以让父容器正常包裹住所有的子元素。 #### 2. 如何处理跨域资源共享 (CORS) 错误? 当遇到 CORS 错误时,可以考虑通过配置服务器来允许特定源访问资源。对于简单的 GET 请求或 POST 请求(不带认证信息),可以在服务端响应头中加入如下字段: ```http Access-Control-Allow-Origin: * ``` 如果是更复杂的请求,则可能还需要额外指定 HTTP 方法和其他头部信息: ```http Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS Access-Control-Allow-Headers: Content-Type, Authorization ``` 此外,在某些情况下也可以利用 JSONP 技术绕过同源策略限制,不过这种方法仅适用于 GET 请求[^1]。 #### 3. 描述一次完整的页面加载过程。 从用户输入 URL 到最终看到网页内容的过程涉及多个阶段。首先是 DNS 查询解析域名对应的 IP 地址;接着建立 TCP 连接并与 Web 服务器交换 HTTPS 协议握手消息;随后发送 HTTP 请求获取 HTML 文档;再由浏览器解析 DOM 结构树、CSSOM 样式表构建渲染树;最后执行 JavaScript 脚本绘制界面显示给用户查看。 #### 4. 实现一个深拷贝函数。 为了实现对象的深层复制而不是浅层引用传递,可以通过递归来遍历整个目标对象及其嵌套属性直到最底层为止。下面是一个基于 ES6 的例子: ```javascript function deepClone(obj) { if (obj === null || typeof obj !== 'object') return obj; let clone = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { clone[key] = deepClone(obj[key]); } } return clone; } ``` 此代码片段展示了如何创建一个新的实例并将原始对象中的每一个键值对都逐一遍历赋值过去,从而达到完全独立副本的效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值