前言

時間的齒輪已經來到了2017年的11月份，距離2018年僅僅還剩下不到兩個月的時間。站在這個時間點上，我對自己之前三次失敗的面試經歷做了一次深度回顧。

可能很多小夥伴會問，為什麼要去回顧失敗的面試經歷呢？

因為在網際網路+時代，成功的案例可以借鑑，但是不可複製；失敗的案例可以引以為戒，但是不可重蹈覆轍。你按照成功者的步驟一步一步走，最後不一定會成功；但如果你按照失敗者的步驟一步一步走，結局註定會失敗。

我在這裡寫出當年我失敗的經歷，算是對自己做一個總結，也是為了提醒後來者，一入前端深似海，坑多坑少自己踩，避免走上閏土哥的老路。

所以，接下來，正文從這開始～

壹

說起第一次失敗的面試經歷，是在我13年剛剛畢業的時候。那時我正在海投簡歷，認真找工作。當初應聘的是一家規模不算大的小公司，進去之後，面試官看都沒看我一眼，給我丟下一句話就忙他的去了。

他原話的意思是說，讓我用jQuery寫個輪播圖效果，給我提供的條件是，一臺沒有聯網的膝上型電腦，和本地下載好的jQuery的API文件。

當時剛從培訓班學出來的我，html和css基礎還算紮實，但對jquery的api熟練程度還是有所欠缺的。因為之前在培訓班學習切靜態頁面的時候，碰到輪播圖效果一般都會用網上別人寫好的外掛。但我還是硬著頭皮去嘗試著寫了寫。

過了幾分鐘後，我靜態頁面的佈局寫出來了，但是jquery的輪播效果還是沒整出來。當時的我，知道通過的勝算幾乎為零，但還是盡力爭取了一下，跟面試官說，我U盤裡有我自己的作品，你要不要看一下。面試官此時還是目不轉睛的盯著他的筆記本螢幕，邊看邊說，你自己帶來的作品，是不是自己寫的也不一定，面試題最能說明問題等，聽他巴拉巴拉說了一堆。

結果可想而知，我被面試官刷下來了。

回去之後，我便開始研究，如何用jquery去實現輪播圖的效果。在這裡，我簡單地說下，當時很多購物網站（比如說淘寶京東）都會新增商品的圖片輪播效果。輪播圖作為一個公司首頁最重要的推廣方式，由於其相對於靜態頁面的動態滾動，使其更容易吸引客戶的眼球。

現在想想，輪播圖的原理其實十分簡單。它是利用人眼的視覺差，通過移動每張圖片的left值，產生一種動態滾動的效果。廢話不多講，直接上程式碼：

記住，寫任何JQ互動效果，都是先構建好佈局，然後才開始JQ處理，DOM操作。

在這裡，節點的構建其實沒什麼好講的，CSS樣式也很簡單，這裡就不貼出程式碼了。簡單說下，每個li下圖片的顯示與隱藏，都是通過它的display屬性來設定。左右切換則是採用圖片li浮動，父層元素ul的寬度為總圖片寬度（也就是li 的寬度乘以li的個數），ui相對外層父元素絕對定位，並設定為超出的部分要隱藏。然後當想切換到某個index 的圖片時，則採用修改ul的left值來實現。比如顯示第一張圖片初始定位left值為0，要想顯示第二張圖則將left值修改為-400px即可。

頁面已經構建完畢，接下來就是JQ的操作。我們直接貼出程式碼：

在這段程式碼中，我們先是用變數儲存了當前索引值和圖片總數，然後定義了一個定時器seInterval函式，裡面的邏輯是，如果當前index值小於圖片總數減一，就讓它自增++；如果大於的話，就讓當前index值初始化為0。

然後為左右箭頭添加了hover和click事件，在這裡呼叫了兩個函式，一個是重置定時器函式autoChangeAgain()，一個是圖片切換處理函式changeTo()。當點選左右箭頭或者是自動輪播的時候，我們都會呼叫animate()函式，通過修改left 值產生動態滾動的效果。最後就是給li控制按鈕（小圓點或者是小長條）繫結事件處理函式，當滑鼠移入清除定時器，反之則啟動定時器。

大概的原理便是如此，所以說，輪播圖最簡單也最困難，圖要張張輪著播，還要絲滑無縫隙。自此，我才明白了，面試官為何會讓應聘者二話不說，先來寫一個輪播圖效果，因為麻雀雖小，五臟俱全，這裡面涉及到了很多知識點，如果你能寫出來，證明你對JQ的API的熟練程度還是可以的，而且也有一定的邏輯性。起碼從側面反映出，你是一個合格的初級前端攻城獅。

