一個(gè)JS效果竟然要研究一天，我是不是不適合做前端？

ztyzz 發(fā)布于2019-08-21 17:42 / 997人閱讀

摘要：緊接著就是導(dǎo)航欄的特效編寫(xiě)，殊不知，就是這個(gè)效果，讓原本計(jì)劃上午完成的事情，愣是被我研究了大半天才解決。剛開(kāi)始我的布局是，導(dǎo)航欄是一個(gè)，下面有八個(gè)，分別是八個(gè)欄目。

前言

今天這篇文章的標(biāo)題，顯然是要搞事情。一個(gè)JS交互效果，居然花費(fèi)了一天的寶貴時(shí)間才研究出來(lái)，我是不是不太適合做前端？

別急，搬好小板凳，正文從這開(kāi)始～

本來(lái)今天下班回來(lái)感覺(jué)有點(diǎn)累，想著今天就別學(xué)了吧，正好看見(jiàn)停播了好久的《極限挑戰(zhàn)》在網(wǎng)上放出了最新的一期。但是，今天發(fā)生在公司的一件小事兒，在我心里產(chǎn)生了不小的波瀾，正好拿這個(gè)話題跟同行們聊聊.....

今天早晨我按時(shí)去了公司，坐在我的工位上，習(xí)慣性地點(diǎn)開(kāi)了編輯器SublimeText（我寵幸了它三年之久～），一天的編碼工作正式開(kāi)始。

我的大腦高速運(yùn)轉(zhuǎn)，回憶了下昨天下班前的進(jìn)度，以及要修改的bug，一個(gè)是替換iconfont字體圖標(biāo)的問(wèn)題，一個(gè)是編寫(xiě)官網(wǎng)首頁(yè)通用導(dǎo)航欄鼠標(biāo)hover的交互效果，我估摸著上午先把這兩個(gè)問(wèn)題解決了，下午再忙其他的任務(wù)。

不一會(huì)兒，iconfont的替換工作就完成了。緊接著就是導(dǎo)航欄mouse over 的特效編寫(xiě)，殊不知，就是這個(gè)效果，讓原本計(jì)劃上午完成的事情，愣是被我研究了大半天才解決。二話不說(shuō)，直接上圖：

我先給大家說(shuō)下這里要實(shí)現(xiàn)的效果，就是當(dāng)鼠標(biāo)移入導(dǎo)航欄的某個(gè)欄目時(shí)，頂部的4px 的藍(lán)色滑動(dòng)條要尾隨著鼠標(biāo)，如絲般順滑地滑入相應(yīng)欄目的頂部位置，當(dāng)鼠標(biāo)leave時(shí)，藍(lán)色滑動(dòng)條要退回到當(dāng)前current的欄目頂部。

剛開(kāi)始我的布局是，導(dǎo)航欄是一個(gè)ul，ul下面有八個(gè)li，分別是八個(gè)欄目。在每個(gè)li的頂部設(shè)置一個(gè)border-top: 4px solid #2ea0ff；html結(jié)構(gòu)如下：

我的初步設(shè)想是，先隱藏這個(gè)border-top，然后當(dāng)鼠標(biāo)移入的時(shí)候，再顯示出來(lái)。代碼如下：

任何效果都是經(jīng)過(guò)一步一步思考打磨出來(lái)的，不可能是一蹴而就。就比如這個(gè)例子，學(xué)過(guò)jQuery的同學(xué)都知道，這個(gè)效果就是很生硬的顯示一條頂部邊框，然后隱藏，沒(méi)有動(dòng)畫(huà)的效果。但是jQuery的動(dòng)畫(huà)api辣么多，什么slideDown、slideUp、fadeIn、fadeOut、animate......

（默默地給@愚人碼頭打了個(gè)廣告）

于是，我對(duì)代碼進(jìn)行了第二波改造，加上了動(dòng)畫(huà)效果，以下是debug現(xiàn)場(chǎng)重現(xiàn)：

預(yù)期的效果在瀏覽器上渲染出來(lái)，此時(shí)已經(jīng)有了動(dòng)畫(huà)。但是，這還不是我想要的那個(gè)效果，后來(lái)我又想了一招，可以在每個(gè)li里添加一個(gè)span，設(shè)置為絕對(duì)定位，width默認(rèn)為0，然后animate的時(shí)候，讓它過(guò)渡到li的寬度。

嗯，這個(gè)想法不錯(cuò)，有點(diǎn)接近我心中的那個(gè)效果了。于是，我又折騰了一番：

這回終于有點(diǎn)樣子了，只不過(guò)還是每個(gè)li都有一個(gè)自己的滑動(dòng)條，而領(lǐng)導(dǎo)的意思是導(dǎo)航欄頂部只有一條公用的4px的藍(lán)色滑動(dòng)條，鼠標(biāo)移入時(shí)來(lái)回切換。

此時(shí)，已將近中午，我debug 的幕后過(guò)程其實(shí)更加艱辛，不像我現(xiàn)在寫(xiě)文字時(shí)那么輕描淡寫(xiě)。而我旁邊的同事說(shuō)，看你折騰來(lái)折騰去的，干嘛那么辛苦，去網(wǎng)上找個(gè)插件就好了，省時(shí)省力。

