摘要：站在這個時間點上，我對自己之前三次失敗的面試經歷做了一次深度回顧。關于我第三次面試失敗的經歷，依然是與輪播圖有關。當然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進大廠最近的一次。

時間的齒輪已經來到了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.其中的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才是我們前端工程師的核心競爭力！

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

想了解我的更多動態？歡迎關注我的微信公眾號：閏土哥的前端路

作者：閏土少年
鏈接：https://juejin.im/post/5a0eb1...
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。