2015年10月豆瓣校招-前端开发工程师面试经历

匿名网友发布于: 2015-10-29 00:00:00

阅读 199 收藏 0 点赞 0 评论 0

笔试通过后，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>

评论列表正在加载评论...

文章目录