一個JS效果居然要研究一天，我是否是不適合作前端？

前言

今天這篇文章的標題，顯然是要搞事情。一個JS交互效果，竟然花費了一天的寶貴時間才研究出來，我是否是不太適合作前端？

別急，搬好小板凳，正文從這開始～

原本今天下班回來感受有點累，想着今天就別學了吧，正好看見停播了很久的《極限挑戰》在網上放出了最新的一期。可是，今天發生在公司的一件小事兒，在我內心產生了不小的波瀾，正好拿這個話題跟同行們聊聊.....

今天早晨我按時去了公司，坐在個人工位上，習慣性地點開了編輯器SublimeText（我寵幸了它三年之久～），一天的編碼工做正式開始。

個人大腦高速運轉，回憶了下昨天下班前的進度，以及要修改的bug，一個是替換iconfont字體圖標的問題，一個是編寫官網首頁通用導航欄鼠標hover的交互效果，我估摸着上午先把這兩個問題解決了，下午再忙其餘的任務。

不一下子，iconfont的替換工做就完成了。緊接着就是導航欄mouse over 的特效編寫，卻不知，就是這個效果，讓本來計劃上午完成的事情，愣是被我研究了大半天才解決。二話不說，直接上圖：

我先給你們說下這裏要實現的效果，就是當鼠標移入導航欄的某個欄目時，頂部的4px 的藍色滑動條要尾隨着鼠標，如絲般順滑地滑入相應欄目的頂部位置，當鼠標leave時，藍色滑動條要退回到當前current的欄目頂部。

剛開始個人佈局是，導航欄是一個ul，ul下面有八個li，分別是八個欄目。在每一個li的頂部設置一個border-top: 4px solid #2ea0ff；html結構以下：

個人初步設想是，先隱藏這個border-top，而後當鼠標移入的時候，再顯示出來。代碼以下：

任何效果都是通過一步一步思考打磨出來的，不多是一蹴而就。就好比這個例子，學過jQuery的同窗都知道，這個效果就是很生硬的顯示一條頂部邊框，而後隱藏，沒有動畫的效果。可是jQuery的動畫api辣麼多，什麼slideDown、slideUp、fadeIn、fadeOut、animate......

（默默地給@愚人碼頭打了個廣告）

因而，我對代碼進行了第二波改造，加上了動畫效果，如下是debug現場重現：

預期的效果在瀏覽器上渲染出來，此時已經有了動畫。可是，這還不是我想要的那個效果，後來我又想了一招，能夠在每一個li裏添加一個span，設置爲絕對定位，width默認爲0，而後animate的時候，讓它過渡到li的寬度。

嗯，這個想法不錯，有點接近我心中的那個效果了。因而，我又折騰了一番：

這回終於有點樣子了，只不過仍是每一個li都有一個本身的滑動條，而領導的意思是導航欄頂部只有一條公用的4px的藍色滑動條，鼠標移入時來回切換。

此時，已將近中午，我debug 的幕後過程其實更加艱辛，不像我如今寫文字時那麼輕描淡寫。而我旁邊的同事說，看你折騰來折騰去的，幹嗎那麼辛苦，去網上找個插件就行了，省時省力。

當時，我只能苦笑，由於前些日子我跟着視頻裏寫過這個例子，不過期間隔的有點久，我本身想不起當時的邏輯了。

下午又研究了大半天，忽然靈光一現，想到了一招，能夠在ul的外層包一層div，和ul同級新增一個span元素，這個span就是那個公用的藍色滑動條。而後給父元素設置爲相對位置，給span設置爲絕對位置。而後根據鼠標移入的li的索引，計算出span要滑動的距離，這個距離就等於li的width乘以移入li的index的值，再加上每一個li之間的間距。仍是趕忙貼上html結構：

中途由於li的index索引停滯了好一陣子，由於index值取不到。因而，我又用原生javascript寫了一遍，仍是取不到值，而後又改回來jquery的寫法。在通過屢次翻閱jquery的api文檔，屢次試錯以後，終於效果寫出來了，如下是最終的業務代碼：

在這裏，我先解釋下：

第一步，經過filter方法篩選出className爲current的li，得到它的index，而後賦值給變量currentNum；

第二步，在瀏覽器刷新時初始化滑動條sliderBar的位置到指定的欄目上；

第三步，利用hover方法監控鼠標移入移出的效果，從而改變sliderBar的left的值，達到滑動的動畫效果。其中，stop()方法是爲了解決動畫隊列的問題。

以上就是我debug的過程，雖然浪費了一些時間，可是好歹問題解決了。若是你要問我，你哪來那麼大的勇氣，去死磕這個效果(bug)？我會告訴你，若是擱之前，我可能會在網上找個插件了事，由於在談到javascript業務邏輯開發這塊，我認可仍是有不小的差距。

可是，今年我開始認真的研究了紅皮書，也就是《JavaScript高級程序設計》這本被奉爲經典的JS書籍。在通過不斷的拜讀和敲代碼，如今我對本身的原生JS這塊逐漸有了些許自信，明白了它的一些底層原理和概念設計。之前是隻會照葫蘆畫瓢，如今也有了點知其然，更知其因此然的味道。

正是經過對基礎的夯實，我纔有了莫名的勇氣去死磕這些開發中遇到的各類疑難雜症。

感謝老鐵們不厭其煩的看我debug思惟重現到這裏，其實，閏土也是想借着這個事兒想跟你們說，前端基礎真的很重要，尤爲是JS！若是你基礎不牢靠，一味的追逐熱門框架，看似解決了工做上的一些問題。但回頭想一想，你的這種技術邏輯尚未造成本身的知識體系，它是鬆散的，是畸形的，是根基不牢靠的。學好基礎再去學框架，會事半功倍，遊刃有餘。若是基礎沒打好，不注重底層原理，你的前端路註定走不遠。

由於解決一個bug，浪費了一些時間，看似得不償失，可是搞出來就算牛逼。最起碼等你之後當老大了，別人問你，你就知道怎麼解決，本身踩過的坑，印象最深。而不是說，之前有人幫我解決過，如今忘了。

因此說，實踐是檢驗真理的惟一標準。網上不少文章寫的有好有壞，本身去動手debug或者是實踐一下，得出本身的結論纔是靠譜的。

後記

凌晨1點，夜已深，估計你們看到這篇文章的推送，已經是明早上班趕路時。臨睡以前，閏土送你們一句話：別人也沒有多牛逼，你也能夠在你的領域，開闢天地。

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

---

做者：閏土少年
連接：https://segmentfault.com/a/11...來源：segmentfault著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。