面試形式：線下面試：一面：30分鐘+二面：30分鐘

特殊要求：內(nèi)網(wǎng)開發(fā)+自研UI組件庫（無文檔介紹）+學(xué)習(xí)能力要求高

面試評(píng)價(jià)：題目靈活+應(yīng)用性較強(qiáng)

面試官：項(xiàng)目負(fù)責(zé)人+前端負(fù)責(zé)人

面試官的提問大綱：本公司招聘要求+本人簡(jiǎn)歷

面試流程以及面試題：

一面（前端負(fù)責(zé)人）：

?

1、自我介紹？

? ?- 我叫xxxxxx，是一名前端開發(fā)工程師。畢業(yè)于某知名高校計(jì)算機(jī)專業(yè),有3年豐富的前端開發(fā)經(jīng)驗(yàn)。

? ?- 熟練掌握HTML、CSS、JavaScript等前端技術(shù),對(duì)Vue.js、React等主流框架有深入了解和實(shí)踐經(jīng)驗(yàn)。

? ?- 曾參與過多個(gè)大型Web項(xiàng)目的開發(fā)和維護(hù)工作,積累了豐富的項(xiàng)目經(jīng)驗(yàn)。擅長前端性能優(yōu)化、組件化開發(fā)、狀態(tài)管理等。

? ?- 對(duì)前端技術(shù)有濃厚的興趣,熱愛學(xué)習(xí)和研究新技術(shù),能夠快速適應(yīng)新的項(xiàng)目環(huán)境。

?

2、項(xiàng)目介紹、難點(diǎn)、解決過程？

? ?- 我最近參與的一個(gè)項(xiàng)目是公司內(nèi)部的一個(gè)ERP管理系統(tǒng)。該系統(tǒng)是基于Vue.js開發(fā)的單頁應(yīng)用程序。

? ?- 項(xiàng)目的主要難點(diǎn)在于:

? ? ?1. 大量的業(yè)務(wù)邏輯和數(shù)據(jù)交互,需要合理設(shè)計(jì)數(shù)據(jù)流和狀態(tài)管理。

? ? ?2. 針對(duì)不同業(yè)務(wù)場(chǎng)景,需要開發(fā)大量可復(fù)用的UI組件。

? ? ?3. 系統(tǒng)涉及大量的表單和表格,對(duì)性能優(yōu)化提出了很高的要求。

? ?- 我通過以下方式解決了這些問題:

? ? ?1. 采用Vuex進(jìn)行集中式狀態(tài)管理,合理劃分模塊和命名空間,提高代碼可維護(hù)性。

? ? ?2. 基于公司的UI組件庫進(jìn)行二次開發(fā)和擴(kuò)展,提高開發(fā)效率。

? ? ?3. 使用虛擬滾動(dòng)和懶加載技術(shù)優(yōu)化表格和表單的性能,保證良好的用戶體驗(yàn)。

?

3、搶單問題？

? ?- 為了保證搶單的時(shí)效性,可以采用以下方式:

? ? ?1. 利用WebSocket或Server-Sent Events技術(shù),實(shí)現(xiàn)客戶端與服務(wù)端的實(shí)時(shí)雙向通信。當(dāng)有新的訂單進(jìn)來時(shí),服務(wù)端能夠?qū)崟r(shí)推送給客戶端,客戶端收到通知后立即進(jìn)行搶單操作。

? ? ?2. 在客戶端使用Axios等庫進(jìn)行輪詢請(qǐng)求,定期檢查服務(wù)端是否有新的訂單。一旦發(fā)現(xiàn)有新訂單,立即進(jìn)行搶單。

? ? ?3. 采用分布式鎖的機(jī)制,當(dāng)一個(gè)客戶端搶到訂單后,立即在服務(wù)端加鎖,其他客戶端就無法再搶到該訂單。

?

4、Vue2修改數(shù)組,頁面沒有發(fā)生變化？

? ?- 在Vue2中,當(dāng)您直接修改數(shù)組元素的值時(shí),Vue無法檢測(cè)到數(shù)組的變化,因此頁面不會(huì)自動(dòng)更新。

