zoukankan      html  css  js  c++  java
  • 某易面试总结

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

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

    其实只是压根儿就没做面试的准备,因为对博主这种“技术爱好者”来说,某易的前端笔试题比某度变态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;660px;height:200px;text-overflow:ellipsis;">
            天地玄黄宇,宙洪荒日月。
        </div>
        <style>
            div{
                overflow:hidden;/*超出宽度的不可见*/
                white-space:nowrap; /*不换行(除非遇到"<br>")*/
                text-overflow:ellipsis;/*以“...”方式表示文本隐藏。。。。。博主当时很肯定地说用这就够了,完全把上面两行忘得干干净净*/
            } 
        </style>

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

       

    小时不识月,呼作白玉盘。又疑瑶台镜,飞在碧云端。
  • 相关阅读:
    Helvetic Coding Contest 2017 online mirror (teams allowed, unrated) J
    ROS_Kinetic_19 群机器人框架示例(micros swarm framework)
    ROS_Kinetic_18 使用V-Rep3.3.1和Matlab2015b(vrep_ros_bridge)续
    ROS_Kinetic_17 使用V-Rep3.3.1(vrep_ros_bridge)
    USB OTG原理+ ID 检测原理
    高通QSD MSM APQ区别
    qualcomm memory dump 抓取方法
    msm8974 camera driver添加新摄像头kernel hal修改
    现代控制理论-章节组织结构和仿真应用案例详细分析
    ROS_Kinetic_16 ubuntu中安装使用Matlab和ROS
  • 原文地址:https://www.cnblogs.com/bydclouds/p/3991571.html
Copyright © 2011-2022 走看看