摘要：站在這個(gè)時(shí)間點(diǎn)上，我對(duì)自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與輪播圖有關(guān)。當(dāng)然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進(jìn)大廠最近的一次。

時(shí)間的齒輪已經(jīng)來(lái)到了2017年的11月份，距離2018年僅僅還剩下不到兩個(gè)月的時(shí)間。站在這個(gè)時(shí)間點(diǎn)上，我對(duì)自己之前三次失敗的面試經(jīng)歷做了一次深度回顧。

可能很多小伙伴會(huì)問(wèn)，為什么要去回顧失敗的面試經(jīng)歷呢？

因?yàn)樵诨ヂ?lián)網(wǎng)+時(shí)代，成功的案例可以借鑒，但是不可復(fù)制；失敗的案例可以引以為戒，但是不可重蹈覆轍。你按照成功者的步驟一步一步走，最后不一定會(huì)成功；但如果你按照失敗者的步驟一步一步走，結(jié)局注定會(huì)失敗。
我在這里寫(xiě)出當(dāng)年我失敗的經(jīng)歷，算是對(duì)自己做一個(gè)總結(jié)，也是為了提醒后來(lái)者，一入前端深似海，坑多坑少自己踩，避免走上閏土哥的老路。

所以，接下來(lái)，正文從這開(kāi)始～

說(shuō)起第一次失敗的面試經(jīng)歷，是在我13年剛剛畢業(yè)的時(shí)候。那時(shí)我正在海投簡(jiǎn)歷，認(rèn)真找工作。當(dāng)初應(yīng)聘的是一家規(guī)模不算大的小公司，進(jìn)去之后，面試官看都沒(méi)看我一眼，給我丟下一句話就忙他的去了。

他原話的意思是說(shuō)，讓我用jQuery寫(xiě)個(gè)輪播圖效果，給我提供的條件是，一臺(tái)沒(méi)有聯(lián)網(wǎng)的筆記本電腦，和本地下載好的jQuery的API文檔。

當(dāng)時(shí)剛從培訓(xùn)班學(xué)出來(lái)的我，html和css基礎(chǔ)還算扎實(shí)，但對(duì)jquery的api熟練程度還是有所欠缺的。因?yàn)橹霸谂嘤?xùn)班學(xué)習(xí)切靜態(tài)頁(yè)面的時(shí)候，碰到輪播圖效果一般都會(huì)用網(wǎng)上別人寫(xiě)好的插件。但我還是硬著頭皮去嘗試著寫(xiě)了寫(xiě)。
過(guò)了幾分鐘后，我靜態(tài)頁(yè)面的布局寫(xiě)出來(lái)了，但是jquery的輪播效果還是沒(méi)整出來(lái)。當(dāng)時(shí)的我，知道通過(guò)的勝算幾乎為零，但還是盡力爭(zhēng)取了一下，跟面試官說(shuō)，我U盤里有我自己的作品，你要不要看一下。面試官此時(shí)還是目不轉(zhuǎn)睛的盯著他的筆記本屏幕，邊看邊說(shuō)，你自己帶來(lái)的作品，是不是自己寫(xiě)的也不一定，面試題最能說(shuō)明問(wèn)題等，聽(tīng)他巴拉巴拉說(shuō)了一堆。

結(jié)果可想而知，我被面試官刷下來(lái)了。

回去之后，我便開(kāi)始研究，如何用jquery去實(shí)現(xiàn)輪播圖的效果。在這里，我簡(jiǎn)單地說(shuō)下，當(dāng)時(shí)很多購(gòu)物網(wǎng)站（比如說(shuō)淘寶京東）都會(huì)添加商品的圖片輪播效果。輪播圖作為一個(gè)公司首頁(yè)最重要的推廣方式，由于其相對(duì)于靜態(tài)頁(yè)面的動(dòng)態(tài)滾動(dòng)，使其更容易吸引客戶的眼球。

現(xiàn)在想想，輪播圖的原理其實(shí)十分簡(jiǎn)單。它是利用人眼的視覺(jué)差，通過(guò)移動(dòng)每張圖片的left值，產(chǎn)生一種動(dòng)態(tài)滾動(dòng)的效果。廢話不多講，直接上代碼：

記住，寫(xiě)任何JQ交互效果，都是先構(gòu)建好布局，然后才開(kāi)始JQ處理，DOM操作。

