2018年春季阿里前端工程师实习岗在线测评编程题总结

来源：互联网发布：fm2016数据库编辑器编辑：程序博客网时间：2024/04/28 22:40

2018年春季阿里前端工程师实习岗在线测评编程题总结

小博主于昨天（2017-03-18）早上大概9点的时候在线测评了阿里2018年春季校园招聘前端工程师实习岗位的编程题目。算是小博主的第一次比较正式的在线编程了（把第一次给了她，哈），而且在这30min的时间内，有很多的感谢也想和大家分享下，所以今天写下这个小博客，多多交流。

首先，大家很关注的应该就是考了什么题吧^^

没错，就是考了js的简单运用。下面是简单的题目要求介绍，具体的记不清楚了（居然忘了截屏！！）。

在下面的样式中，当鼠标滚动的时候，box1以鼠标滚动2倍的速度运动，box2以鼠标滚动3倍的速度运动。大致效果如下图。

原始代码是这样的

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body style="height: 5000px" id="wrapper">    <div style=" width: 300px; height: 100px; background:#000;" id="box1"></div>    <div style=" width: 300px; height: 100px; background:red;" id="box2"></div>    <script>        //这里是答题区    </script></body></html>

然后直接在她测试的页面阿里写js，当然，可使用本地IDE编程工具。所以当时我用了自己最熟悉的Sumline和谷歌来编程和测试。

接下来就是在这30min内的事咯

前5,6分钟把关键要用到的技术简单地设计了下和在网上搜索下看没有类似的功能，发现资料实现太少了。但是还是找到了个比较正式的监听鼠标滚动的方式。就是注册一个事件来监听，而且兼容IE和W3标准，因为和自己想的方式基本一样，所以二话不说就直接用了。（到这大概花了10min）

接下来就是设计和写监听执行的事件了。刚开始什么也没想，先用原生js获取了box1和box2的DOM对象，再获取了浏览器滚动的高度，再用console.log（e）来仔细看看监听事件都传了什么参数过来，发现除了滚动的距离，其他的参数对象基本没什么用。好吧，距离留距离吧，先让他动起来再来自己调调（这可能是受之前项目的影响，用效果来修改代码），然后就陷入了让他动起来的坑。（到这大概花了20min）

动起来，当时第一感就是用css3的animation，但是那些兼容性和规则那些要写很多呀！然后看了下题目，没有要求说不能用库，所以直接用了百度的Jquery CDN。就这样，成功用了Jquery里面的animation方法（到这大概用了25min了）

动起来之后呢？鼠标滚动的速度怎么获得？这才是关键。当时大致地想了下，肯定是要在animation那里传入移动的位置和时间的参数，而且得让他悬浮起来。所以直接穿了个动态的top参数进去，速度实在没办法解决！所以直接打算至直接按滚动距离比来模拟速度的快慢，但是由于时间快到了，所以直接弄了个变量进去。就这样滚动鼠标那两box1 and box2就跟着滚动，当时写的效果大致是这样了。（到这大概用了28min了）

看了下时间，还剩一两分钟！不能再纠结代码了。所以整理了下代码的格式，在注释那里添上了自己的思路和步骤（PS：经管有很多功能没有实现，但是把思路写下来，应该印象会好点吧^^）。就这样，把代码复制到答题区，看了下时间，还剩几秒，赶紧点保存和交卷。就这样，感觉这30min过得最快了。。。

不放弃的我^^

虽然这30min做得啧啧，但是还是很想去实现下这个效果来证明下自己。所以，在下午好好设计了他的实现的过程。其中也发现很多难点也来和大家分享下。
贴上关键的代码

     window.onload=function(){         // 初始化        var Y = document.body.scrollTop;        // 动态加入style        var newstyle = document.createElement("style");        // console.log(newstyle);        newstyle.setAttribute("id", "addStyle");        // document.body.appendChild(newstyle);        // console.log(document.getElementsByTagName('head'));        document.getElementsByTagName('head')[0].appendChild(newstyle);        document.getElementById('box1').style.position="fixed";        document.getElementById('box2').style.position="fixed";        document.getElementById('box2').style.top="50px";        var preY = 0;        // console.log(Y);        // 定义速度初始值        var speed = 100;        var scrollFunc=function(e){            'use strict';            e=e || window.event;            // console.log(e);            // 清空动画            document.getElementById('box1').style.animation="";            document.getElementById('box2').style.animation="";            // 定义本次滚动的距离，判断是上下滚动            var distance = e.deltaY;            // 用滚动距离来比拟速度            var speed2 = distance/speed;            // 或者当前滚动的高度            var curY = document.body.scrollTop;            var newStyle2 = document.getElementById('addStyle');            // 向上滚动            if (distance > 0) {                // console.log("向下滚动");                // 传入动态滚动距离                newStyle2.innerHTML = '@-webkit-keyframes toDown{0%   {top:0px;}50%   {top:'+distance+'px;}100% {top:0px;}}\n'+ '@keyframes toDown {0%   {top:0px;}50%   {top:'+distance+'px;}100% {top:0px;}}\n'+'@-webkit-keyframes toDown2{0%   {top:50px;}50%   {top:'+2*distance+'px;}100% {top:50px;}}\n'+ '@keyframes toDown2 {0%   {top:50px;}50%   {top:'+2*distance+'px;}100% {top:50px;}}\n';                document.getElementById('box1').style.animation="toDown "+speed2/2+"s";                document.getElementById('box2').style.animation="toDown2 "+speed2/3+"s";            // 向下滚动            }else{                // console.log("向上滚动");                // 传入动态滚动距离                newStyle2.innerHTML = '@-webkit-keyframes toDown{0%   {top:0px;}50%   {top:'+(-distance)+'px;}100% {top:0px;}}\n'+ '@keyframes toDown {0%   {top:0px;}50%   {top:'+(-distance)+'px;}100% {top:0px;}}\n'+'@-webkit-keyframes toDown2{0%   {top:50px;}50%   {top:'+2*(-distance)+'px;}100% {top:50px;}}\n'+ '@keyframes toDown2 {0%   {top:50px;}50%   {top:'+2*(-distance)+'px;}100% {top:50px;}}\n';                document.getElementById('box1').style.animation="toDown "+(-speed2/2)+"s";                ;                document.getElementById('box2').style.animation="toDown2 "+(-speed2/3)+"s";                ;            }        }        // 注册监听鼠标滚动事件        if(document.addEventListener){            document.addEventListener('DOMMouseScroll',scrollFunc,false);        }//W3C        //IE/Opera/Chrome        window.onmousewheel=document.onmousewheel=scrollFunc;    }

效果大致就是下面这样

这里还有很多需要完善，例如：

监听鼠标滚动事件会有问题，就是滚动一次会两次调用方法。
每次滚动的距离基本都是固定的？那怎样去比拟速度的快慢？一开始想到的是用滚动开始、滚动过程中和滚动结束这三个机制，用滚动的总距离来比拟速度的。但时搜了下资料好像没有发现。难道只有touch才有ontouchstart,ontouch,ontouchend三事件机制？这里直接用的是每次滚动的距离来比拟速度的快慢。再动态传入滚动的高度作为两div移动的距离。但速度还是很不明显。希望大家有更好的办法分享下^^

反思和总结

受中国式教育太深，每每到考试都会有些紧张。发挥确实不好。
很关键的是自己没有在知道要实现的效果后好好设计下整个架构，至少也应该弄个流程图来，把核心的代码简单写下（平时都有这习惯，这30min不知道想哪里去了）
当然，最关键的还是自己的阅历太少了，前端技术的基础知识也很差，很多方法内置的参数都不了解
做完这题真的有点思考人生了！以前做项目或者解决问题的思维可能不太适合。所以，虽然做的很糟，但是还是很有意义。至少知道自己哪里需要进步!^^
好吧，就写这么多先。等遇到类似的案例再仔细想想这个。^^

14 0