10.26 酷狗音樂校招前端一面經曆

酷狗一面

1. 如何實作三欄布局（左右兩邊固定寬度，中間自适應）？

1. 使用flex布局： 父元素設定 

   display: flex

   ，左右兩邊設定固定寬度，中間設定 

   flex-grow: 1

   ；
2. 使用浮動布局：左右兩邊設定固定寬度，而且分别設定 

   float:left和right

   ，這個方法有一個需要注意的是在HTML中，中間欄需要和右邊欄進行對調；
3. 使用絕對定位布局：左右兩邊設定固定寬度和 

   position:absolute

   ,而且分别設定 

   left: 0

   和 

   right: 0

   ，中間欄隻要設定左右margin為左右欄的寬度就可以了（需要注意的是左右兩邊需要設定 

   top: 0

   ，不然右邊會被訂下來）

補充

其實還有表格布局，網格布局和聖杯布局，詳細請看三欄布局的5種解決方案及優缺點

2. 如何實作彈窗水準垂直居中？

3. 

==

和 

===

 的差別

===

為恒等符：當等号兩邊的值為相同類型的時候，直接比較等号兩邊的值，值相同則傳回true，若等号兩邊的值類型不同時直接傳回false。

==

為等值符： 當等号兩邊的值為相同類型時比較值是否相同，類型不同時會發生類型的自動轉換，轉換為相同的類型後再作比較。

a、如果一個是null、一個是undefined，那麼[相等]。

b、如果一個是字元串，一個是數值，把字元串轉換成數值再進行比較。

c、如果任一值是 true，把它轉換成 1 再比較；如果任一值是 false，把它轉換成 0 再比較。

d、如果一個是對象，另一個是數值或字元串，把對象轉換成基礎類型的值再比較。對象轉換成基礎類型，利用它的toString或者valueOf方法。 js核心内置類，會嘗試valueOf先于toString；例外的是Date，Date利用的是toString轉換。非js核心的對象，令說（比較麻 煩，我也不大懂）

e、任何其他組合，都[不相等]。

4. 30 

==

 '30' 的過程是怎樣的？

1. 30為數值類型，而'30'未字元串類型，是以等号兩邊的資料類型不相等，需要進行轉換類型；
2. 由于一個是數值，另一個字元串，是以需要将字元串轉換成數值再進行比較，即 

   '30' => 30

   ;
3. 這時等号兩邊同樣為數值型資料，即 

   30 == 30

   ，是以傳回 

   true

5. 以下代碼輸出的是什麼？為什麼呢？

1. for (var i=0; i<5; i++) {

2. setTimeout( function timer() {

3. console.log(i);

4. }, 0 );

5. }

6. 你有使用過閉包嗎？

7. 子產品化的異步加載怎樣做？

8. 

window.onload

執行時間？

9.圖檔加載完的時候會執行嗎？

10. 了解JS繼承嗎？

11. 利用原型鍊的繼承有什麼缺點嗎？

12. 知道如何修改this的指向嗎？

修改this指向的辦法有三種： 

apply

、 

call

和 

bind

apply

、 

call

：通過傳入需要指向的對象，進而改變 

this

的指向，指向傳入的第一個參數;

bind

：它會建立一個函數的執行個體，其this值會被綁定到傳給bind()函數的值。

1. window.color = 'red';

2. var o = { color:'blue' };

3. function sayColor(){

4.    console.log(this.color);

5. }

6. var globalSaycolor = sayColor;

7. var objectSaycolor = sayColor.bind(o);

8. globalSaycolor();  // red

9. objectSaycolor();  // blue

補充

其實還有一種：new關鍵字改變this指向

因為在 

new

的過程中，其中有一個步驟為将構造函數内部的 

this

指向執行個體對象，是以通過 

new關鍵字

也可以改變 

this

的指向。

13. 

apply

和 

call

的差別？

相同點：可以用來代替另一個對象調用一個方法，将一個函數的對象上下文從初始的上下文改變為由thisObj指定的新對象。

不同點：實際上， 

apply

和 

call

的功能是一樣的，隻是傳入的參數清單形式不同。

apply

：最多隻能有兩個參數——新 

this

對象和一個數組 

argArray

。如果給該方法傳遞多個參數，則把參數都寫進這個數組裡面，當然，即使隻有一個參數，也要寫進數組裡。如果 

argArray

不是一個有效的數組或 

arguments

對象，那麼将導緻一個 

TypeError

。如果沒有提供 

argArray

和 

thisObj

任何一個參數，那麼Global對象将被用作 

thisObj

，并且無法被傳遞任何參數。

call

：它可以接受多個參數，第一個參數與 

apply

一樣，後面則是一串參數清單。這個方法主要用在js對象各方法互相調用的時候，使目前this執行個體指針保持一緻，或者在特殊情況下需要改變this指針。如果沒有提供 

thisObj

參數，那麼 Global 對象被用作 

thisObj

。

14. 有一個按鈕是異步生成的，怎樣對它進行事件綁定？

由于按鈕是異步生成的，是以我選擇将事件綁定在按鈕生成的父元素上，通過事件委托的機制，利用事件冒泡，把事件綁定在父元素上，可以通過判斷 

event.target

按鈕是否已經生成，進而實作相應的事件。

科普補充：

