阿里、百度校招面经-CSDN博客

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>