面试形式：线下面试：一面：30分钟+二面：30分钟
特殊要求：内网开发+自研UI组件库（无文档介绍）+学习能力要求高
面试评价：题目灵活+应用性较强
面试官：项目负责人+前端负责人
面试官的提问大纲：本公司招聘要求+本人简历
面试流程以及面试题：
一面（前端负责人）：
1、自我介绍？
-
我叫xxxxxx，是一名前端开发工程师。毕业于某知名高校计算机专业,有3年丰富的前端开发经验。
-
熟练掌握HTML、CSS、JavaScript等前端技术,对Vue.js、React等主流框架有深入了解和实践经验。
-
曾参与过多个大型Web项目的开发和维护工作,积累了丰富的项目经验。擅长前端性能优化、组件化开发、状态管理等。
-
对前端技术有浓厚的兴趣,热爱学习和研究新技术,能够快速适应新的项目环境。
2、项目介绍、难点、解决过程？
-
我最近参与的一个项目是公司内部的一个ERP管理系统。该系统是基于Vue.js开发的单页应用程序。
-
项目的主要难点在于:
-
大量的业务逻辑和数据交互,需要合理设计数据流和状态管理。
-
针对不同业务场景,需要开发大量可复用的UI组件。
-
系统涉及大量的表单和表格,对性能优化提出了很高的要求。
-
-
我通过以下方式解决了这些问题:
-
采用Vuex进行集中式状态管理,合理划分模块和命名空间,提高代码可维护性。
-
基于公司的UI组件库进行二次开发和扩展,提高开发效率。
-
使用虚拟滚动和懒加载技术优化表格和表单的性能,保证良好的用户体验。
-
3、抢单问题？
-
为了保证抢单的时效性,可以采用以下方式:
-
利用WebSocket或Server-Sent Events技术,实现客户端与服务端的实时双向通信。当有新的订单进来时,服务端能够实时推送给客户端,客户端收到通知后立即进行抢单操作。
-
在客户端使用Axios等库进行轮询请求,定期检查服务端是否有新的订单。一旦发现有新订单,立即进行抢单。
-
采用分布式锁的机制,当一个客户端抢到订单后,立即在服务端加锁,其他客户端就无法再抢到该订单。
-
4、Vue2修改数组,页面没有发生变化？
-
在Vue2中,当您直接修改数组元素的值时,Vue无法检测到数组的变化,因此页面不会自动更新。
-
解决方法:
-
使用Vue提供的变异方法,如
push()、pop()、shift()等,这些方法可以触发页面更新。 -
使用
Vue.set()或this.$set()方法来更新数组元素的值。 -
创建一个新的数组并赋值给data属性,这样也可以触发页面更新。
-
-
两个客户端如何实现实时通讯？
-
可以使用以下技术实现两个客户端的实时通讯:
-
WebSocket: 基于WebSocket协议,建立客户端与服务端的双向通信通道,能够实现即时、低延迟的数据传输。
-
Server-Sent Events(SSE): 基于HTTP协议,服务端可以主动向客户端推送数据,客户端只需要监听事件即可。
-
Long Polling: 客户端发起一个HTTP请求,服务端暂时不返回响应,直到有新数据可用时才返回。客户端接收到响应后立即发起新的请求,形成一个轮询的过程。
-
-
对于您的场景,我建议使用WebSocket或SSE技术,可以更好地实现两个客户端的实时通讯需求。
-
-
接口类型？
-
以下几种常见的接口类型:
-
RESTful API: 遵循REST架构风格的HTTP接口,提供标准的CRUD操作。
-
WebSocket API: 实现客户端与服务端的双向实时通信。
-
自定义RPC接口: 针对一些复杂的业务场景,可能会设计一些自定义的远程过程调用接口。
-
-
不同类型的接口有不同的优缺点,需要根据具体的业务需求来选择合适的接口类型。
-
-
Flex布局和Table布局的区别？
-
Flex布局:
-
基于弹性盒子模型,能够灵活控制容器内部元素的排列方式和尺寸。
-
适用于复杂的布局需求,如自适应、剧中、空间分配等。
-
相对于Table布局,Flex布局更加灵活和简单。
-
-
Table布局:
-
基于表格布局模型,适用于展示类似表格的数据。
-
布局相对简单,但不太灵活,无法很好地处理自适应需求。
-
在一些特定场景下,Table布局可能会有更好的语义化和性能。
-
-
8、 div元素和span元素的区别？
-
div是HTML中的块级元素,span是行内元素。
-
div用于划分页面结构,通常用于布局。span用于对文本进行语义化标记。
-
div通常用于包裹一个区块,span通常用于对文本进行样式修饰。
-
div在默认情况下会独占一行,span则不会。
-
div可以包含块级元素和行内元素,span只能包含行内元素。
