一个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点,夜已深,估计大家看到这篇文章的推送,已是明早上班赶路时。临睡之前,闰土送大家一句话:别人也没有多牛逼,你也可以在你的领域,开辟天地。

本文分享自微信公众号 - 闰土大叔(running_hacker)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-11-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黑泽君的专栏

去除高清视频锯齿几个方法

  在使用DV拍摄制作视频时,经常被网友问到一个问题——为什么我拍出的视频在电脑上播放时会出现锯齿现象?有人认识是电脑配置太低,有人认为是摄像机出了故障,有人认...

3K30
来自专栏前端黑板报

适配iPhone X 的齐刘海

当苹果宣布发布他们的旗舰手机-- iPhone X 的时候,他们允诺将为未来移动设备设定新的标准。我们决定需要了解一些内容。 “屏幕再也不必是方...

26990
来自专栏BestSDK

教你做出一款清丽脱俗的Ui图标

视觉内容的重要性 随着移动互联网的高速发展,人们往往被各类各样的信息与数量庞大的内容所淹没。因此,人们的注意力也变得极难捕捉起来,但是可以确认的是,视觉内容广告...

35650
来自专栏数据小魔方

文字云,没你想的那么高大上!!!

今天给大家聊聊文字云 文字云是手机新品发布会PPT御用技巧 无论是卖产品的 还是卖情怀的 都是段子手 一个比一个bigger高 让我们来看看 那些高逼格的人 ...

75270
来自专栏阮一峰的网络日志

排版六原则

几天后,就收到了秋叶老师的来信,希望与我探讨一些设计问题。他写过一本畅销书《说服力-让你的PPT会说话》,眼下正在写续集。

11520
来自专栏韩东吉的Unity杂货铺

零基础入门 44:使用图片字体第一步,制作字体

Hello,大家好,我是Jimin韩东吉,今天要给大家分享的是关于如何在项目中使用图片字体。

11660
来自专栏钱塘大数据

【人工智能冲顶大会】AI学渣-学者-学霸-学神,测测你是哪个段位?

点击下方空白区域查看答案 ▼ 点击下方空白区域查看答案! ▼ 」 ---- 点击下方空白区域查看答案! ▼ 点击下方空白区域查看答案! ▼ ---- 点击下方空...

411110
来自专栏九彩拼盘的叨叨叨

活动#1 秀出你的前端技能吧

我们会选出2位获奖者。1位是前端技能文章获得喜欢数最多的。另1位是前端管理小组选出写的最用心的。

10810
来自专栏企鹅号快讯

web前端开发工程师养成记

前端开发工程师 不仅要把握根本的Web前端开发技术,网站功能优化、SEO和服务器端的根底常识,并且要学会运用各种东西进行辅佐开发以及理论层面的常识,包含代码的可...

46150
来自专栏九彩拼盘的叨叨叨

前端学习

前端主要包括 HTML,CSS,JavaScript。开始的时候,可以看熟悉下基本概念

11040

扫码关注云+社区

领取腾讯云代金券