在這里，節(jié)點(diǎn)的構(gòu)建其實(shí)沒(méi)什么好講的，CSS樣式也很簡(jiǎn)單，這里就不貼出代碼了。簡(jiǎn)單說(shuō)下，每個(gè)li下圖片的顯示與隱藏，都是通過(guò)它的display屬性來(lái)設(shè)定。左右切換則是采用圖片li浮動(dòng)，父層元素ul的寬度為總圖片寬度（也就是li 的寬度乘以li的個(gè)數(shù)），ui相對(duì)外層父元素絕對(duì)定位，并設(shè)定為超出的部分要隱藏。然后當(dāng)想切換到某個(gè)index 的圖片時(shí)，則采用修改ul的left值來(lái)實(shí)現(xiàn)。比如顯示第一張圖片初始定位left值為0，要想顯示第二張圖則將left值修改為-400px即可。
頁(yè)面已經(jīng)構(gòu)建完畢，接下來(lái)就是JQ的操作。我們直接貼出代碼：

在這段代碼中，我們先是用變量存儲(chǔ)了當(dāng)前索引值和圖片總數(shù)，然后定義了一個(gè)定時(shí)器seInterval函數(shù)，里面的邏輯是，如果當(dāng)前index值小于圖片總數(shù)減一，就讓它自增++；如果大于的話，就讓當(dāng)前index值初始化為0。

然后為左右箭頭添加了hover和click事件，在這里調(diào)用了兩個(gè)函數(shù)，一個(gè)是重置定時(shí)器函數(shù)autoChangeAgain()，一個(gè)是圖片切換處理函數(shù)changeTo()。當(dāng)點(diǎn)擊左右箭頭或者是自動(dòng)輪播的時(shí)候，我們都會(huì)調(diào)用animate()函數(shù)，通過(guò)修改left 值產(chǎn)生動(dòng)態(tài)滾動(dòng)的效果。最后就是給li控制按鈕（小圓點(diǎn)或者是小長(zhǎng)條）綁定事件處理函數(shù)，當(dāng)鼠標(biāo)移入清除定時(shí)器，反之則啟動(dòng)定時(shí)器。

大概的原理便是如此，所以說(shuō)，輪播圖最簡(jiǎn)單也最困難，圖要張張輪著播，還要絲滑無(wú)縫隙。自此，我才明白了，面試官為何會(huì)讓?xiě)?yīng)聘者二話不說(shuō)，先來(lái)寫(xiě)一個(gè)輪播圖效果，因?yàn)槁槿鸽m小，五臟俱全，這里面涉及到了很多知識(shí)點(diǎn)，如果你能寫(xiě)出來(lái)，證明你對(duì)JQ的API的熟練程度還是可以的，而且也有一定的邏輯性。起碼從側(cè)面反映出，你是一個(gè)合格的初級(jí)前端攻城獅。

我的第二段失敗的面試經(jīng)歷，說(shuō)起來(lái)也挺巧，還是跟JS輪播圖有關(guān)。不過(guò)這次換成了用原生JavaScript來(lái)編寫(xiě)。照樣，我還是因?yàn)闆](méi)有寫(xiě)出來(lái)而被pass掉了。后來(lái)想想，其實(shí)，邏輯和JQ是一樣的，只不過(guò)是換成了JS。還是先直接貼出代碼：

看看這JS的代碼量，還是有些冗雜，不過(guò)思路還是模仿JQ的實(shí)現(xiàn)思路。換湯不換藥，代碼里備注已經(jīng)很詳細(xì)了，這里就不一一闡述了。

很顯然，這次面試的難度已經(jīng)提升了一個(gè)臺(tái)階，考察的是面試者對(duì)原生JS的熟練程度，以及邏輯性。相對(duì)的，這次的面試崗位的薪水也是相對(duì)要高點(diǎn)。如果這個(gè)能寫(xiě)出來(lái)的話，我覺(jué)得你的JS正在進(jìn)階，而你也正在進(jìn)階為一個(gè)專業(yè)的JSer。此時(shí)，距離中級(jí)前端攻城獅就不遠(yuǎn)了。

俗話說(shuō)，無(wú)巧不成書(shū)。關(guān)于我第三次面試失敗的經(jīng)歷，依然是與JS輪播圖有關(guān)。不過(guò)這次面試，卻給我留下了一個(gè)比較深刻的印象。

這是我去年的一次面試，給我發(fā)面試邀請(qǐng)的公司是思特奇（這也算是在電信行業(yè)名聲在外的互聯(lián)網(wǎng)大廠了，如果有不了解的可以上百度百科）。思特奇在太原高新區(qū)的辦公地點(diǎn)可以說(shuō)是很高大上，整整一層都是技術(shù)開(kāi)發(fā)人員，一排排A面亮著銀色蘋果logo的MacBook Pro甚是晃眼，給人一種濃厚的程序猿文化。

