前端面試基礎(chǔ)(1年以內(nèi)需掌握)

xiaochao 發(fā)布于2019-05-22 19:43 / 488人閱讀

摘要：客戶端數(shù)據(jù)存儲，能維持在多個會話范圍內(nèi)。向元素開頭插入由參數(shù)指定的內(nèi)容。向匹配的元素添加指定的類名。移除指定的屬性。主要解決了中大量的操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。區(qū)別數(shù)據(jù)驅(qū)動，通過數(shù)據(jù)來顯示視圖層而不是節(jié)點操作。

金三銀四公司讓我面試 1年經(jīng)驗的前端，特此花時間研究了一番面試題，近日整理了一下想分享出來，讓更多小掘友看到，在我看來這些基本都是必備的知識點

css常用布局

基本值	flexbox	grid	table	float布局
none	flex	grid	table	float-fixed
inline	inline-flex	inline-grid	table-row	float-fluid
block			table-cell	960網(wǎng)格布局
inline-block

使用inline-block 的問題以及解決方案

水平間隙問題這是因為編寫代碼時輸入空格、換行都會產(chǎn)生空白符。而瀏覽器是不會忽略空白符的，并且對于多個連續(xù)的空白符自動合并成一個，故產(chǎn)生了所謂的間隙。

一般來說我們有兩種方法來去掉這個換行引起間隙： 代碼不換行和設(shè)置 font-size。

(推薦)通過設(shè)置父元素的 font-size 為 0 來去掉這個間隙，然后重置子元素的 font-size，讓其恢復(fù)子元素文字字符。 只要設(shè)置 inline-block 就要去間隙

float清除浮動詳解

主要是為了解決由于浮動元素脫離文流導(dǎo)致的元素重疊或者父元素高度坍塌的問題

清除前面兄弟元素浮動

清除前面兄弟元素浮動很簡單，只需要在不想受到浮動元素影響的元素上使用 clear:both 即可

閉合子元素浮動

給元素設(shè)置 clearfix 常用

通過父元素的偽元素（::after）實現(xiàn)的著名 clearfix 方法，代碼如下：
"container clearfix">
    "box">

.clearfix::after {
    content:"";
    display:table;
    clear: both;
}
給父元素增加一個專門用于處理閉合子元素浮動的 clearfix 類名，該類使用 ::after 偽元素類選擇器增加一個內(nèi)容為空的結(jié)構(gòu)來清除浮動.

給父元素新建一個 BFC(塊格式化上下文)

請詳情講一下定位方式

實現(xiàn)一個彈窗全屏居中的效果。

div使用絕對布局，設(shè)置 margin:auto; 并設(shè)置 top、left、right、bottom 的值相等即可，不一定要都是0。

