某易面试总结
2014-09-24 21:18
148 查看
今天参加了某易的前端开发工程师一面。
算是离“前端”这两个字又近了一步吧——好吧，虽然我一面就跪了。
其实只是压根儿就没做面试的准备，因为对博主这种“技术爱好者”来说，某易的前端笔试题比某度变态N倍（仔细想想其实还是某度的笔试比较有质量），前22道选择基本靠蒙，最后居然接到面试通知了。
面试问了很多基本的问题。直到面试结束，博主才发现自己为自己挖了无数的坑。唉，都是泪。
初次面试的压力之下，面试有一些基本的问题没有被我解决或者答错了，主要有三个：
1、10个<li>，点击任意一个后打印出点击的<li>的index；
so easy，果断用了aLi[i].index = i的方法。面试官复又问道闭包如何实现。压力之下，博主竟然木有答粗来！！！现在再想想，真是自杀的心都有了！！！
（回来之后想到的两种方法如下：）
2、还有一个木有答好的问题是CSS实现首尾高度固定、中间高度自适应的DIV布局，最后百度了一番，看到了这篇文章：/article/5627162.html 问题基本被解决了。只能怪自己基础不牢。且贴代码如下（代码基本参考前引文章，感谢作者解惑，重点有二：其一是absolute定位的div的宽高可以由设置top、right、bottom、left等属性来控制，如此一来自适应的问题得到解决；其二是IE6特殊的盒模型（width、height将border包含在内），所以用一个css hack将其上下border设置为负数，高度设为百分之百）：
3、一个基础问题。且mark之。
最后，以一句诗结束博主失败的面试：我本将心向明月，奈何明月照沟渠。
算是离“前端”这两个字又近了一步吧——好吧，虽然我一面就跪了。
其实只是压根儿就没做面试的准备，因为对博主这种“技术爱好者”来说，某易的前端笔试题比某度变态N倍（仔细想想其实还是某度的笔试比较有质量），前22道选择基本靠蒙，最后居然接到面试通知了。
面试问了很多基本的问题。直到面试结束，博主才发现自己为自己挖了无数的坑。唉，都是泪。
初次面试的压力之下，面试有一些基本的问题没有被我解决或者答错了，主要有三个：
1、10个<li>，点击任意一个后打印出点击的<li>的index；
so easy，果断用了aLi[i].index = i的方法。面试官复又问道闭包如何实现。压力之下，博主竟然木有答粗来！！！现在再想想，真是自杀的心都有了！！！
（回来之后想到的两种方法如下：）
<script>
var oUl = document.getElementsByTagName("ul")[0];
var aLi = oUl.children;
//常规方法
for(var i=0; i<aLi.length; i++){
aLi[i].index = i;
aLi[i].onclick = function(){
console.log(this.index);
};
}
//方法1
for(var i=0; i<aLi.length; i++){
(function (idx){
aLi[idx].onclick = function(){
console.log(idx);
};
})(i);
}
//方法2
for(var i=0; i<aLi.length; i++){
aLi[i].onclick = function(){
var j = i;
return function(){
console.log(j);
};
}();
}
</script>2、还有一个木有答好的问题是CSS实现首尾高度固定、中间高度自适应的DIV布局，最后百度了一番，看到了这篇文章：/article/5627162.html 问题基本被解决了。只能怪自己基础不牢。且贴代码如下（代码基本参考前引文章，感谢作者解惑，重点有二：其一是absolute定位的div的宽高可以由设置top、right、bottom、left等属性来控制，如此一来自适应的问题得到解决；其二是IE6特殊的盒模型（width、height将border包含在内），所以用一个css hack将其上下border设置为负数，高度设为百分之百）：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div class="con">
<div class="top"></div>
<div class="md"></div>
<div class="bottom"></div>
</div>
<style>
*{margin:0; padding:0;}
html,body,.con{height:100%;width:100%;height:100%;width:100%;}
div{position:absolute;}
.top,.bottom{width:100%;height:100px;z-index:5;}
.top{background:red;top:0;}
.bottom{background:black;bottom:0;}
.md{
width:100%;
background:#a7fad7;
overflow:auto;
top:100px;
bottom:100px;
position:absolute;
_height:100%;
_border-top:-100px solid #eee;
_border-bottom:-100px solid #eee;
_top:0;/*/article/5627162.html*/
}
</style>
</body>
</html>3、一个基础问题。且mark之。
<div style="font:100px/200px Microsoft Yahei;width:660px;height:200px;text-overflow:ellipsis;">
天地玄黄宇,宙洪荒日月。
</div>
<style>
div{
overflow:hidden;/*超出宽度的不可见*/
white-space:nowrap; /*不换行（除非遇到"<br>"）*/
text-overflow:ellipsis;/*以“...”方式表示文本隐藏。。。。。博主当时很肯定地说用这就够了，完全把上面两行忘得干干净净*/
}
</style>最后，以一句诗结束博主失败的面试：我本将心向明月，奈何明月照沟渠。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