某易面试总结

今天参加了某易的前端开发工程师一面。

算是离“前端”这两个字又近了一步吧——好吧，虽然我一面就跪了。

其实只是压根儿就没做面试的准备，因为对博主这种“技术爱好者”来说，某易的前端笔试题比某度变态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布局，最后百度了一番，看到了这篇文章：http://www.cnblogs.com/ckmouse/archive/2012/02/14/2351043.html  问题基本被解决了。只能怪自己基础不牢。且贴代码如下（代码基本参考前引文章，感谢作者解惑，重点有二：其一是absolute定位的div的宽高可以由设置top、right、bottom、left等属性来控制，如此一来自适应的问题得到解决；其二是IE6特殊的盒模型（width、height将border包含在内），所以用一个css hack将其上下border设置为负数，高度设为百分之百）：

 1 <!doctype html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Document</title>
 6 </head>
 7 <body>
 8     <div class="con">
 9         <div class="top"></div>
10         <div class="md"></div>
11         <div class="bottom"></div>
12     </div>
13     
14     <style>
15         *{margin:0; padding:0;}
16         html,body,.con{height:100%;width:100%;height:100%;width:100%;}            
17         div{position:absolute;}
18         .top,.bottom{width:100%;height:100px;z-index:5;}
19         .top{background:red;top:0;}
20         .bottom{background:black;bottom:0;}
21         .md{
22              width:100%;
23              background:#a7fad7;
24              overflow:auto;
25              top:100px;
26              bottom:100px;
27              position:absolute;
28              _height:100%;
29              _border-top:-100px solid #eee;
30              _border-bottom:-100px solid #eee;
31              _top:0;/*http://www.cnblogs.com/ckmouse/archive/2012/02/14/2351043.html*/
32         }
33     </style>
34 </body>
35 </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>

 

最后，以一句诗结束博主失败的面试：我本将心向明月，奈何明月照沟渠。

   

 

posted @ 2014-09-24 21:18  文蔺  阅读(809)  评论(5)  编辑  收藏  举报