码迷,mamicode.com
首页 > 其他好文 > 详细

阿里、百度校招面经

时间:2015-09-29 16:20:07      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

转自:

http://utopiascript.github.io/2015/08/18/undefined/%E9%98%BF%E9%87%8C%E3%80%81%E7%99%BE%E5%BA%A6%E6%A0%A1%E6%8B%9B%E9%9D%A2%E7%BB%8F/Blog/

重要的总结写在前面:

  • 准备好一个项目经历,深入总结。

  • 所有的面试题都有过程分,比如:
    “http协议中302这个状态码是什么?”,“我不记得了。”
    “http协议中302这个状态码是什么?”,“哦,记不清了,我只记得404是找不到页面,3xx是重定向,5xx是服务端错误。”

  • 不会的问题千万别瞎猜。
    “http协议中302这个状态码是什么?”,“啊,那个,应该是服务端错误吧?”

我问过阿里二面的面试官 “为什么有些问题与一面是一样的?”,“每个面试官都是根据答题情况现场准备问题的。”

  • 问题只是话题的起点。所以精心准备的答案可能在面试官的一次追问后全盘崩溃,一开始支支吾吾的面试者,也可能在面试官逐渐的引导下展示出自己的能力。

  • 遇到的面试官都是好人,不用紧张。


阿里巴巴

一面

提前预约好的,电话面试在线编程(1hour)

CSS三列布局,水平方向平均分配,垂直高度占满屏幕

解决方案好多种,当时想到的:使用百分制单位;flex布局;

setTimeout、作用域、this结合的一道题

关键点:setTimeout中的this在非严格模式下指向window对象

图片懒加载

<ul>
    <li><img data-src="http://www.taobao.com/img/a.jpg" /></li>
    <li><img data-src="http://www.taobao.com/img/b.jpg" /></li>
    <li><img data-src="http://www.taobao.com/img/c.jpg" /></li>
    <li><img data-src="http://www.taobao.com/img/d.jpg" /></li>
    <li><img data-src="http://www.taobao.com/img/e.jpg" /></li>
</ul>

当时只写了个大概思路

window.onscroll=function(){
    var seeHeight = document.documentElement.clientHeight;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var img = document.getElementsByTagName("img");
    for(var i=0, imgNum=img.length; i<imgNum; i++){
        if(img[i].offsetTop < seeHeight + scrollTop){
            if(img[i].src === ""){
                img[i].src = img[i].getAttribute("data-src");
            }
        }
    }
}

其他琐碎问题已经记不得了

二面

提前预约好的,电话面试在线编程(1hour)

现有一个Form表单如下,需要使用Javascript提取所表中所有的字段及值

<form >
     <label>A</label>
     <input name=”a” type=”number”>
     <input name=”b” type=“text” value=”1”>
     <textarea name=”description”></textarea>
</form>

如输出:{ a: 0 , b : “1” }

function getFormValue(){
    var form = document.getElementsByTagName(“form”)[0];
    var input = document.getElementsByTagName(“input”);    

    // 使用querySelectorAll 改一下
    //var form=querySelector(“form.class”);
    //var input=querySelectorAll(“form input”);

    var o={};
    for(var i=0, len=input.length; i<len; i++){
        if(input[i].type === “number”){
            o[input[i].name] = parseInt(input[i].value, 10);
        }else if(input[i].type === “text”){
            o[input[i].name] = input[i].value + “”;
        }
    }
    return o;
}

var value = getFormValue();
console.log(value);

(一般自己会用class标识输入元素,然后用getElementsByClassName方法查找。)

标准的盒子模型从内到外依次都有哪些属性,知道哪几种盒子模型
W3C盒子与IE盒子

content padding border margin

addEventListener都有哪些参数

第一个事件名
第二个是事件处时回调
第三个是是否允许事件泡冒

JavaScript事件代理机制

事件冒泡和事件捕获(区别和发生阶段)IE的事件代理

function f(e){
    e.preventDefault();    //阻止浏览器默认行为
}
stopPropagation()        //阻止事件冒泡

假定有insertAfter方法但是没有insertBefore方法,要求实现一个insertBefore方法

function(element, new_element){

    var pre= element.previousSibling();
    if(pre){
        pre.insertAfter(new_element);
    }else{
        parent = element.parentNode();
        parent.firstChild() = new_element;
    }
}

关于零界值的处理:可以先把节点加到第一个节点的后面,然后把第一个节点再插入到这个节点的后面?。。。或者更笨的方法就是把全部节点用for循环挨个移位置T^T

三面

winter老大亲自面试,依旧是在线编程,电话打来已经是下午六点半多了,没有提前预约,猝不及防。