當(dāng)時(shí)，我只能苦笑，因?yàn)榍靶┤兆游腋曨l里寫(xiě)過(guò)這個(gè)例子，不過(guò)時(shí)間隔的有點(diǎn)久，我自己想不起當(dāng)時(shí)的邏輯了。

下午又研究了大半天，突然靈光一現(xiàn)，想到了一招，可以在ul的外層包一層div，和ul同級(jí)新增一個(gè)span元素，這個(gè)span就是那個(gè)公用的藍(lán)色滑動(dòng)條。然后給父元素設(shè)置為相對(duì)位置，給span設(shè)置為絕對(duì)位置。然后根據(jù)鼠標(biāo)移入的li的索引，計(jì)算出span要滑動(dòng)的距離，這個(gè)距離就等于li的width乘以移入li的index的值，再加上每個(gè)li之間的間距。還是趕緊貼上html結(jié)構(gòu)：

中途因?yàn)閘i的index索引停滯了好一陣子，因?yàn)閕ndex值取不到。于是，我又用原生javascript寫(xiě)了一遍，還是取不到值，然后又改回來(lái)jquery的寫(xiě)法。在經(jīng)過(guò)多次翻閱jquery的api文檔，多次試錯(cuò)之后，終于效果寫(xiě)出來(lái)了，以下是最終的業(yè)務(wù)代碼：

在這里，我先解釋下：

第一步，通過(guò)filter方法篩選出className為current的li，獲得它的index，然后賦值給變量currentNum；
第二步，在瀏覽器刷新時(shí)初始化滑動(dòng)條sliderBar的位置到指定的欄目上；
第三步，利用hover方法監(jiān)控鼠標(biāo)移入移出的效果，從而改變sliderBar的left的值，達(dá)到滑動(dòng)的動(dòng)畫(huà)效果。其中，stop()方法是為了解決動(dòng)畫(huà)隊(duì)列的問(wèn)題。

以上就是我debug的過(guò)程，雖然浪費(fèi)了一些時(shí)間，但是好歹問(wèn)題解決了。如果你要問(wèn)我，你哪來(lái)那么大的勇氣，去死磕這個(gè)效果(bug)？我會(huì)告訴你，如果擱以前，我可能會(huì)在網(wǎng)上找個(gè)插件了事，因?yàn)樵谡劦絡(luò)avascript業(yè)務(wù)邏輯開(kāi)發(fā)這塊，我承認(rèn)還是有不小的差距。

但是，今年我開(kāi)始認(rèn)真的研究了紅皮書(shū)，也就是《JavaScript高級(jí)程序設(shè)計(jì)》這本被奉為經(jīng)典的JS書(shū)籍。在經(jīng)過(guò)不斷的拜讀和敲代碼，現(xiàn)在我對(duì)自己的原生JS這塊逐漸有了些許自信，明白了它的一些底層原理和概念設(shè)計(jì)。以前是只會(huì)照葫蘆畫(huà)瓢，現(xiàn)在也有了點(diǎn)知其然，更知其所以然的味道。

正是通過(guò)對(duì)基礎(chǔ)的夯實(shí)，我才有了莫名的勇氣去死磕這些開(kāi)發(fā)中遇到的各種疑難雜癥。

感謝老鐵們不厭其煩的看我debug思維重現(xiàn)到這里，其實(shí)，閏土也是想借著這個(gè)事兒想跟大家說(shuō)，前端基礎(chǔ)真的很重要，尤其是JS！如果你基礎(chǔ)不牢靠，一味的追逐熱門(mén)框架，看似解決了工作上的一些問(wèn)題。但回頭想想，你的這種技術(shù)邏輯還沒(méi)有形成自己的知識(shí)體系，它是松散的，是畸形的，是根基不牢靠的。學(xué)好基礎(chǔ)再去學(xué)框架，會(huì)事半功倍，游刃有余。如果基礎(chǔ)沒(méi)打好，不注重底層原理，你的前端路注定走不遠(yuǎn)。

因?yàn)榻鉀Q一個(gè)bug，浪費(fèi)了一些時(shí)間，看似得不償失，但是搞出來(lái)就算牛逼。最起碼等你以后當(dāng)老大了，別人問(wèn)你，你就知道怎么解決，自己踩過(guò)的坑，印象最深。而不是說(shuō)，以前有人幫我解決過(guò)，現(xiàn)在忘了。

所以說(shuō)，實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)。網(wǎng)上很多文章寫(xiě)的有好有壞，自己去動(dòng)手debug或者是實(shí)踐一下，得出自己的結(jié)論才是靠譜的。

后記

凌晨1點(diǎn)，夜已深，估計(jì)大家看到這篇文章的推送，已是明早上班趕路時(shí)。臨睡之前，閏土送大家一句話：別人也沒(méi)有多牛逼，你也可以在你的領(lǐng)域，開(kāi)辟天地。

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

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