阿里、百度校招面经
转自：
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老大博客里面的前端面试知识体系图