事件冒泡可以形象地比喻為把一顆石頭投入水中，泡泡會一直從水底冒出水面。也就是說，事件會從最内層的元素開始發生，一直向上傳播，直到 

document

對象；

事件捕獲則跟事件冒泡相反，事件會從 

document

對象開始發生，直到最具體的元素；

15. 跨域有處理過嗎？

我處理過的跨域有兩種情況：

1. 一種是在頁面中嵌入了一個iframe，是以父子iframe間産生了跨域，要解決這個問題，隻需要把 

   document.domain

   設定成相同的值就可以在兩個頁面裡進行相應的操作了；
2. 另外一種情況是用Vue開發涉及到的跨域問題，這個問題隻需要修改config檔案夾下的index.js中的dev:{}部分中修改proxyTable參數即可，相當于對跨域的url進行了代理，進而可以順利通路。

另外說了一下自己比較熟悉的一種跨域解決方案：JSONP

JSONP解決跨域問題的本質其實就是 

<script>

 标簽可以請求不同域名下的資源，即 

<script>

 請求不受浏覽器同源政策影響。

面試官聽到JSONP立刻提出了一個問題：JSONP是否可以支援 

POST

方法？為什麼？

JSONP隻支援 

GET

的請求方法，上面也提到了JSONP原理其實就是利用 

<script>

 标簽發送了一個 

URL

給伺服器，其實與 

ajax XMLHttpRequest

協定無關了，相當于輸入了一個 

url

而已，是以必然隻能為 

GET

請求方法。

16. 既然提到 

POST

和 

GET

，說說兩者的差別？

1. 大小： 

   GET

   送出的資料最大為2k（原則上url長度無限制，可是浏覽器通常限制url長度在2k左右）； 

   POST

   理論上沒有限制大小（實際上IIS4中最大量為80KB，IIS5中為100KB）。
2. 發送方式： 

   GET

   請求資料放在url上，即HTTP協定頭中，其格式為： 

   url?key=value&key2=value

   ; 

   POST

   把資料放在HTTP的包體中（Request Body）。
3. 安全性： 

   GET

   請求可被緩存，請求儲存在浏覽器曆史記錄中； 

   POST

   則不能被緩存。與 

   POST

   相比， 

   GET

   的安全性較差，因為發送的資料是URL的一部分。
4. 發送TCP包：對 

   GET

   請求隻産生一個TCP包，浏覽器會把 

   http header

   和 

   data

   一并發送出去，伺服器響應 

   200

   （傳回資料）；對于 

   POST

   請求産生兩個TCP資料包，浏覽器先發送 

   http header

   ，伺服器确認權限正确響應 

   100

   (continue)傳回浏覽器，浏覽器收到 

   100

   确認繼續請求，再次發送 

   data

   ，伺服器響應 

   200

   （傳回資料）。

17. 聽到你提到浏覽器，你了解浏覽器緩存的方式嗎？

18. 看你有用過Promise，知道Promise有幾種狀态？

19. 你知道 

pending

狀态可以停止嗎？

20. 那XMLHttpRequest 的 

pending

狀态可以停止嗎？

21. 知道Promise和setTimeout的執行順序嗎？

22. vue中生命周期中的鈎子函數用過哪些？

23. 為什麼不把資料放在created函數中？

24. 對Vue的資料雙向綁定有了解嗎？

25. 了解重繪和回流嗎？頁面的加載順序？

26. 如何減少回流、重繪？怎樣控制隻有一部分回流？

27. 了解什麼算法？快排？

28. 還了解什麼排序算法？

29. 了解二叉查找樹嗎？

30. 有了解什麼後端語言嗎？知道面向對象的特性嗎？

31. 知道資料庫連接配接池嗎？

32. 未來前端的規劃？

酷狗二面

在面完第一面之後，本來以為終于結束了，沒想到迎來的是第二技術面，後面面試官介紹說其實本來是應該兩個人同時面我的，因為有一個面試官沒空，是以就錯開了，就有了"二面"了，其實本質上還是一面而已。

1. 自我介紹

2. 問了一下筆試的時候不應該錯的題

3. 了解的HTTP狀态碼有哪些？

4. 正則的題目，對比 

/^[a-z0-9][a-z]+$/

和 

/^[a-z0-9][a-z]*$/

的差別？

5. 

display:none

 和 

visibility:hidden

的差別？

6. CSS選擇器的了解，你知道多少選擇器？

7. CSS3布局，移動端有用過rem嗎？布局的話一般怎樣布局？

8. Flex布局和傳統的其他布局有什麼優點？

9. Flex的居中方式有哪些？其他方式有哪些？

10. display設定inline-block的話，多個之間有間隔應該怎樣處理？ (父節點font-size: 0)

11. 更熟悉那方面的技術棧？

12. 對自己項目是怎樣設計和選型的？

13. 有用到vuex嗎？

14. 元件之間的通訊怎樣做到？

15. 真的學習前端是什麼時候開始？

16. 方向是選擇全棧還是隻做前端？

17. 有沒有在nodeJS上做過什麼？

18. 有沒有在npm上面做過開源的學習？

19. 對畢業之後的學習規劃？

原文釋出時間為：2018-11-01

本文作者：BlueYuFisher

本文來自雲栖社群合作夥伴“

前端大學

”，了解相關資訊可以關注“

前端大學

”。