面試形式：線下面試：時(shí)長(zhǎng)60分鐘

面試過程：填寫個(gè)人信息->筆記題->HR根據(jù)前面2份資料提問->技術(shù)面試（見如下面試題）

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

公司背景：教育培訓(xùn)公司，項(xiàng)目給本公司服務(wù)，技術(shù)人員人數(shù)只有個(gè)位數(shù)

面試官提問（面試題）：

1、var和let的區(qū)別？

答：（1）變量作用域:var具有函數(shù)作用域或全局作用域,let具有塊級(jí)作用域

（2）變量提升:var會(huì)被提升至作用域頂部,let不會(huì)被提升

（3）重復(fù)聲明:var可以在同一作用域內(nèi)重復(fù)聲明,let會(huì)報(bào)錯(cuò)

（4）暫時(shí)性死區(qū):let聲明的變量在聲明之前無法訪問,var聲明的變量在聲明之前可以訪問undefined

（5）全局對(duì)象屬性:var聲明的變量會(huì)成為全局對(duì)象的屬性,let聲明的變量不會(huì)

2、style標(biāo)簽中的樣式如何只對(duì)這一個(gè)組件生效？

答：（1）在style標(biāo)簽上添加scoped屬性,這樣樣式就只會(huì)應(yīng)用于當(dāng)前組件

（2）使用CSS的Shadow DOM特性或CSS Modules來實(shí)現(xiàn)樣式的局部作用域

3、CSS3新增偽類選擇器？

答：（1）:root選擇文檔的根元素

（2）:nth-child(n)選擇父元素中的第n個(gè)子元素

（3）:nth-of-type(n)選擇父元素中指定類型的第n個(gè)子元素

（4）:last-child選擇父元素中的最后一個(gè)子元素

（5）:last-of-type選擇父元素中指定類型的最后一個(gè)子元素

（6）:only-child選擇父元素中唯一的子元素

（7）:only-of-type選擇父元素中指定類型的唯一子元素

（8）:empty選擇沒有子元素(包括文本節(jié)點(diǎn))的元素

4、v-show和v-if的區(qū)別？

答：（1）v-if：是"真實(shí)的"條件渲染,會(huì)根據(jù)表達(dá)式的值來決定是否渲染元素

（2）v-show：只是簡(jiǎn)單地切換元素的CSS屬性display,元素始終會(huì)被渲染

（3）性能：v-if有更高的切換消耗,v-show有更高的初始渲染消耗

5、微信小程序生命周期？

答：（1）全局生命周期: onLaunch、onShow、onHide、onError、onPageNotFound

（2）頁面生命周期: onLoad、onShow、onReady、onHide、onUnload、onPullDownRefresh、onReachBottom、onShareAppMessage、onTabItemTap

6、 微信小程序文件類型？

答：WXML(頁面結(jié)構(gòu))、WXSS(頁面樣式)、JS(頁面邏輯)、JSON(頁面配置)、圖片、音頻、視頻等資源文件

7、如何理解MVVM？

答：MVVM是Model-View-ViewModel的縮寫：

（1）Model代表數(shù)據(jù)模型

（2）View代表UI組件

（3）ViewModel作為Model和View之間的橋梁，負(fù)責(zé)監(jiān)聽Model數(shù)據(jù)的變化并更新View,也負(fù)責(zé)相應(yīng)View的操作并更新Model

（4）這種模式將業(yè)務(wù)邏輯從UI中分離,可以實(shí)現(xiàn)雙向數(shù)據(jù)綁定,提高代碼的可維護(hù)性

8、vue中的常用指令？

答：（1）v-if、v-else、v-show等條件渲染指令

（2）v-for用于列表渲染

（3）v-bind用于綁定屬性

（4）v-on用于事件監(jiān)聽

（5）v-model用于雙向數(shù)據(jù)綁定

9、vue中常見修飾符？

答：（1）.prevent修飾符可以阻止元素默認(rèn)行為

（2）.stop修飾符可以阻止事件冒泡

（3）.capture修飾符可以使用事件捕獲模式

（4）.self修飾符只當(dāng)事件在該元素本身(而不是子元素)觸發(fā)時(shí)觸發(fā)回調(diào)

10、不使用border=1px，如何在瀏覽器的標(biāo)準(zhǔn)模式和怪異模式一樣的效果？

答：可以使用box-sizing: border-box屬性,這樣元素的寬高就會(huì)包括邊框和內(nèi)邊距在內(nèi)

11、cookie和session區(qū)別（跟蹤用戶狀態(tài)的機(jī)制）？

答：（1）Cookie是保存在客戶端(瀏覽器)的小型文本文件,用于保存一些會(huì)話信息

（2）Session是保存在服務(wù)端的會(huì)話信息,通過sessionId在客戶端和服務(wù)端之間傳遞

（3）Cookie數(shù)據(jù)存放在客戶端,Session數(shù)據(jù)存放在服務(wù)端,相對(duì)來說Session更安全

12、實(shí)現(xiàn)動(dòng)畫的幾種方式？

答：（1）CSS動(dòng)畫: transition、animation

（2）JS動(dòng)畫: requestAnimationFrame、定時(shí)器

（3）SVG動(dòng)畫

（4）Canvas動(dòng)畫

13、[1,2,3]變成"1,2,3"有幾種方法？

答：（1）使用join()方法: [1,2,3].join(',')

（2）使用toString()方法: [1,2,3].toString()

（3）使用模板字符串: ``${[1,2,3]}`

14、音頻標(biāo)簽：video標(biāo)簽？

答：（1）audio>標(biāo)簽用于嵌入音頻內(nèi)容

（2）<video>標(biāo)簽用于嵌入視頻內(nèi)容

（3）兩者都支持常見的媒體格式,如MP3、MP4、WebM等

15、畫一顆五角星有幾種方法？

答：（1）使用CSS的clip-path屬性: clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

（2）使用SVG的<polygon>元素: <polygon points="50,10 65,80 20,35 80,35 35,80"/>

（3）使用Canvas API繪制多邊形

16、跨域是什么？有幾種解決方法？

答：（1）跨域是指一個(gè)域下的網(wǎng)絡(luò)應(yīng)用,不能訪問另一個(gè)域下的資源

（2）解決方法包括:JSONP、跨域資源共享(CORS)、反向代理、WebSocket、nginx配置等

17、cookies優(yōu)缺點(diǎn)？

答：（1）優(yōu)點(diǎn):用于會(huì)話管理、個(gè)性化設(shè)置等

（2）缺點(diǎn):數(shù)據(jù)容量小(4KB)、不安全(可被篡改)、跨域限制

18、http幾次握手？

答：三次握手:客戶端發(fā)SYN包 -> 服務(wù)端發(fā)SYN-ACK包 -> 客戶端發(fā)ACK包

19、JQUERY熟悉嗎？單頁面開發(fā)需要使用JQuery嗎？

答：對(duì)于單頁面開發(fā)來說,是否需要使用 jQuery 就要看具體的項(xiàng)目和技術(shù)選型了。如果你選用了 React、Vue.js 或 Angular 等 JavaScript 框架,通常情況下是不需要額外引入 jQuery 的。這些框架提供了比 jQuery 更加強(qiáng)大和靈活的DOM操作和事件處理能力。但是,如果你的項(xiàng)目沒有使用上述主流的 JavaScript 框架,而是采用了一種更傳統(tǒng)的前端開發(fā)方式,那么引入 jQuery 庫仍然是一個(gè)不錯(cuò)的選擇,它可以大大提高開發(fā)效率。

?

?