【秋招面经】海能达前端题目总结

前言

本次主要搬运牛客网上关于海能达前端面试的常问问题

问题总结

Vue-Router路由模式？路由赖加载怎么做的？

原理：
HashRouter的原理：
通过window.onhashchange方法获取新URL中hash值，再做进一步处理

HistoryRouter的原理：
通过history.pushState 使用它做页面跳转不会触发页面刷新，使用window.onpopstate 监听浏览器的前进和后退，再做其他处理

详解路由懒加载

路由懒加载跟组件加载的区别？刷新后数据丢失怎么处理？

vue路由懒加载及组件懒加载
 如何解决vuex页面刷新数据丢失问题？

对Vuex的理解？

每一个 Vuex 应用的核心就是 store，里面又包括:
（1）state（数据）：用来存放数据源，就是公共状态;
（2）getters（数据加工）：有的时候需要对数据源进行加工，返回需要的数据；
（3）actions（事件）：要执行的操作，可以进行同步或者异步事件
（4）mutations（执行）：操作结束之后，actions通过commit更新state数据源
（5）modules：使用单一状态树，致使应用的全部状态集中到一个很大的对象，所以把每个模块的局部状态分装使每一个模块拥有本身的 state、mutation、action、getters、甚至是嵌套子模块；

vuex的工作流程就是：
（1）通过dispatch去提交一个actions，
（2） actions接收到这个事件之后，在actions中可以执行一些异步|同步操作，根据不同的情况去分发给不同的mutations，
（3）actions通过commit去触发mutations，
（4）mutations去更新state数据，state更新之后，就会通知vue进行渲染
在这里插入图片描述

H5和CSS3提供的新特性；

H5 和 CSS3 新特性

元素旋转90度使用什么属性？

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
语法：

transform: none|transform-functions;
1

属性值：

none 定义不进行转换。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换，只是用 X 轴的值。
translateY(y) 定义转换，只是用 Y 轴的值。
translateZ(z) 定义 3D 转换，只是用 Z 轴的值。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
body
{
    margin:30px;
    background-color:#E9E9E9;
}
div.polaroid
{
    width:294px;
    padding:10px 10px 20px 10px;
    border:1px solid #BFBFBF;
    background-color:white;
    /* Add box-shadow */
    box-shadow:2px 2px 3px #aaaaaa;
}
div.rotate
{
    -ms-transform:rotate(90deg); /* IE 9 */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    transform:rotate(90deg);
}

</style>

</head>
<body>
<div class="polaroid">
    正常图片
<img src="img/1.jpg" alt="" width="284" height="213">
</div><br><br>
<div class="polaroid rotate">
    图片旋转90度
<img src="img/1.jpg" alt="" width="284" height="213">
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

跨域的解决方式？

解决跨域的方案：
1、 CORS处理（后端）所有的网站都可以访问这个接口（数据不安全）
2、 JSONP处理（前端），利用script标签的src属性实现跨域（script标签的src属性能够实现天然的跨域）比如拿到百度的一张图片（问题：只能处理get请求）
3、 Nginx 反向代理
4、使用webpack可以做代理，实现跨域（是目前比较好的跨域处理方案，95%的公司是使用这个来做代理的）

说说Promise（详问）

关于Promise
Promise是异步编程的一种解决方案，（大白话就是让这个异步可以写成同步的感觉，向下顺次执行）比传统的解决方案—回调函数和事件—更合理和强大，最主要解决的是死亡的地狱回调
Promise 是一个构造函数，接收一个函数作为参数，返回一个 Promise 实例。一个 Promise 实例有三种状态，分别是 pending、resolved 和 rejected，分别代表了进行中、已成功和已失败。实例的状态只能由 pending 转变 resolved 或者 rejected 状态，并且状态一经改变，就凝固了，无法再被改变了。状态的改变是通过 resolve() 和 reject() 函数来实现的，我们可以在异步操作结束后调用这两个函数改变 Promise 实例的状态，它的原型上定义了一个 then 方法，使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务，会在本轮事件循环的末尾执行。

promise 能解决什么问题？
回调地狱多个回调相互嵌套导致代码维护困难，代码臃肿
支持多并发的请求
解决可读性差的代码问题
解决代码的信任问题，promise只有一次决议
promise的常用api
Promise.then():得到异步任务的正确结果
Promise.catch():获取异常信息
Promise.finally():无论成功还是失败都会执行
Promise.all():并发处理多个异步任务，所有任务执行完成才能得到结果
Promise.race():并发处理多个异步任务，只要有一个任务完成就能得到结果
promise中race()和all()方法的异同？
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。Promise.race()将里面返回最快的结果返回，不管结果本身是成功状态还是失败状态。

手写promise.all()、promise.race()?

实现一个简单的Promise.all
手写promise.all方法和race方法

项目中怎么使用Ajax的?

在项目中如何使用Ajax和axios

Axios的拦截器

什么是axios拦截器？有哪些作用和使用场景

相关阅读:
JVM 系列(6) —— JVM 类加载机制
音视频基础之参数详解
MySQL 索引
大型网站系统架构演化实例_6.使用分布式文件系统和分布式数据库系统
电影管理系统
【毕业季_进击的技术er】送别过去两年迷茫的自己。重整旗鼓，大三我来啦
VIM插件安装与配置
了解cuda和显卡等基本概念
静态版通讯录
上周热点回顾（9.26-10.2）

原文地址：https://blog.csdn.net/qq_40992225/article/details/127422502

【秋招面经】海能达前端题目总结

前言

本次主要搬运牛客网上关于海能达前端面试的常问问题

文章目录

问题总结

Vue-Router路由模式？路由赖加载怎么做的？

路由懒加载跟组件加载的区别？刷新后数据丢失怎么处理？

对Vuex的理解？

H5和CSS3提供的新特性；

元素旋转90度使用什么属性？

ES6提供的新特性？用ES6的方法做一维数组去重？

flex布局?

垂直居中怎么实现?

TCP三次握手，四次挥手？

Nginx做反向代理的配置？

vue2和vue3有什么区别？

vue传值的方式，想到的都说出来

js事件循环机制、微任务宏任务分别有哪些？

async、await？

跨域的解决方式？

说说Promise（详问）

手写promise.all()、promise.race()?

项目中怎么使用Ajax的?

Axios的拦截器