你的优势在哪里?

有过实际项目开发,前后端数据交互,自己封装过Ajax

那就封装一下Ajax吧

= =! no zuo no die 啊

//创建XHR对象
function createXHR () {
    if(typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject != "undefined"){
        var version = [
            "MSXML2.XMLHttp.6.0",
            "MSXML2.XMLHttp.3.0",
            "MSXML2.XMLHttp"
        ];

        for (var i = 0; i < version.length; i++) {
            try{
                return new ActiveXObject(version[i]);
            }catch(e){
                //跳过
            }
        }
    }else{
        throw new Error("您的浏览器不支持XHR对象!");
    }
}

//名值对转换为字符串
function params(data){
    var arr = [];
    for(var i in data){
        arr.push(encodeURIComponent(i)+"="+encodeURIComponent(data[i]));    //特殊字符编码
    }
    return arr.join("&");
}

//定义ajax
function ajax(obj){
    var xhr = createXHR();
    obj.url = obj.url+ "?rand=" + Math.random();
    obj.data = params(obj.data);
    if(obj.method === "get"){
        obj.url += obj.url.indexOf("?") == -1? "?" + obj.data: "&" + obj.data;
    }
    if(obj.async === true){
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                callback();
            }    
        }
    }
    xhr.open(obj.method,obj.url,obj.async);
    if(obj.method === "post"){
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(obj.data);
    }else{
        xhr.send(null);
    }
    if(obj.async === false){
        callback();
    }

    function callback(){
        if(xhr.status == 200){
            obj.success(xhr.responseText);    //回掉传参
        }else{
            alert("获取数据错误!错误代号:"+ xhr.status +",错误信息:"+ xhr.statusText);
        }
    }

}

//调用ajax
document.addEventListener("click",function(){
    ajax({
        method: "post",
        url: "ajax.php",
        data: {
            "name": "Lee",
            "age": 20
        },
        success: function(text){
            alert(text);
        },
        async: true
    });    
}, true);

当时还没写完,老大说没想到你考虑的情况这么多,以为只是随便封装一下的,我差不多知道了,进行下一题好吧?

节点反序问题:

function reverse(div) {
    var children = div.childNodes;
    for(var i = 0, len = children; i<len; i++){
        for(var j=len; j>0; j++){
            var t = children[i];
            children[i] = children[j];
            children[j] = t;
        }
    }
}

<div id="div">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</div>
<button id="btn">change</button>
<script type="text/javascript">
    var btn = document.getElementById(‘btn‘);
    var div = document.getElementById(‘div‘);
    btn.onclick = function reverse() {
        var children = div.childNodes;
        for(var i = 0, len = children.length; i<len; i++){
            if(children[i].nodeType !== 1){
                div.removeChild(children[i]);
                console.log(children);
            }
        }
        var node =  div.appendChild(div.firstChild);
        for(var i = 0, len = children.length-1; i<len; i++){
            node = div.insertBefore(div.firstChild, node);
        }
    }
</script>

HR面

巴巴地等了一天,都快放弃以为前一天的技术面挂了,结果晚上七点多打来电话(互联网公司当加班成为习惯),聊了20分钟。

自我介绍,一个印象最深的项目,为什么学前端,如何学习的。
内蒙的是少数民族吗?家在内蒙为啥要去厦门读书,又为啥去杭州工作,为啥不去北京!

简直就是十万个为什么。。。

知道或者认识哪些前端牛人

吹捧无线不犯法2333
罗列好多人名:计算机之子winter、勾三股四、大漠、teambition的寸志、豆瓣和百度的好多大大不记得名字了

还投哪些公司了,如果都拿到offer去哪?

必须阿里,技术氛围好。。。

交叉面

北京的电话,20多分钟,被虐的好惨

闭包、prototype、继承、JS模块化AMD/CMD、有没有研究过jQurey源码

呵呵呵呵。。。全程抱着能撇多少是多少的心态。。。


百度

一面

技术面试竟是位声音甜美的女子,说好聊半小时,活活说了50多分钟

没得好总结的了,我赌五毛钱她是按照JavaScript高级程序设计和CSS权威指南目录提问的!
还涉及一些计算机网络和数据结构、算法的知识。

二面

一面结束半小时后接到二面电话,防不甚防

基本是对一面问题的深入探讨,第二天面试官还发了封email给了好多学习建议^_^


附一张winter老大博客里面的前端面试知识体系图
技术分享

 

阿里、百度校招面经

标签:

原文地址:http://www.cnblogs.com/simonryan/p/4846336.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!