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

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

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

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

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 的問(wèn)題以及解決方案

水平間隙問(wèn)題這是因?yàn)榫帉?xiě)代碼時(shí)輸入空格、換行都會(huì)產(chǎn)生空白符。而瀏覽器是不會(huì)忽略空白符的，并且對(duì)于多個(gè)連續(xù)的空白符自動(dòng)合并成一個(gè)，故產(chǎn)生了所謂的間隙。

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

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

float清除浮動(dòng)詳解

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

清除前面兄弟元素浮動(dòng)

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

閉合子元素浮動(dòng)

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

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

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

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

請(qǐng)?jiān)斍橹v一下定位方式

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

div使用絕對(duì)布局，設(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;
}

絕對(duì)布局，讓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%);
}

說(shuō)下幾種常用選擇器

五大類(lèi)選擇器：

基本選擇器

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

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

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

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

關(guān)系選擇器

偽類(lèi)選擇器

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

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

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

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

:link: 添加到未被訪(fǎng)問(wèn)過(guò)的鏈接

:visited 添加到被訪(fǎng)問(wèn)過(guò)的鏈接

:first-child: 添加到元素的第一個(gè)子元素

:lang：定義使用的語(yǔ)言

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

屬性選擇器

說(shuō)一下 CSS3新特性

HTML5 語(yǔ)義元素

HTML5 Web 存儲(chǔ)

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

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

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

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

CSS3 過(guò)渡：transition

CSS3 動(dòng)畫(huà)：animation

異步請(qǐng)求實(shí)現(xiàn)方式

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

基于jQuery的Ajax方法：

Vue--axios （promise）

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

JS數(shù)組操作

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

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

pop() 刪除并返回?cái)?shù)組的最后一個(gè)元素

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

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

Jq DOM選擇器、DOM文檔操作

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

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

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

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

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

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

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

Vue框架的優(yōu)勢(shì)

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

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

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

vue生命周期（詳解）

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

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

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

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

beforeUpdate：在渲染dom 后，執(zhí)行了mounted 鉤子后，在數(shù)據(jù)更新的時(shí)候，執(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)載請(qǐng)標(biāo)注 出處謝謝~         感覺(jué)有幫助的不妨圈起來(lái)，后期不定期發(fā)布前端知識(shí)

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/6890.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xiaochao

男|高級(jí)講師

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

TA的文章

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

閱讀 754·2023-04-26 01:30
#黑五#edgeNAT：全場(chǎng)VPS月付8折年付7折，韓國(guó)LG/美西洛杉磯/Cera VPS實(shí)付48元

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

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

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

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

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

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

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

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

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

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

相關(guān)文章

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

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

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

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

java面試總結(jié)

發(fā)表評(píng)論

0條評(píng)論

xiaochao

男|高級(jí)講師

TA的文章

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

#黑五#edgeNAT：全場(chǎng)VPS月付8折年付7折，韓國(guó)LG/美西洛杉磯/Cera VPS實(shí)付48元

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

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

【每日一包0004】array-slice

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

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

[譯]帶你理解 Async/await

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

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

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

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