乾貨!前端工程師面試阿里,總結19年最精闢的知識點!

基礎知識點

乾貨!前端工程師面試阿里,總結19年最精闢的知識點!

1、水平垂直居中

子絕父相,子盒子設置絕對定位,設置top:50%;left:50%,margin-top:-50%;margin-left:-50%;

子絕父相,子盒子設置絕對定位,設置 left & top & right & bottom為0;margin: auto;

伸縮盒子,父元素設置flex;justify-content: center;align-items: center;

利用transform屬性,需要設置子絕父相,設置top:50%;left:50%;transform:translate(-50%, -50%);

2、聖盃佈局(轉發評論文章關注私信小編“教程”,可領精品編程乾貨

中間盒子設置寬度100%,左右margin,留出左右盒子的位置

左右盒子在通過定位至左右

3、兼容性問題

標籤樣式在不同的瀏覽器各自的margin 和padding差異較大, 解決方案:css裡 *{margin:0;padding:0;}

當在a標籤中嵌套img標籤時,在某些瀏覽器中img會有藍色邊框;解決方案:給img添加border:0;或者是border:none;

圖片默認有間;隙解決方案:1)給img標籤添加左浮動float:left;2)給img標籤添加display:block。

4、清除浮動的方法?(重點)

1.父級div定義height

2.結尾處家空div標籤clear:both

3.父級div定義 偽類:after和zoom

4.父級div定義 overflow:hidden

5、前端優化技巧

壓縮css,js,圖片

2.減少http請求次數,合併css,js 合併圖片(雪碧圖)

3.使用CDN

4.減少dom元素數量

5.圖片懶加載

6.靜態資源另外用無cookie得域名

7.減少dom的訪問(緩存dom)

8.巧用事件委託

9.樣式表置頂,腳本置低

6、this指向問題

一般來說,誰調用,this就指向誰,特殊情況除外

普通函數調用,此時 this 指向 window

定時器函數, 此時 this 指向 window

更改this指向的三個方法

1.call( )方法調用一個函數,其具有一個指定的this值

fn.call(改變其this指向, [指定的參數] ) 如果指定了null或者undefired,則內部this指向window

應用場景:①借用構造函數

②借用其他對象的方法

2.apply( )方法調用一個函數,其具有一個指定的this值,作為一個數組提供的參數

fn.apply(var1, var2) 應用:把數組展開

應用場景:把數組展開,傳遞給調用的方法

3.bind 不會調用函數,會返回一個新的函數

應用場景:①改變定時器內部的this,②改變事件處理函數的this

7、json字符串轉化方法

JSON.parse(str); //由JSON字符串轉換為JSON對象

JSON.stringify(obj); //將JSON對象轉化為JSON字符

進階知識點

乾貨!前端工程師面試阿里,總結19年最精闢的知識點!

1、設置分頁符

乾貨!前端工程師面試阿里,總結19年最精闢的知識點!

2、只能輸入數字和小數點

乾貨!前端工程師面試阿里,總結19年最精闢的知識點!

3、統計每一個字符串出現的次數

乾貨!前端工程師面試阿里,總結19年最精闢的知識點!

乾貨!前端工程師面試阿里,總結19年最精闢的知識點!

高難度知識點

怎樣引入一個第三方的包?

require與import的區別:

遵循規範:

require 是 AMD規範引入方式

import是es6的一個語法標準,如果要兼容瀏覽器的話必須轉化成es5的語法

調用時間:

require是運行時調用,所以require理論上可以運用在代碼的任何地方

import是編譯時調用,所以必須放在文件開頭

本質:

require是賦值過程,其實require的結果就是對象、數字、字符串、函數等,再把require的

結果賦值給某個變量

import是解構過程,但是目前所有的引擎都還沒有實現import,我們在node中使用babel支持

ES6,也僅僅是將ES6轉碼為ES5再執行,import語法會被轉碼為require

在那調用第三方支付接口?為什麼?

前端調接口和後端調接口各有什麼區別,優勢與特點

一般支付接口都是由後端和支付單位聯繫調取的,前端調接口容易被劫持,不安全。

結尾小福利:轉發評論文章關注私信小編“教程”,可領精品編程乾貨


分享到:


相關文章: