微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

2015阿里巴巴前端实习生在线笔试考后总结

2015-05-11 20:03 前端大全
(点击 上方蓝字 ,可快速关注我们)

写在前面


还是太年轻,第一次在线笔试有些紧张了


一、2015题目


我遇到的题目:6个选择其中3个多选,1个填空,6个大题。客服姐姐说题目是随机给的(因为给了一个时段考试,而不是统一时间点开考),不过题型应该是固定的。


1.单选:一个数组,两个引用,相互赋值,问输出眩晕抗性-30%


2.单选:问一个return匿名函数的函数的执行结果,内部还有apply眩晕抗性再-69%


3.单选:问字符串替换结果是什么,当然,又是套了几层,绕了几圈眩晕抗性再-1%,嗯,做完这道给彻底绕晕了


4.多选:移动端,如果A按钮上覆盖了一个B按钮,给B按钮的touchstart事件处理器中添加什么处理能让A触发click


按钮被挡住了,要想恢复交互性,隐藏遮挡物就好了,只敢选了visible一个,因为不确定题目是不是要在本次交互中触发click,不清楚display:none和从DOM中删除会不会影响冒泡,没敢选经过测试,发现本题根本不存在冒泡(好吧,当时可能没睡醒),顺便再测试了一下有冒泡的情况,发现不影响冒泡,即便remove掉了,还是会冒泡


测试代码如下:


<!--

<div id="div1" class="div"></div>

<div id="div2" class="div"></div>

-->


<div id="div1" class="div">

<div id="div2" class="div"></div>

</div>


<style>

.div{

width:50px;

height:50px;

position:absolute;

top:0;

left:0;

}

#div1{

background-color:red;

}

#div2{

background-color:green;

}

</style>

<script>

var div1 = document.getElementById('div1');

var div2 = document.getElementById('div2');

div1.onclick = function(){

alert('红色');

}

div2.onclick = function(){

alert('绿色');


//this.style.display = 'none';//本次交互中不会触发红色,下次交互会触发,会冒泡

//this.style.visibility = 'hidden';//同上

//this.parentNode.removeChild(this);//同上

}

</script>


5.多选:前端优化,下列哪一个可以减少HTTP请求数最近正在翻译Yahoo!的30几条前端优化原则,压力不大


6.多选:题目忘记了记得除了前端优化的,其它两道都没有绝对把握


7.填空:个人博客地址想了下填了cnblogs,因为个人网站做得还不完善,拿不出手


8.大题:生成10个10-100之间的随机数,并降序排列隐约记得书上说Math.random返回(0, 1]值


查证之后发现JS高程中文版135页说(0, 1),而网上的普遍说法是[0, 1),后一种就和C里面的一样。以前看书记得js的随机数和C的不一样。经过测试发现书上是错的,确实含0不含1。总结如下:


1.获取[a, b]:Math.round(Math.random()*(b-a)+a)//四舍五入


2.获取(a, b]:Math.ceil(Math.random()*(b-a)+a)//向上取整(天花板)


3.获取[a, b):Math.floor(Math.random()*(b-a)+a)//向下取整(地板


4.获取(a, b):好奇怪的需求,不如直接用第一种吧


测试random范围的代码如下:

var x = parseInt((Math.random()*90+10 + '').split('.')[0]);//取整数部分

9.大题:实现IOS风格的switch按钮,要求用多种方式实现花了太多时间,“实现”是要用嘴实现还是用代码?用代码写了个小实现,七八分钟就过去了,划不来


10.大题:给String添加原型方法,实现简单的模版替换考原型和正则表达式,不会在原型方法中获取字符串的值,书中说一般不要给原型加自定义属性,会污染环境,就没太在意这方面,只注重了去理解原型,构造函数,作用域链的本质及其关系,结果。。


查了一下,发现this就是原字符串的值,阿席巴思密达~~~代码如下:


function strcat(str){

return this + str;

}


String.prototype.strcat = strcat;

alert('xi'.strcat(' ba'));


11.大题:如何在画布上画出任意多个边界不相交的圆,考虑时间和空间的平衡后半句感觉是要写代码,前半句又不像,最后没时间了,就卖了个萌——“最简单的方法是画同心圆”,好吧,希望能让改卷的大大心情愉快


12.大题:实现loadScript(url, callback)异步加载脚本,完成之后执行回调函数,要求支持IE非要支持IE吗,时间不够了,只好写出步骤注释


整理的代码库里收藏了xhr,如下:


/*获取HttpRequest对象,可以兼容各个浏览器 包括IE5.5+*/

function getHttpObject(){

if(typeof XMLHttpRequest == "undefined"){//如果该对象未定义,则自定义该对象

XMLHttpRequest = function(){

try{

return new ActiveXObject("Msxml2.XMLHTTP.6.0");

}catch(e){}

try{

return new ActiveXObject("Msxml2.XMLHTTP.3.0");

}catch(e){}

try{

return new ActiveXObject("Msxml2.XMLHTTP");

}catch(e){}

try{//老版本的 Internet Explorer (IE5 和 IE6)

return new ActiveXObject("Microsoft.XMLHTTP");

}catch(e){}

return false;

}

}


return new XMLHttpRequest();

}


var xhr = getHttpObject();

xhr.onreadystatechange = function(){

if(xhr.readyState === 4){

if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){

//执行callback

}

else{

//请求失败

}

}

}

xhr.open('get', url, true);//准备异步请求,get是为了响应速度

xhr.send(null);//发送请求,null是为了兼容性


在线笔试让人写这种东西真的好吗?


根据园友@李明夕和@老楼在评论中的分析,我应该是理解错题意了,不过没关系,代码如下:


<div id="div">白色变红色</div>

<script>

var script = document.createElement('script');

var callback = function(){

$('#div').css('color', 'red');//用刚刚加载好的jquery修改样式

}


if('onload' in script){

script.onload = function(){

alert('ok');

callback();

}

}

else{

script.onreadystatechange = function(){

if(this.readyState === 'loaded' || this.readyState === 'complete'){

alert('ok');

callback();

}

else{

alert('ERROR!!');

}

}

}


script.async = 'async';

//script.src = 'test.js';

script.src = 'http://ayqy.net/script/jquery.min.js';//加载远程资源更容易测试异步

document.body.appendChild(script);

</script>

<script>

alert('suppose to see this first');

</script>


用script标签动态加载(并执行)脚本需要注意以下几点问题:


1.IE8-支持readystatechange和async;Chrome和FF不支持readystatechange,支持load,支持async;IE9/10、Opera同时支持readystatechange,load和async


2.虽然readystatechange是HTML5事件,不过FF和Chrome至今都没有实现它


3.诡异的是IE6先ok再向下执行再ok再ERROR,IE7/8先ERROR再向下执行再ok,IE9+未知。而FF和Chrome正常,先向下执行,再ok。


4.需要注意IE9/10和Opera两者都支持的,所以不要用类似于elem.onload=elem.onreadystatechange=handler;的代码,因为在IE9/10和Opera中会触发多次,本来onload里面并没有各个状态值(都是undefined),不会触发多次,但IE的实现很诡异,所以,有风险


5.为了避免IE中多次触发回调函数,应该在ok之后移除onreadystatechange事件处理器,保证只触发一次


13.大题:实现JQuery中的html方法看时间紧迫,过于紧张了,看到题目的时候眼睛罗圈了,理解成了实现JQuery中把字符串转HTML元素的方法,过于复杂,简单的写了思路。交了卷才发现看错题了。。。


JQuery中还有比html方法更容易实现的吗?代码如下:


function html(elem){

return elem.innerHTML;

}

//此处没有完全实现,因为JQ的html方法有三种形式:html(), html(str), html(fun),分别用来获取/设置/用函数设置innerHTML


查看了JQuery内部,发现差不多就是这样实现的,效果一样,测试代码如下:


var $div = $('#div');

alert($div.html());

alert($div[0].innerHTML);


//在IE中标签都是大写的,其它浏览器中是小写


二.是好是坏,都是一场旅行


被KO是因为自己积累不够,比如,如果读过JQuery源码,Ajax就能轻松拿下;如果心态平和,认真读题,最后一题也能瞬间搞定。。。


在线笔试最大的特点是很难集中精力,网页很容易分散你的注意力,稍微发会儿呆,几分钟就没了


总结一下这次笔试的失败点:


1.时间安排不合理。中间的小题浪费了太多时间


2.心里素质不够。过于紧张,好吧,可能是因为高考过去很久了,和考试不熟了


3.基本功不够扎实。比如原型,学习的时候太偏重理论了,忽略了这样简单实际的问题


4.答题顺序不对。先给代码执行结果的题目绕晕了,这种东西绝对不能先答


5.没洗脸就开始答题了。昨晚和朋友聊到很晚才睡,自作孽。。


阿里走远了,那我的收获呢?


1.参加了生平第一次在线笔试


2.发现了自身知识网络的漏洞(对理论烂熟,却不知道this就是字符串的值)


3.更清楚地认识了自我,套用前辈的一句话:虽然自认为比身边的人要强一点,但离阿里需要的实习生还是有一段距离的。。


题目难吗?


说实话不难,除了画圆和xhr的题目,其它的应该没什么难点。做的这么差的原因有很多,不单单是没有经验这一条可以搪塞过去的,一句话:底子还是太薄。


后话


计划3,4月份找实习,结束之后继续潜心积攒经验。考完郁闷一会会儿就好了,怪不了别人。没关系,Tencent我正在来~



来自:梦烬 - 博客园

链接:http://www.cnblogs.com/ayqy/p/4384534.html




前端大全』分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯,相关职位。欢迎关注。


微信号:FrontDev

(长按上图,弹出“识别二维码”后可快速关注)




 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 活动 | 评论征集令 紧急迫降,南航机长为何还能如此淡定? 【干货】PHP 代码规范简洁之道 Android单元测试(五):依赖注入,将mock方便的用起来 【经验总结】网易产品面试总结