面試官一問(wèn)一答式的前端面試題
我要評(píng)論1，請(qǐng)問(wèn)你平常用什么瀏覽器調(diào)試？
谷歌,火狐 ，偶爾調(diào)試的時(shí)候用IE 偶爾會(huì)使用下國(guó)產(chǎn)的瀏覽器
問(wèn):請(qǐng)說(shuō)下火狐瀏覽器,360的瀏覽器的內(nèi)核 沒(méi)聽(tīng)錯(cuò)就是360瀏覽器
IE瀏覽器內(nèi)核：Trident內(nèi)核，也是俗稱的IE內(nèi)核；
Chrome瀏覽器內(nèi)核：統(tǒng)稱為Chromium內(nèi)核或Chrome內(nèi)核，以前是Webkit內(nèi)核，現(xiàn)在是Blink內(nèi)核；
Firefox瀏覽器內(nèi)核：Gecko內(nèi)核，俗稱Firefox內(nèi)核；
Safari瀏覽器內(nèi)核：Webkit內(nèi)核；
Opera瀏覽器內(nèi)核：最初是自己的Presto內(nèi)核，后來(lái)是Webkit，現(xiàn)在是Blink內(nèi)核；
360瀏覽器、獵豹瀏覽器內(nèi)核：IE+Chrome雙內(nèi)核；
搜狗、遨游、QQ瀏覽器內(nèi)核：Trident（兼容模式）+Webkit（高速模式）；
百度瀏覽器、世界之窗內(nèi)核：IE內(nèi)核；
2345瀏覽器內(nèi)核：以前是IE內(nèi)核，現(xiàn)在也是IE+Chrome雙內(nèi)核；
2.請(qǐng)讓一個(gè)div居于屏幕中間,并且讓里面的p元素文本相對(duì)于div元素 水平和垂直居中 ？聽(tīng)完心里有點(diǎn)懵逼
直接說(shuō)答案了 面試官想聽(tīng)下面這個(gè)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>讓DIV標(biāo)簽中的P標(biāo)簽水平和垂直都居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.parent {
display: table;
width: 300px;
height: 300px;
text-align: center;
position: absolute;
left:50%;
top:50%;
margin-top:-150px;
margin-left:-150px;
}
.son {
display: table-cell;
height: 200px;
background-color: yellow;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<p class="son">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium tempore deleniti quos perferendis corporis ab accusamus, magni quibusdam, tempora ea!</p>
</div>
</body>
很多童鞋可能沒(méi)聽(tīng)說(shuō)過(guò) display:table 和 display:table-cell 的配合 就能實(shí)現(xiàn) 這個(gè)問(wèn)題把我問(wèn)住了 我以為這已經(jīng)算是很難的題了 專門(mén)問(wèn)一些很少使用的樣式
3.你用過(guò)哪些預(yù)處理的css語(yǔ)言 我回答scss 那好 你簡(jiǎn)歷上說(shuō)你用過(guò)mint-ui組件 那你說(shuō)下 怎么解決樣式穿透的問(wèn)題
聽(tīng)完我又懵逼 心里難受 我也是第一次聽(tīng) 樣式穿透
面試官的本意是這個(gè):
vue引用了第三方組件，需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。此時(shí)只能通過(guò)>>>，穿透scoped。
但有些Sass 之類的預(yù)處理器無(wú)法正確解析 >>>，（此時(shí)） 可以使用 /deep/ 操作符( >>> 的別名)
<style scoped>
（方法一：）（有些情況可能會(huì)無(wú)效，比如我現(xiàn)在，哈哈哈）
外層 >>> 第三方組件 {
樣式
}
（方法二：）
/deep/ 第三方組件 {
樣式
}
</style>
ps:
1、/deep/與class名之間有無(wú)空格都可。
2、也可寫(xiě)成： .audit /deep/ .el-radio-button_inner{ color:red } ——前面加class + /deep/ + 三方clss名 (格式）
4.你以為這樣就結(jié)束了 其實(shí) 只是開(kāi)始 心里越來(lái)越難受
vue-router可以回退嗎 ?回退之后參數(shù)導(dǎo)致數(shù)據(jù)丟失怎么處理,你使用那種方式緩存 ！我們不能一直讓用戶刷新界面吧
聽(tīng)完 我那是來(lái)面試的 我是來(lái)鍛煉心里承受能力的
首先對(duì)刷新參數(shù)消失想到的方法是在剛開(kāi)始的時(shí)候?qū)?shù)存到localStorage里面，但是如果這種傳參比較多的話可能存儲(chǔ)的地方會(huì)有點(diǎn)多；
然后再看一些博客的時(shí)候提到用vue 的<keep-alive>，即在<router-view>外套一層<keep-alive>實(shí)現(xiàn)頁(yè)面緩存，但是這樣確實(shí)是不是每一個(gè)頁(yè)面都需要緩存的特別是一些狀態(tài)之間切換需要流程化更改狀態(tài)的頁(yè)面，寫(xiě)上這個(gè)就不能實(shí)現(xiàn)數(shù)據(jù)的實(shí)時(shí)刷新了
也可以使用那個(gè)方法 監(jiān)聽(tīng) 在回退的那個(gè)界面 監(jiān)聽(tīng) 使用watch()監(jiān)視 $route的變化 定義一個(gè)方法獲取數(shù)據(jù)
注意! 注意! 注意! 重要的事說(shuō)三遍, 接受參數(shù)時(shí),這里是 重點(diǎn) 這里是 $route 取參數(shù) 不是$router重要的事情說(shuō)三遍
然后params對(duì)應(yīng)通過(guò)params接受,query通過(guò)query接受
5.請(qǐng)說(shuō)出 vuex中的幾個(gè)方法以及使用 終于到我會(huì)的了
var store=new Vue.Store({
//用戶自定義的變量和值都放在state對(duì)象里面
state:{
count:10 // 用戶自定義的變量:值
}，
//獲取用戶定義的數(shù)據(jù)（注意,獲取vuex共享數(shù)據(jù)只能通過(guò)函數(shù)獲取）
getters:{
//用戶自定義函數(shù),參數(shù)是state是固定的不要修改
getCount(state){
return state.count;
}，
//修改vuex中的共享數(shù)據(jù)
mutations:{
//用戶自定義函數(shù)
subCount(state){
state.count--;
},
clear(state){
state.count=0;
}
},
//異步修改數(shù)據(jù),有些數(shù)據(jù) 我們并不要立即修改
actions:{
modifyCount(context){
//context指的是 $store對(duì)象 調(diào)用mutations中的方法來(lái)實(shí)現(xiàn)異步修改數(shù)據(jù)
setTimeout(()=>{
context.commit("clear"); //調(diào)用了 mutations對(duì)象中的clear
},3000)//用定時(shí)器模擬異步修改
}
}
});
直接在<template></template>中使用 是{{$store.getters.getCount}} 注意后面不要加括號(hào)
修改共享數(shù)據(jù)中的數(shù)據(jù)是 :this.$store.commit("subCount"); 提交subCount方法 this.$store.commit("clear") 你可以在 組件中的methods中使用 也可以在watch 中也可以使用
6.請(qǐng)說(shuō)出es6中常用的數(shù)組方法
forEach() 、map()、filter()、reduce()、some()、every()
請(qǐng)說(shuō)出 some和every的區(qū)別
some
/遍歷數(shù)組每一項(xiàng)，有一項(xiàng)返回true,則停止遍歷，結(jié)果返回true。不改變?cè)瓟?shù)組
every:
遍歷數(shù)組每一項(xiàng)，每一項(xiàng)返回true,則最終結(jié)果為true。當(dāng)任何一項(xiàng)返回false時(shí)，停止遍歷，返回false。不改變?cè)瓟?shù)組
7.請(qǐng)說(shuō)出你在vue中覺(jué)得哪些是比較重要的東西！
我回答的是雙向綁定 單頁(yè)面操作 虛擬dom樹(shù)
最后聊了些其他的 就讓我走了 雖然很多回答不上來(lái) 但也是知道了 一些新東西 還是學(xué)到了 ，笑笑就過(guò)去了 說(shuō)明自己還是有很多要學(xué)習(xí)的東西 給自己加油下 哈哈
總結(jié)
以上所述是小編給大家介紹的面試官一問(wèn)一答式的前端面試題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
- 這篇文章主要介紹了Web前端面試筆試題總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-02-18
- 這篇文章主要介紹了80道前端面試經(jīng)典選擇題匯總，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2020-01-08
- 這篇文章主要介紹了面試官常問(wèn)的web前端問(wèn)題大全,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-03
- 這篇文章主要介紹了前端十幾道含答案的大廠面試題總結(jié),小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2020-01-02
- 這篇文章主要介紹了超實(shí)用前端面試題整理(小結(jié))，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-12-19
- 這篇文章主要介紹了2020最新Web前端經(jīng)典面試試題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-19
這篇文章主要介紹了解析前端面試題2019年小米工程師面試題(附答案)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-11-27- 這篇文章主要介紹了2019年京東前端工程師面試題(附答案)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-11-26
- 這篇文章主要介紹了2019年滴滴出行前端工程師面試題(附答案)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2019-11-25
- 這篇文章主要介紹了2019年百度前端工程師面試題(附答案)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-11-22