貳

我的第二段失敗的面試經歷，說起來也挺巧，還是跟JS輪播圖有關。不過這次換成了用原生JavaScript來編寫。照樣，我還是因為沒有寫出來而被pass掉了。後來想想，其實，邏輯和JQ是一樣的，只不過是換成了JS。還是先直接貼出程式碼：

看看這JS的程式碼量，還是有些冗雜，不過思路還是模仿JQ的實現思路。換湯不換藥，程式碼裡備註已經很詳細了，這裡就不一一闡述了。

很顯然，這次面試的難度已經提升了一個臺階，考察的是面試者對原生JS的熟練程度，以及邏輯性。相對的，這次的面試崗位的薪水也是相對要高點。如果這個能寫出來的話，我覺得你的JS正在進階，而你也正在進階為一個專業的JSer。此時，距離中級前端攻城獅就不遠了。

叄

俗話說，無巧不成書。關於我第三次面試失敗的經歷，依然是與JS輪播圖有關。不過這次面試，卻給我留下了一個比較深刻的印象。

這是我去年的一次面試，給我發麵試邀請的公司是思特奇（這也算是在電信行業名聲在外的網際網路大廠了，如果有不瞭解的可以上百度百科）。思特奇在太原高新區的辦公地點可以說是很高大上，整整一層都是技術開發人員，一排排A面亮著銀色蘋果logo的MacBook Pro甚是晃眼，給人一種濃厚的程式猿文化。

這次的機試題，還是那個繞不過去的JS輪播圖的實現，不過這次卻是讓我用面向物件的思想去實現，據說這是技術總監臨時的想法，這也是我後來才知曉的。當然了，我這次面試的薪水又拔高了一個臺階。

基於面向物件的輪播圖，看似比面向過程要繁瑣了很多，而且對於一個輪播圖來說，也沒必要。但面試官想要考察的是應聘者對於面向物件程式設計的熟練程度，看看你的前端程式設計能力是否達到了他們公司業務開發的水平。

很顯然，這次的機試題打了我個措手不及。

正如後來我拜讀的JS紅皮書裡第六章寫的，面向物件的程式設計，首先要建立一個Object例項，定義一個Slider構造器。然後在Slider的prototype原型上定義各種方法，這樣做的好處是可以很方便的實現輪播圖的效果，減少程式碼的冗餘，同時避免了變數命名的衝突問題。

現在需要我們先來捋一下思路，分析一下構造器裡需要的屬性：

1. 初始化所有的樣式操作

2. 顯示在對應的容器操作

3. 滑鼠進入事件

4. 自動播放事件

在這些基本的事件中，我們需要注意呼叫的順序，如建立在初始化之前，我們可以把一些通用的屬性放到原型鏈中來編寫，這樣的好處是減少了變數空間的佔用和多次訪問屬性的結果。

過程中遇到的問題：

1.其中的this指代問題：這裡的解決辦法是在滑鼠進入之前的函式中快取一下var that = this。 這樣就可以訪問屬性了。

2.圖片輪播判斷：向左點選的時候， 如果當前的索引值大於零，讓它執行自減操作，如果不大於0 就讓他等於對應圖片長度-1；

                       向右點選的時候，當前的索引值小於它對應的輪播圖片的長度-1，執行自加1操作，超過圖片輪播長度時，索引值等於0。

這次基於物件的程式碼就不給大家貼出來了，留給你們做個實踐。當然，這次思特奇面試之旅，最後也是以失敗告終，這也是我離進大廠最近的一次。

後記

分享了這麼多面試經歷，其實，我最想跟大家分享的是，無論你想走多遠，你都需要不斷的走下去。前端最精華的部分便是原生的JS，也只有JS是前端開發中算得上程式設計的一門語言，這也是我們前端工程師技術分層的重要指標，也能體現出你的程式碼能力，開發水平。所以，不是說你會多少個gulp、grunt、webpack這樣的構建打包工具，會多少個angular、react、vue等框架的腳手架搭建，會多少個sass less stylus等這樣的css前處理器，會多少個npm bower cnpm等這樣的包管理器你就牛逼，永遠記住，JavaScript才是我們前端工程師的核心競爭力！

希望這片文章的推送，能直抵你的內心。

宣告

歡迎轉載，請註明出處和作者，同時保留宣告。

想了解我的更多動態？歡迎關注我的微信公眾號：