奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > 前端面试通 > 笔经面经 >

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

时间:2017-10-31 21:23来源: 作者:
笔试通过后,HR安排了面试,总共面了三次,豆瓣前端的三个部门各面一次。三面都有手写代码,非常考察HTML/CSS/JS

笔试通过后,HR安排了面试,总共面了三次,豆瓣前端的三个部门各面一次。

三面都有手写代码,非常考察HTML/CSS/JS的基础

  • CSS方面栽倒了布局,虽然考虑到触发content的BFC来解决边缘和float重叠的问题,但是自己确实没有去解决过这个问题,只是概念上理解浮动和BFC,过了时间比较久又忘记了。

    687474703a2f2f68696b656a756e2e636f6d2f626c6f672f77702d636f6e74656e742f75706c6f6164732f323031312f31302f53637265656e2d73686f742d323031312d31302d32362d61742d31312e32372e32322d504d2e706e67

  • 左右垂直居中也是只有大致的思路,但是解决过的都是宽高已知的情况,宽高不定的解决方案并没有给出。
  • 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>

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
小邱 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-26 17:11 最后登录:2018-06-11 16:06
栏目列表
推荐内容

关注奔三路小程序,方便你我他