回顧本身三次失敗的面試經歷

前言

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

但願這片文章的推送，能直抵你的心裏。

---

想第一時間看到我更新的文章？公衆號：閏土大叔，歡迎關注~