.center{
    text-align: center; /*讓div內(nèi)部文字居中*/
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

絕對布局，讓left和top都是50%，這在水平方向上讓div的最左與屏幕的最左相距50%，垂直方向上一樣，所以再用transform向左（上）平移它自己寬度（高度）的50%，也就達(dá)到居中效果了，效果圖和上方相同。

.center{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

說下幾種常用選擇器

五大類選擇器：

基本選擇器

元素選擇（直接獲取元素名 P、h1）【過于直接】

ID選擇（#id）【取值唯一不能復(fù)用】

類選擇（.class）【組合、復(fù)用】

* 通用選擇器(所有元素)

關(guān)系選擇器

偽類選擇器

:nth-child(n) ： n可以是數(shù)字(4)、關(guān)鍵詞(old,even)或公式(2n+1)

:active: 將樣式添加到被激活的元素

:focus: 將樣式添加到被選中的元素

:hover: 鼠標(biāo)懸浮在元素上時添加樣式

:link: 添加到未被訪問過的鏈接

:visited 添加到被訪問過的鏈接

:first-child: 添加到元素的第一個子元素

:lang：定義使用的語言

偽元素選擇器 :first-letter : 添加到文本的首字母 :first-line : 添加到文本的首行 :before : 某元素之前插入某些內(nèi)容 :after : 某元素之后插入某些內(nèi)容

屬性選擇器

說一下 CSS3新特性

HTML5 語義元素

HTML5 Web 存儲

sessionStorage: 客戶端數(shù)據(jù)存儲，只能維持在當(dāng)前會話范圍內(nèi)。

localStorage: 客戶端數(shù)據(jù)存儲，能維持在多個會話范圍內(nèi)。對象存儲的數(shù)據(jù)沒有時間限制。對于大量復(fù)雜數(shù)據(jù)結(jié)構(gòu)，一般使用IndexDB

CSS3 多媒體查詢 @media all and(min-width:800px){...}

CSS3 轉(zhuǎn)換和變形：transform

CSS3 過渡：transition

CSS3 動畫：animation

異步請求實現(xiàn)方式

最原始的js ,new XMLHttpRequest(); //由于瀏覽器兼容的原因，代碼復(fù)雜，多使用基于jQuery的異步請求方法（內(nèi)部封裝）

基于jQuery的Ajax方法：

Vue--axios （promise）

講一下自己代碼調(diào)試方法

JS數(shù)組操作

concat() 鏈接兩個或更多的數(shù)組,并返回結(jié)果

join() 把數(shù)組通過指定分隔符進(jìn)行分割并拼接成一個字符串

pop() 刪除并返回數(shù)組的最后一個元素

push() 向數(shù)組的末尾添加一個或更多元素,并返回新長度

reverse() 反轉(zhuǎn)數(shù)組中元素的順序

Jq DOM選擇器、DOM文檔操作

append() : 向元素結(jié)尾插入由參數(shù)指定的內(nèi)容。

prepend():向元素開頭插入由參數(shù)指定的內(nèi)容。

after() : 在匹配的元素之后插入內(nèi)容。

before(): 在每個匹配的元素之前插入內(nèi)容。

addClass():向匹配的元素添加指定的類名。

attr() :設(shè)置或返回匹配元素的屬性和值。

removeAttr():移除指定的屬性。

Vue框架的優(yōu)勢

MVVM: Model 層代表數(shù)據(jù)模型，也可以在Model中定義數(shù)據(jù)修改和操作的業(yè)務(wù)邏輯； View 代表UI 組件，它負(fù)責(zé)將數(shù)據(jù)模型轉(zhuǎn)化成UI 展現(xiàn)出來， ViewModel 是一個同步View 和 Model的對象。

mvc和mvvm其實區(qū)別并不大。都是一種設(shè)計思想。主要就是mvc中Controller演變成mvvm中的viewModel。 mvvm主要解決了mvc中大量的DOM 操作使頁面渲染性能降低，加載速度變慢，影響用戶體驗。

區(qū)別 vue數(shù)據(jù)驅(qū)動，通過數(shù)據(jù)來顯示視圖層而不是節(jié)點操作。場景：數(shù)據(jù)操作比較多的場景，更加便捷

vue生命周期（詳解）

beforeCreate：初始化了部分參數(shù)，如果有相同的參數(shù)，做了參數(shù)合并，執(zhí)行beforeCreate；el和數(shù)據(jù)對象都為undefined，還未初始化；

created：初始化了 Inject、Provide 、props、methods、data、computed和watch，執(zhí)行created ；data有了，el還沒有；

beforeMount：檢查是否存在el屬性，存在的話進(jìn)行渲染dom操作，執(zhí)行beforeMount；$el和data都初始化了，但是dom還是虛擬節(jié)點，dom中對應(yīng)的數(shù)據(jù)還沒有替換；

mounted：實例化 Watcher,渲染dom，執(zhí)行mounted；vue實例掛載完成，dom中對應(yīng)的數(shù)據(jù)成功渲染；

beforeUpdate：在渲染dom 后，執(zhí)行了mounted 鉤子后，在數(shù)據(jù)更新的時候，執(zhí)行 beforeUpdate；

updated：檢查當(dāng)前的watcher列表中，是否存在當(dāng)前要更新數(shù)據(jù)的watcher，如果存在就執(zhí)行updated；

beforeDestroy：檢查是否已經(jīng)被卸載,如果已經(jīng)被卸載,就直接return出去,否則執(zhí)行beforeDestroy；

destroyed：把所有有關(guān)自己痕跡的地方，都給刪除掉；

git常用命令

git clone:  下載初始化
Git add:添加
Git commit -m ‘ ’ :提交 帶消息
Git push：推送
Git pull： 拉取

前端1W左右的面試

轉(zhuǎn)載請標(biāo)注 出處謝謝~         感覺有幫助的不妨圈起來，后期不定期發(fā)布前端知識

GPU云服務(wù)器云服務(wù)器 java基礎(chǔ)需要掌握前端需要掌握哪些前端需要掌握什么前端開發(fā)需要掌握

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/6890.html

發(fā)表評論

登陸后可評論

0條評論

xiaochao

男|高級講師

我要關(guān)注我要私信

TA的文章

卷積神經(jīng)網(wǎng)絡(luò)

閱讀 778·2023-04-26 01:30
#黑五#edgeNAT：全場VPS月付8折年付7折，韓國LG/美西洛杉磯/Cera VPS實付48元

閱讀 3326·2021-11-24 10:32
C# 從 UTF-8 流中讀取字符串的正確方法

閱讀 2213·2021-11-22 14:56
聊聊并發(fā)（五）——線程池

閱讀 2021·2021-11-18 10:07
【每日一包0004】array-slice

閱讀 584·2019-08-29 17:14
開發(fā)一個 Parcel-vue 腳手架工具

閱讀 654·2019-08-26 12:21
js監(jiān)聽窗口消失

閱讀 3134·2019-08-26 10:55
[譯]帶你理解 Async/await

閱讀 2982·2019-08-23 18:09

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端面試基礎(chǔ)(1年以內(nèi)需掌握)

相關(guān)文章

騰訊前端求職直播課——筆試篇

騰訊前端求職直播課——筆試篇

騰訊前端求職直播課——筆試篇

前端實習(xí)面試的一些建議

java面試總結(jié)

發(fā)表評論

0條評論

xiaochao

男|高級講師

TA的文章

卷積神經(jīng)網(wǎng)絡(luò)

#黑五#edgeNAT：全場VPS月付8折年付7折，韓國LG/美西洛杉磯/Cera VPS實付48元

C# 從 UTF-8 流中讀取字符串的正確方法

聊聊并發(fā)（五）——線程池

【每日一包0004】array-slice

開發(fā)一個 Parcel-vue 腳手架工具

js監(jiān)聽窗口消失

[譯]帶你理解 Async/await

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

前端面試基礎(chǔ)(1年以內(nèi)需掌握)

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！