這次的機(jī)試題，還是那個(gè)繞不過(guò)去的JS輪播圖的實(shí)現(xiàn)，不過(guò)這次卻是讓我用面向?qū)ο蟮乃枷肴?shí)現(xiàn)，據(jù)說(shuō)這是技術(shù)總監(jiān)臨時(shí)的想法，這也是我后來(lái)才知曉的。當(dāng)然了，我這次面試的薪水又拔高了一個(gè)臺(tái)階。

基于面向?qū)ο蟮妮啿D，看似比面向過(guò)程要繁瑣了很多，而且對(duì)于一個(gè)輪播圖來(lái)說(shuō)，也沒(méi)必要。但面試官想要考察的是應(yīng)聘者對(duì)于面向?qū)ο缶幊痰氖炀毘潭?，看看你的前端編程能力是否達(dá)到了他們公司業(yè)務(wù)開(kāi)發(fā)的水平。

很顯然，這次的機(jī)試題打了我個(gè)措手不及。

正如后來(lái)我拜讀的JS紅皮書(shū)里第六章寫(xiě)的，面向?qū)ο蟮某绦蛟O(shè)計(jì)，首先要?jiǎng)?chuàng)建一個(gè)Object實(shí)例，定義一個(gè)Slider構(gòu)造器。然后在Slider的prototype原型上定義各種方法，這樣做的好處是可以很方便的實(shí)現(xiàn)輪播圖的效果，減少代碼的冗余，同時(shí)避免了變量命名的沖突問(wèn)題。

現(xiàn)在需要我們先來(lái)捋一下思路，分析一下構(gòu)造器里需要的屬性：

初始化所有的樣式操作
顯示在對(duì)應(yīng)的容器操作
鼠標(biāo)進(jìn)入事件

自動(dòng)播放事件在這些基本的事件中，我們需要注意調(diào)用的順序，如創(chuàng)建在初始化之前，我們可以把一些通用的屬性放到原型鏈中來(lái)編寫(xiě)，這樣的好處是減少了變量空間的占用和多次訪問(wèn)屬性的結(jié)果。

過(guò)程中遇到的問(wèn)題：

1.其中的this指代問(wèn)題：這里的解決辦法是在鼠標(biāo)進(jìn)入之前的函數(shù)中緩存一下var that = this。 這樣就可以訪問(wèn)屬性了。
2.圖片輪播判斷：向左點(diǎn)擊的時(shí)候， 如果當(dāng)前的索引值大于零，讓它執(zhí)行自減操作，如果不大于0 就讓他等于對(duì)應(yīng)圖片長(zhǎng)度-1；

向右點(diǎn)擊的時(shí)候，當(dāng)前的索引值小于它對(duì)應(yīng)的輪播圖片的長(zhǎng)度-1，執(zhí)行自加1操作，超過(guò)圖片輪播長(zhǎng)度時(shí)，索引值等于0。這次基于對(duì)象的代碼就不給大家貼出來(lái)了，留給你們做個(gè)實(shí)踐。當(dāng)然，這次思特奇面試之旅，最后也是以失敗告終，這也是我離進(jìn)大廠最近的一次。

分享了這么多面試經(jīng)歷，其實(shí)，我最想跟大家分享的是，無(wú)論你想走多遠(yuǎn)，你都需要不斷的走下去。前端最精華的部分便是原生的JS，也只有JS是前端開(kāi)發(fā)中算得上編程的一門語(yǔ)言，這也是我們前端工程師技術(shù)分層的重要指標(biāo)，也能體現(xiàn)出你的代碼能力，開(kāi)發(fā)水平。

所以，不是說(shuō)你會(huì)多少個(gè)gulp、grunt、webpack這樣的構(gòu)建打包工具，會(huì)多少個(gè)angular、react、vue等框架的腳手架搭建，會(huì)多少個(gè)sass less stylus等這樣的css預(yù)處理器，會(huì)多少個(gè)npm bower cnpm等這樣的包管理器你就牛逼，永遠(yuǎn)記住，JavaScript才是我們前端工程師的核心競(jìng)爭(zhēng)力！

希望這片文章的推送，能直抵你的內(nèi)心。

想了解我的更多動(dòng)態(tài)？歡迎關(guān)注我的微信公眾號(hào)：閏土哥的前端路

作者：閏土少年
鏈接：https://juejin.im/post/5a0eb1...
來(lái)源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。