? ?- 解決方法:

? ? ?1. 使用Vue提供的變異方法,如`push()`、`pop()`、`shift()`等,這些方法可以觸發(fā)頁面更新。

? ? ?2. 使用`Vue.set()`或`this.$set()`方法來更新數(shù)組元素的值。

? ? ?3. 創(chuàng)建一個(gè)新的數(shù)組并賦值給data屬性,這樣也可以觸發(fā)頁面更新。

?

5、兩個(gè)客戶端如何實(shí)現(xiàn)實(shí)時(shí)通訊？

? ?- 可以使用以下技術(shù)實(shí)現(xiàn)兩個(gè)客戶端的實(shí)時(shí)通訊:

? ? ?1. WebSocket: 基于WebSocket協(xié)議,建立客戶端與服務(wù)端的雙向通信通道,能夠?qū)崿F(xiàn)即時(shí)、低延遲的數(shù)據(jù)傳輸。

? ? ?2. Server-Sent Events(SSE): 基于HTTP協(xié)議,服務(wù)端可以主動(dòng)向客戶端推送數(shù)據(jù),客戶端只需要監(jiān)聽事件即可。

? ? ?3. Long Polling: 客戶端發(fā)起一個(gè)HTTP請(qǐng)求,服務(wù)端暫時(shí)不返回響應(yīng),直到有新數(shù)據(jù)可用時(shí)才返回?？蛻舳私邮盏巾憫?yīng)后立即發(fā)起新的請(qǐng)求,形成一個(gè)輪詢的過程。

? ?- 對(duì)于您的場(chǎng)景,我建議使用WebSocket或SSE技術(shù),可以更好地實(shí)現(xiàn)兩個(gè)客戶端的實(shí)時(shí)通訊需求。

?

6、接口類型？

? ?- 以下幾種常見的接口類型:

? ? ?1. RESTful API: 遵循REST架構(gòu)風(fēng)格的HTTP接口,提供標(biāo)準(zhǔn)的CRUD操作。

? ? ?2. WebSocket API: 實(shí)現(xiàn)客戶端與服務(wù)端的雙向?qū)崟r(shí)通信。

? ? ?3. 自定義RPC接口: 針對(duì)一些復(fù)雜的業(yè)務(wù)場(chǎng)景,可能會(huì)設(shè)計(jì)一些自定義的遠(yuǎn)程過程調(diào)用接口。

? ?- 不同類型的接口有不同的優(yōu)缺點(diǎn),需要根據(jù)具體的業(yè)務(wù)需求來選擇合適的接口類型。

?

7、Flex布局和Table布局的區(qū)別？

? ?- Flex布局:

? ? ?1. 基于彈性盒子模型,能夠靈活控制容器內(nèi)部元素的排列方式和尺寸。

? ? ?2. 適用于復(fù)雜的布局需求,如自適應(yīng)、劇中、空間分配等。

? ? ?3. 相對(duì)于Table布局,Flex布局更加靈活和簡(jiǎn)單。

? ?- Table布局:

? ? ?1. 基于表格布局模型,適用于展示類似表格的數(shù)據(jù)。

? ? ?2. 布局相對(duì)簡(jiǎn)單,但不太靈活,無法很好地處理自適應(yīng)需求。

? ? ?3. 在一些特定場(chǎng)景下,Table布局可能會(huì)有更好的語義化和性能。

?

8、div元素和span元素的區(qū)別？

? ?- div是HTML中的塊級(jí)元素,span是行內(nèi)元素。

? ?- div用于劃分頁面結(jié)構(gòu),通常用于布局。span用于對(duì)文本進(jìn)行語義化標(biāo)記。

? ?- div通常用于包裹一個(gè)區(qū)塊,span通常用于對(duì)文本進(jìn)行樣式修飾。

? ?- div在默認(rèn)情況下會(huì)獨(dú)占一行,span則不會(huì)。

? ?- div可以包含塊級(jí)元素和行內(nèi)元素,span只能包含行內(nèi)元素。

?