資訊專欄INFORMATION COLUMN
摘要：緊接著就是導航欄的特效編寫，殊不知，就是這個效果，讓原本計劃上午完成的事情，愣是被我研究了大半天才解決。剛開始我的布局是，導航欄是一個，下面有八個，分別是八個欄目。
前言
今天這篇文章的標題，顯然是要搞事情。一個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
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89901.html
摘要：二面休息過后，就來了第二位面試官，面我運維的，運開嘛，如果沒有運維知識肯定是不行的。后來的對話中，面試官也表示，可能之前做的更多的是的工作，對于容器這塊不熟悉關系也不是很大。整個三面大概也持續了要有不到一個小時。 今天給大家分享我曾經在愛奇藝的面試，過程還是比較有意思的，可以給大家一些參考 聊騷階段 嗲妹妹：你好，我是愛奇藝的HR，我們正在招聘運維開發崗位，請問您最近有在看工作機會嗎...
摘要：張鑫旭老師的文章寫的很棒，解決了我的許多困惑。所以，基礎知識的牢固就顯得尤為重要是個不怎么聽話的孩子，總是會搞出一些奇奇怪怪的事情來張鑫旭老師十年磨一劍，鉆研的魔法，可見其中技術細節有多復雜。 ??從實習算起，到現在工作了也有一年半的時間了，在這期間，深深感受到了前端領域的飛速發展，在這里記錄一下自己的成長歷程，算是對知識的一個梳理，也希望幫助到剛入行的同學們。說來慚愧，大學里并沒有涉...
摘要：張鑫旭老師的文章寫的很棒，解決了我的許多困惑。所以，基礎知識的牢固就顯得尤為重要是個不怎么聽話的孩子，總是會搞出一些奇奇怪怪的事情來張鑫旭老師十年磨一劍，鉆研的魔法，可見其中技術細節有多復雜。 ??從實習算起，到現在工作了也有一年半的時間了，在這期間，深深感受到了前端領域的飛速發展，在這里記錄一下自己的成長歷程，算是對知識的一個梳理，也希望幫助到剛入行的同學們。說來慚愧，大學里并沒有涉...
摘要：網上有很多前端的學習路徑文章，大多是知識點羅列為主或是資料的匯總，數據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告，發送獲取資料，就能收到下載密碼，網盤地址在最下方，獲取教程和案例的資料。 前言 好的學習方法可以事半功倍，好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑，還要寫學習方法，還要發資料，干貨滿滿，準備接招。 網上有很多前端的學習路徑文章，大多是知...
摘要：書籍如下面向對象編程指南，風格輕松易懂，比較適合初學者，原型那塊兒講得透徹，種繼承方式呢。還有另一件事情是，比如發現自己某個知識點不太清楚，可以單獨去百度。 作者：小不了鏈接：https://zhuanlan.zhihu.com/p/...來源：知乎著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。 鑒于時不時，有同學私信問我（老姚，下同）怎么學前端的問題。這里統一回...
閱讀 2135·2021-10-14 09:43
閱讀 2197·2019-08-30 15:55
閱讀 726·2019-08-30 14:23
閱讀 2019·2019-08-30 13:21
閱讀 1235·2019-08-30 12:50
閱讀 2199·2019-08-29 18:46
閱讀 2280·2019-08-29 17:28
閱讀 2359·2019-08-29 17:21
