笔试通过后，HR安排了面试，总共面了三次，豆瓣前端的三个部门各面一次。
三面都有手写代码，非常考察HTML/CSS/JS的基础
- CSS方面栽倒了布局，虽然考虑到触发content的BFC来解决边缘和float重叠的问题，但是自己确实没有去解决过这个问题，只是概念上理解浮动和BFC，过了时间比较久又忘记了。
- 左右垂直居中也是只有大致的思路，但是解决过的都是宽高已知的情况，宽高不定的解决方案并没有给出。
- JS实现事件代理，然后自己实现一个事件代理的方法，可以代理自定义的事件名称以及回掉函数，想了很长时间，确实不会。
- JS的DOM知识和基础的对象组合起来的一步一步往深问的问题，能答出来，但是不能精准回答，只能答出个大概，忘记了好多细节。
- 问了笔试题、css3相关、以及字符串处理的问题，感觉css3的知识是必须的，JS对字符串的处理是必须掌握的。
总结来看，面试很艰难，首先是手写代码，其次是问题一层嵌套一层，难度不断上升。
面完就觉得：百度校招一面问计算机基础不会，然后给自己找借口，这次直接问了前端基础，但是却答得不是很好，磕磕巴巴，要不是面试官人好，一定会被虐死。
笔试
更新于：2015-09-30 23:58:54
29号晚上做了豆瓣的前端工程师的笔试题
一共三道题，豆瓣推荐使用markdown编写答案，下面是我做出来的解答
第一题
写一个名为testSymbols的函数，传递的参数为字符串，假如字符串中每个字母都被+包围，例如+a+b+c+d+则返回true，否则返回false
解法：
按照字母分割字符串得到一个元素都说是每个字母的相邻位置，然后判断是否全为+号即可
function testSymbols(str) { var aStr = str.split(/[a-zA-Z]/);//答题的时候写的是/w/,真是蠢了：w : 字符（字母。数字，下划线） for (var i = 0; i < aStr.length; i++) { if (aStr[i] !== '+') { return false; } }; return true;}console.log(testSymbols('++d+-o+u+b--a++-+n+'));console.log(testSymbols('+a+b+c+d+'));第二题
写一个名为isMagicSum的函数，传递的参数为数组，假如数组中任意元素之和等于最大的元素值则返回true,否则返回false
解法：
- 使用reduce实现了一个数组求和函数
- 利用sort排序得到最大值max
- 遍历所有可能的数组内元素求和的情况放入数组中
- 循环求和结果数组，判断是否等于max
这里面涉及到JS数组slice的用法
- 如果slice方法的参数是0，就返回一个从起始位置到原数组最后一个成员的数组，原数组不变
- 正常使用Array.prototype.slice.call(arguments)来将类似数组的对象转换为数组
这里面用的是第一条浅拷贝
function isMagicSum(arr) { Array.prototype.sum = function() { return this.reduce(function(partial, value) { return partial + value; }) }; arr = arr.sort(function(a, b) { return a - b; }); var max = arr.pop(); console.log(max); var aSum = []; for (var i = 0; i < arr.length; i++) { var copyArr = arr.slice(0); for (var j = 1; j < copyArr.length; j++) { copyArr.splice(i, j); aSum.push(copyArr.sum()); }; }; console.log(aSum); for (var i = 0; i < aSum.length; i++) { if (aSum[i] === max) { return true; } } return false;}console.log(isMagicSum([11, -3, 13, 9, 5]));第三题
实现移动端的Switch按钮的效果，切换时要有颜色渐变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>switch</title> <style type="text/css"> .switch { width: 52px; height: 31px; position: relative; border: 1px solid #dddddd; background-color: #dddddd; box-shadow: #dddddd 0 0 0 0 inset; border-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-clip: content-box; display: inline-block; -webkit-appearance: none; //去除移动设备下默认的样式 user-select: none; //去除选中的样式 outline: none; //去除chrome自带的outline } .switch:before { content: ''; width: 29px; height: 29px; position: absolute; top: 0px; left: 0; border-radius: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; background-color: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .switch:checked { border-color: #6dcfb5; box-shadow: #6dcfb5 0 0 0 16px inset; background-color: #6dcfb5; } .switch:checked:before { left: 21px; } .switch.switch-douban { transition: background-color ease 0.4s; } .switch.switch-douban:before { transition: left 0.3s; } .switch.switch-douban:checked { box-shadow: #dddddd 0 0 0 0 inset; background-color: #6dcfb5; transition: border-color 0.4s, background-color ease 0.4s; } .switch.switch-douban:checked:before { transition: left 0.3s; } </style></head><body> <input class="switch switch-douban" type="checkbox" checked></body></html>
