首先在文章之前,我要好好地吐槽一下当下很多人的学习方法。就拿我们实验室的人来说吧。不少人自称是搞前端的,随随便便让他们写个slider,都能用JQuery很快实现。他们意识里的前端就以为是精通JQuery,精通Bootstrap。当然,你如果是真的“精通”了,那么你也很厉害。但是如果你没有研究过JQuery和Bootstrap的源码的话。千万不要在我面前说精通。我会很鄙视你的。可是呢,如果让这些人用纯JS去实现一个slider,他们居然就愣了。硬着头皮写出来的也是各种BUG。大哥,要是前端都是随随便便的“HTML+CSS+JS的表单验证”(我舍友不经大脑思考就是这么认为的),那前端工程师早就绝种了。
好了,进入正题。也许实现一个slider挺简单的。但是首先你要确定你自己有一定的功底。像我这种功底不扎实的孩纸,写个slider会遇到不少坑。
其实我写过不少slider。GITHUB上也有一个slider的插件。算是效果挺多的。但是其实现在看来写得挺烂的。要是迟点去面试被面试官看到,我的脸都不知道往哪儿搁了。
总结一下,写slider一般会遇到的坑吧:
1. 布局定位——这从来都是第一个坎儿。如果你要做兼容,那么这个坑会更大。所以说前端不好混啊。
2. 逻辑思维——相信我,首先你就要头脑清醒,否则很快你就会绕晕了。
3. JS作用域及闭包——不用质疑,你肯定会遇到闭包和作用域的问题。
4. 代码的异步执行带来的队列阻塞——也许你不懂,除非你思维敏捷,否则这个坑多多少少都会碰到,这牵涉到setTimeout和setInterval两个函数。
5. JS浮点数运算误差——这个坑我遇到过,其他人我就不敢肯定你会遇到,毕竟这个是和各人的代码实现有关。
6. 元素位置和尺寸获取及兼容性问题——如果你需要做兼容,肯定逃不掉
看吧,就一小小的slider就有如此多的坑。只有你真的落实去做了,你可能才会有所感触,否则你只会当我在吹水而已。当然,slider的坑还远不止这些。如果你要再深入的话,还会遇到包括性能以及可维护性等问题。
在这里,我想只针对第四个坑来解释一下。因为这个坑是坑了我最久的一个坑了。我是看了别人的一些成熟的slider后才找到解决方案的。
稍微熟悉JS的人可能知道,setTimeout和setInterval是通过计算时间然后采用向代码执行队列中插入代码的形式实现的。也就是说,如果代码队列前的代码执行时间超过了你设置的间隔时间,那么setTimeout和setInterval是不能预期执行的,而这就是我说的队列阻塞。而此时你需要一个合理的条件判断来跳出循环。否则代码队列会因为setTimeout和setInterval的滞后而无限叠加。
看懵了吧?我来举个例子:
var a = setInterval(function() {
// some code
// 不考虑兼容问题
arr[next].style.left = arr[next].offsetLeft - 20 + 'px';
if(arr[next].offsetLeft <=0 ) {
clearInterval(a);
cur = next;
next += 1;
}
}, 3000);
这段代码看似可能没有问题,但是如果setInterval事件叠加在代码队列中超过一定数量之后,我们手动更改了next的值,导致对象由arr[next]变为arr[next+1],那么这个Inertval很可能还会继续执行下去,因为arr[next+1]对象的offsetLeft可能是大于 0 的。
好吧,可能大家会看不懂我的意思。我也觉得这个坑要形容起来挺困难的。总之大家想去了解的话,自己动手试一试就知道了。