【哈希】我的一次面试经历 - 51Testing软件测试论坛

说起第一次失败的面试经历，是在我13年刚刚毕业的时候。那时我正在海投简历，认真找工作。当初应聘的是一家规模不算大的小公司，进去之后，面试官看都没看我一眼，给我丢下一句话就忙他的去了。

他原话的意思是说，让我用jQuery写个轮播图效果，给我提供的条件是，一台没有联网的笔记本电脑，和本地下载好的jQuery的API文档。

当时刚从培训班学出来的我，html和css基础还算扎实，但对jquery的api熟练程度还是有所欠缺的。因为之前在培训班学习切静态页面的时候，碰到轮播图效果一般都会用网上别人写好的插件。但我还是硬着头皮去尝试着写了写。

过了几分钟后，我静态页面的布局写出来了，但是jquery的轮播效果还是没整出来。当时的我，知道通过的胜算几乎为零，但还是尽力争取了一下，跟面试官说，我U盘里有我自己的作品，你要不要看一下。面试官此时还是目不转睛的盯着他的笔记本屏幕，边看边说，你自己带来的作品，是不是自己写的也不一定，面试题最能说明问题等，听他巴拉巴拉说了一堆。

回去之后，我便开始研究，如何用jquery去实现轮播图的效果。在这里，我简单地说下，当时很多购物网站（比如说淘宝京东）都会添加商品的图片轮播效果。轮播图作为一个公司首页最重要的推广方式，由于其相对于静态页面的动态滚动，使其更容易吸引客户的眼球。

现在想想，轮播图的原理其实十分简单。它是利用人眼的视觉差，通过移动每张图片的left值，产生一种动态滚动的效果。废话不多讲，直接上代码：

在这里，节点的构建其实没什么好讲的，CSS样式也很简单，这里就不贴出代码了。简单说下，每个li下图片的显示与隐藏，都是通过它的display属性来设定。左右切换则是采用图片li浮动，父层元素ul的宽度为总图片宽度（也就是li 的宽度乘以li的个数），ui相对外层父元素绝对定位，并设定为超出的部分要隐藏。然后当想切换到某个index 的图片时，则采用修改ul的left值来实现。比如显示第一张图片初始定位left值为0，要想显示第二张图则将left值修改为-400px即可。

在这段代码中，我们先是用变量存储了当前索引值和图片总数，然后定义了一个定时器seInterval函数，里面的逻辑是，如果当前index值小于图片总数减一，就让它自增++；如果大于的话，就让当前index值初始化为0。

然后为左右箭头添加了hover和click事件，在这里调用了两个函数，一个是重置定时器函数autoChangeAgain()，一个是图片切换处理函数changeTo()。当点击左右箭头或者是自动轮播的时候，我们都会调用animate()函数，通过修改left 值产生动态滚动的效果。最后就是给li控制按钮（小圆点或者是小长条）绑定事件处理函数，当鼠标移入清除定时器，反之则启动定时器。

大概的原理便是如此，所以说，轮播图最简单也最困难，图要张张轮着播，还要丝滑无缝隙。自此，我才明白了，面试官为何会让应聘者二话不说，先来写一个轮播图效果，因为麻雀虽小，五脏俱全，这里面涉及到了很多知识点，如果你能写出来，证明你对JQ的API的熟练程度还是可以的，而且也有一定的逻辑性。起码从侧面反映出，你是一个合格的初级前端攻城狮。

我的第二段失败的面试经历，说起来也挺巧，还是跟JS轮播图有关。不过这次换成了用原生JavaScript来编写。照样，我还是因为没有写出来而被pass掉了。后来想想，其实，逻辑和JQ是一样的，只不过是换成了JS。还是先直接贴出代码：

看看这JS的代码量，还是有些冗杂，不过思路还是模仿JQ的实现思路。换汤不换药，代码里备注已经很详细了，这里就不一一阐述了。

很显然，这次面试的难度已经提升了一个台阶，考察的是面试者对原生JS的熟练程度，以及逻辑性。相对的，这次的面试岗位的薪水也是相对要高点。如果这个能写出来的话，我觉得你的JS正在进阶，而你也正在进阶为一个专业的JSer。此时，距离中级前端攻城狮就不远了。