前端工程师面试技巧

工程师人生 2018-10-15 10:57 次阅读
我在Twitter和Stripe的一部分工作内容是面试前端工程师。其实关于面试你可能很有自己的一套,这里我想跟你们分享一下我常用的方法。 不过我想先给你们一个忠告,招聘是一件非常艰巨的任务,在45分钟内指出一名侯选人是否合适是你需要完成的任务。不过面试的最大问题是每个人都会想着去雇佣他们自己,任何通过我面试的人想法大都跟我差不多(注:因为你总会问你自己关心和知道的问题),这其实不是一件好事。因此我之前的决定都有很大碰运气的成分。不过,这也是一个良好的开端。 最理想的情况下是侯选人有一个全面的Github“简历”,这样我们可以同时通过他们的开源项目了解他们。我经常会浏览他们的代码然后针对一些特定的代码设计问一些问题。如果侯选人有非常好的开源项目记录,接下来的面试会直接去检验他们的团队协作精神。否则,我不得不去问他们一些代码方面的问题了。 前端工程师面试技巧 我的面试非常有实践性,全部是写代码。没有抽象和理论上的东西(注:作者是个行业派),其他的面试官很可能会问这些问题,但是我认为他们前端编程的能力是值得商榷的。我问的问题大多看上去非常简单,但是每组问题都能让我考查侯选人某一方面JavaScript的知识。 第一部分:Object Prototypes (对象原型) 刚开始很简单。我会让侯选人去定义一个方法,传入一个string类型的参数,然后将string的每个字符间加个空格返回,例如: spacify(‘hello world’) // =》 ‘h e l l o w o r l d’ 尽管这个问题似乎非常简单,其实这是一个很好的开始,尤其是对于那些未经过电话面试的侯选人——他们很多人声称精通JavaScript,但通常连一个简单的方法都不会写。 下面是正确答案,有时侯选人可能会用一个循环,这也是一种可接受的答案。 function spacify(str) { return str.split(‘’).join(‘ ’); } 接下来,我会问侯选人,如何把这个方法放入String对象上面,例如: ‘hello world’.spacify(); 问这个问题可以让我考察侯选人是否对function prototypes(方法原型)有一个基本的理解。这个问题会经常引起一些有意思的讨论:直接在对象的原型(prototypes)上添加方法是否安全,尤其是在Object对象上。最后的答案可能会像这样: String.prototype.spacify = function(){ return this.split(‘’).join(‘ ’); }; 到这儿,我通常会让侯选人解释一下函数声明和函数表达式的区别。 第二部分:参数 arguments 下一步我会问一些简单的问题去考察侯选人是否理解参数(arguments)对象。我会让他们定义一个未定义的log方法作为开始。 log(‘hello world’) 我会让侯选人去定义log,然后它可以代理console.log的方法。正确的答案是下面几行代码,其实更好的侯选人会直接使用apply. function log(msg) { console.log(msg); } 他们一旦写好了,我就会说我要改变我调用log的方式,传入多个参数。我会强调我传入参数的个数是不定的,可不止两个。这里我举了一个传两个参数的例子。 log(‘hello’, ‘world’); 希望你的侯选人可以直接使用apply。有时人他们可能会把apply和call搞混了,不过你可以提醒他们让他们微调一下。传入console的上下文也非常重要。 function log(){ console.log.apply(console, arguments); }; 接下来我会让侯选人给每一个log消息添加一个“(app)”的前辍,比如: ‘(app) hello world’ 现在可能有点麻烦了。好的侯选人知道arugments是一个伪数组,然后会将他转化成为标准数组。通常方法是使用Array.prototype.slice,像这样: function log(){ var args = Array.prototype.slice.call(arguments); args.unshift(‘(app)’); console.log.apply(console, args); }; 第三部分:上下文 下一组问题是考察侯选人对上下文和this的理解。我先定义了下面一个例子。注意count属性不是只读取当前下下文的。 var User = { count: 1, getCount: function() { return this.count; } }; 我又写了下面几行,然后问侯选人log输出的会是什么。 console.log(User.getCount()); var func = User.getCount; console.log(func()); 这种情况下,正确的答案是1和undefined。你会很吃惊,因为有很多人被这种最基础的上下文问题绊倒。func是在winodw的上下文中被执行的,所以会访问不到count属性。我向侯选人解释了这点,然后问他们怎么样保证User总是能访问到func的上下文,即返回正即的值:1 正确的答案是使用Function.prototype.bind,例如: var func = User.getCount.bind(User); console.log(func()); 接下来我通常会说这个方法对老版本的浏览器不起作用,然后让侯选人去解决这个问题。很多弱一些的侯选人在这个问题上犯难了,但是对于你来说雇佣一个理解apply和call的侯选人非常重要。 Function.prototype.bind = Function.prototype.bind || function(context){ var self = this; return function(){ return self.apply(context, arguments); }; } 第四部分:弹出窗口(Overlay library) 面试的最后一部分,我会让侯选人做一些实践,通过做一个‘弹出窗口’的库。我发现这个非常有用,它可以全面地展示一名前端工程师的技能:HTML,CSS和JavaScript。如果侯选人通过了前面的面试,我会马上让他们回答这个问题。 实施方案是由侯选人自己决定的,但是我也希望他们能通过以下几点来实现: 在遮罩中最好使用position中的fixed代替absolute属性,这样即使在滚动的时侯,也能始终让遮罩始盖住整个窗口。当侯选人忽略时我会提示他们这一点,并让他们解释fixed和absolute定位的区别。 .overlay { position: fixed; left: 0; right: 0; bottom: 0; top: 0; background: rgba(0,0,0,.8); } 他们如何让里面的内容居中也是需要考察的一点。一些侯选人会选择CSS和绝对定位,如果内容有固定的宽、高这是可行的。否则就要使用JavaScript. .overlay article { position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -200px; width: 400px; height: 400px; } 我也会让侯选人确保当遮罩被点击时要自动关闭,这会很好地考查事件冒泡机制的机会。通常侯选人会在overlay上面直接绑定一个点击关闭的方法。 $(‘.overlay’).click(closeOverlay); 这是个方法,不过直到你认识到点击窗口里面的东西也会关闭overlay的时侯——这明显是个BUG。解决方法是检查事件的触发对象和绑定对象是否一致,从而确定事件不是从子元素里面冒上来的,就像这样: $(‘.overlay’).click(function(e){ if (e.target == e.currentTarget) closeOverlay(); }); 其他方面 当然这些问题只能覆盖前端一点点的知识的,还有很多其他的方面你有可能会问到,像性能,HTML5 APIAMD和CommonJS模块模型,构造函数(constructors),类型和盒子模型(box model)。根据侯选人的情况,我经常会随机提些问题。
收藏 人收藏
分享:

评论

相关推荐

十年工程师生涯分享

再过几天就是我从业十年的纪念日啦,回首这过去的十年,个中辛酸和快乐只有经历过后才有切肤的体会,有加班的烦劳,有择业的困惑...
发表于 11-08 09:46 58次 阅读
十年工程师生涯分享

解决芯片工程师的两大痛点

看看今天的物联网和智能设备领域,你可能会觉得现在是成为芯片工程师最好的年代。设备越来越小,将越来越多....
发表于 11-07 16:38 308次 阅读
解决芯片工程师的两大痛点

开关稳压器LT1766EGN#TRPBF主要应用于哪些产品

开关稳压器  LT1766EGN#TRPBF 这是料号  主要应用于哪些产品 ...
发表于 11-07 11:36 70次 阅读
开关稳压器LT1766EGN#TRPBF主要应用于哪些产品

为什么说未来是全栈工程师的世界

技术在过去的几十年里进步很快,也将在未来的几十年里发展得更快。今天技术的门槛下降得越来越快,原本需要....
的头像 工程师人生 发表于 11-05 14:20 171次 阅读
为什么说未来是全栈工程师的世界

从一个毕业技术小白,到现在资深工程师,他获得这些!

无论当我在网上、论坛上、还是实际生活碰到的种种电子毕业生的时候,我学的有必要把我的路写写,大家可以扔鸡蛋也可以拍砖哈!先...
发表于 11-05 09:32 246次 阅读
从一个毕业技术小白,到现在资深工程师,他获得这些!

未来的工程师会做些什么

更新: Grace和Noah一直忙于他们的夏季项目。 查看他们的工作,并在每个星期的8月份回来看看更多。 我参加工程课已经很长时...
发表于 11-01 15:45 55次 阅读
未来的工程师会做些什么

全栈工程师的定义

大约在 2013 年,“全栈开发”这个词开始出现在招聘描述和博文之中。很多公司也意识到,雇用一个仅仅....
的头像 工程师人生 发表于 11-01 09:30 143次 阅读
全栈工程师的定义

工程师每天工作很长时间真的好吗

减少些压力,提高些效率:每天别工作太长时间,对你和公司都有好处
的头像 工程师人生 发表于 11-01 09:26 165次 阅读
工程师每天工作很长时间真的好吗

工程师写技术博客有哪些好处

没有读者,写技术博客文章感觉不到太多的作用,是浪费时间的事情,是这样吗?
的头像 工程师人生 发表于 10-31 11:21 182次 阅读
工程师写技术博客有哪些好处

工程师怎样关注自己的健康问题

我发现很多程序员都认为敲代码对他们的身体健康貌似没什么影响。我真的非常希望,大家能对程序员面临的健康....
的头像 工程师人生 发表于 10-31 10:54 261次 阅读
工程师怎样关注自己的健康问题

关于放大器设计工程师必须知道的100个基本问题(ZT)

网上看到以对答形式总结的基本原理、概念及实用经验,非常棒的资料,转发分享,放大器应用是个经验活,希望大家多分享交流: ...
发表于 10-31 09:04 94次 阅读
关于放大器设计工程师必须知道的100个基本问题(ZT)

工程师写博客有什么好处

客文章,是种与自我的对话,也是种与外界的联繫,也是获得 level up 或 skill learn....
的头像 工程师人生 发表于 10-30 15:11 623次 阅读
工程师写博客有什么好处

一个老工程师给新毕业大学生的几点建议

作为一个二十年前毕业的大学生,我和现在的许多人一样走过了,迷茫,选择,再迷茫,再选择的过程。现在把我所经历的一些东西写出...
发表于 10-29 09:32 170次 阅读
一个老工程师给新毕业大学生的几点建议

如何成为更优秀的工程师?

来自Heap(一家主要为企业提供用户数据分析架构的企业)早期员工Michael Malis,就如何成....
的头像 嵌入式资讯精选 发表于 10-28 09:51 360次 阅读
如何成为更优秀的工程师?

工程师面试创业公司的真实经历

硅谷充满了下面这种创业公司,它们疯狂崇拜在面试中能够答对几道编码难题的候选人,并认为雇佣这些人最终会....
的头像 工程师人生 发表于 10-27 09:43 254次 阅读
工程师面试创业公司的真实经历

30岁仍一事无成,为什么你没时间看看这个“失败”工程师的独白?

  回想我刚毕业那年的春节后,招聘现场也异常火爆,我艰难地挤到了第一排,递上简历,得到两个问题,第一,学什么专业,会干啥...
发表于 10-26 14:15 1437次 阅读
30岁仍一事无成,为什么你没时间看看这个“失败”工程师的独白?

工程师如何在工作之余做副项目

在 IT 资讯聚合网站 Hacker News 上花超过 5 分钟,你就会看到那些在兼职创业的人。这....
的头像 工程师人生 发表于 10-25 10:54 167次 阅读
工程师如何在工作之余做副项目

工程师面试被拒的真实经历

我做了很长一段时间的技术招聘后,我可以向你保证,招聘过程中的随机因素和干扰因素(false nega....
的头像 工程师人生 发表于 10-25 10:12 285次 阅读
工程师面试被拒的真实经历

一名资深IT工程师的面试经验

我已经在 IT 领域工作了相当长时间,有 12 年了。作为一个曾经的求职者和面试官,我对面试有一个客....
的头像 工程师人生 发表于 10-24 10:02 287次 阅读
一名资深IT工程师的面试经验

IT工程师怎样利用副项目找工作

为了在 IT 科技领域谋求一份工作而做副项目,这要不就是极好利用时间,就是在极大浪费时间。
的头像 工程师人生 发表于 10-24 09:41 169次 阅读
IT工程师怎样利用副项目找工作

IT工程师如何高效的学习

IT 行业是一个变化非常快的行业,它需要我们持续去学习新的知识和技能。 但是,工作以后,我们经常会发....
的头像 工程师人生 发表于 10-23 10:46 343次 阅读
IT工程师如何高效的学习

为什么有的公司总是抱怨找不到好的工程师

几个月前,我参加了一场针对技术领域女性的活动。很多参加者中是新的开发者,毕业于编程学校或者计算机科学....
的头像 工程师人生 发表于 10-23 10:37 282次 阅读
为什么有的公司总是抱怨找不到好的工程师

一位Java工程师的找工作经历

作者从业 10 几年,经历过大大小小的面试也去过一些大公司,还经历过一些大的找工作浪潮,也看到过很多....
的头像 工程师人生 发表于 10-22 10:56 321次 阅读
一位Java工程师的找工作经历

一名前端工程师的从业经历

四年之前,我也是从原生Js开始,HTML,CSS,浏览器兼容,操作DOM,Ajax交互,慢慢到后来,....
的头像 工程师人生 发表于 10-21 09:51 337次 阅读
一名前端工程师的从业经历

产品开发别侥幸——该来的一定会来的

注:本文是作者以前发表在其个人博客,现在发布到电子发烧友专栏开发的产品越多,就越相信这个世界不存在完....
的头像 聚丰开发 发表于 10-19 11:26 224次 阅读
产品开发别侥幸——该来的一定会来的

一名JAVA工程师的八年从业经验分享

在中国有很多人都认为IT行为是吃青春饭的,如果过了30岁就很难有机会再发展下去!其实现实并不是这样子....
的头像 工程师人生 发表于 10-19 10:28 347次 阅读
一名JAVA工程师的八年从业经验分享

一位Java工程师的职业规划

一位哲人说过:“走好每一步,就是你的人生。”,人生之路说长也长,是因为这是你一生所要走的艰难险阻的跋....
的头像 工程师人生 发表于 10-19 10:17 251次 阅读
一位Java工程师的职业规划

成为高级工程师的必备素质有哪些

之前很多人问过我这么个问题,说怎样才能成为一名高级工程师?我觉得这是一个很好的话题,技术人的职业规划....
的头像 工程师人生 发表于 10-19 09:42 262次 阅读
成为高级工程师的必备素质有哪些

美企“相中”中国副教授, 芯片设计人才告急!

美企“相中”中国副教授 Cadence向福州大学副教授陈建利伸出橄榄枝,他是业内一位先进人才。在芯片电子设计自动化领域,陈建...
发表于 10-17 13:48 767次 阅读
美企“相中”中国副教授, 芯片设计人才告急!

工程师和码农的最大区别在哪

工程师和码农的区别并不在于技术水准的高低。
的头像 工程师人生 发表于 10-17 09:15 365次 阅读
工程师和码农的最大区别在哪

嵌入式工程师的真实现状,有人月薪8千,有人年薪快40万!

一名一线企业嵌入式软件工程师的笔者,想通过自己的实际经历理性地评论当今嵌入式行业的真实状况。 目前国内一个普遍被认同的定...
发表于 10-16 13:42 1151次 阅读
嵌入式工程师的真实现状,有人月薪8千,有人年薪快40万!

请不要随意做全栈工程师

很简单就是最近越来越多的人想做【全栈工程师】,他们的目标就是全栈,他们才入行短短1-2年,甚至刚从培....
的头像 工程师人生 发表于 10-16 11:59 389次 阅读
请不要随意做全栈工程师

全栈工程师在生活中的真实状态

从小米辞职出来创业的两个多月里,通过猎头或自己投简历,先后面试了知乎,今日头条,豌豆荚,美团,百度,....
的头像 工程师人生 发表于 10-16 11:51 330次 阅读
全栈工程师在生活中的真实状态

怎样才算成为一名合格的算法工程师

本科生非ACMER 需要什么程度才算算法合格?
的头像 工程师人生 发表于 10-16 11:08 408次 阅读
怎样才算成为一名合格的算法工程师

全栈工程师和架构师有什么区别

全栈工程师和架构师往往具备一专多能,不但专业技能扎实,还得熟悉掌握前端到后端各种主流技术环节的实现能....
的头像 工程师人生 发表于 10-16 11:04 286次 阅读
全栈工程师和架构师有什么区别

前端工程师的价值到底体现在哪里

其实豆瓣的克军的理解也很不错,很有前瞻性,一个好的前端工程师到底应该做什么,具体的价值体现又是怎样的....
的头像 工程师人生 发表于 10-15 10:41 186次 阅读
前端工程师的价值到底体现在哪里

网页工程师应该怎样规划自己的技术之路

如今网页的重要性毋庸置疑,在商业上,好的网站已经是企业保持竞争力的重要环节。伴随着网页开发技术的日新....
的头像 工程师人生 发表于 10-12 10:26 858次 阅读
网页工程师应该怎样规划自己的技术之路

成为Python工程师需要哪些技能

掌握计算机的构成和工作原理
的头像 工程师人生 发表于 10-12 09:54 448次 阅读
成为Python工程师需要哪些技能

PM应该把工程师作为伙伴而不是工具

过节前看到一篇文章,讲产品项目就应该由工程师来主导,但国内让PM去驱动项目,搞得乱七八糟,很恼火,怎....
的头像 工程师人生 发表于 10-12 09:38 389次 阅读
PM应该把工程师作为伙伴而不是工具

PHP工程师怎样自我突破

身边有几个做PHP开发的朋友,因为面试,也接触到不少的PHP工程师,他们常疑虑自己将来在技术上的成长....
的头像 工程师人生 发表于 10-11 09:36 335次 阅读
PHP工程师怎样自我突破

怎样成为一名优秀的web前端工程师

它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而....
的头像 工程师人生 发表于 10-11 09:31 243次 阅读
怎样成为一名优秀的web前端工程师

前端工程师的岗位职责有哪些

前端开发工程师(下文简称前端),这个岗位我一直有些异议,异议就在前端的岗位职责有哪些?
的头像 工程师人生 发表于 10-11 09:26 309次 阅读
前端工程师的岗位职责有哪些

工程师的十条精进原则

时间回到8年前,我人生中第一份实习的工作,是在某互联网公司的无线搜索部做一个C++工程师。当时的我可....
的头像 工程师人生 发表于 10-10 10:32 278次 阅读
工程师的十条精进原则

全栈工程师的观点认知

深以为然,所以,全栈工程师应该分为Web全栈和App全栈。恰巧最近看了本有关Web全栈工程师的书,记....
的头像 工程师人生 发表于 10-10 10:08 235次 阅读
全栈工程师的观点认知

工程师面试时应该注意哪些问题

我 在 Google(以前是微软)工作期间面试了不下 300人,其中某些应聘者确实表现非凡,但有些却....
的头像 工程师人生 发表于 10-10 10:00 444次 阅读
工程师面试时应该注意哪些问题

什么是全栈工程师 做全栈工程师真的好吗

最近参加一个技术社区活动,在讨论到“CTO的技术深度和广度哪个更重要”的话题时,我想起社区里面常常提....
的头像 工程师人生 发表于 10-09 10:40 837次 阅读
什么是全栈工程师 做全栈工程师真的好吗

一位架构师写给工程师的一封信

下面的邮件是某Architect发给他的Engineering团队的(来源),我觉得挺不错的,翻译过....
的头像 工程师人生 发表于 10-09 09:51 313次 阅读
一位架构师写给工程师的一封信

前端工程师的简历怎么写

虽然简历都会有一些常规信息,但职业决定了这份简历核心内容和求职成败。所以,这份简历应该尽可能体现你自....
的头像 工程师人生 发表于 10-09 09:03 520次 阅读
前端工程师的简历怎么写

怎样成为前端工程师

前端教的三大内功秘笈:Html、Css、Javascript。你必须要掌握的程度
的头像 工程师人生 发表于 10-08 10:28 320次 阅读
怎样成为前端工程师

为什么互联网行业这么缺前端工程师

现在,几乎整个互联网行业都缺前端工程师,不仅在刚起步的创业公司,对上市公司乃至巨头这个问题也一样存在....
的头像 工程师人生 发表于 10-08 10:13 470次 阅读
为什么互联网行业这么缺前端工程师

一名数据工程师的自白

2011年,我作为一名商业智能工程师加入 Facebook。到了 2013 年离开的时候,我的职称是....
的头像 工程师人生 发表于 10-08 09:36 557次 阅读
一名数据工程师的自白

做售前工程师需要注意哪些细节

在IT界,成功的完成一个项目的需要销售人员、售前人员、项目实施人员(开发人员)、售后服务人员等密切协....
的头像 工程师人生 发表于 10-08 09:34 605次 阅读
做售前工程师需要注意哪些细节

PHP后端工程师的前景和5个阶段

1994年创建,1995年对外发表第一个版本,名为:personal home page tools....
的头像 工程师人生 发表于 10-08 09:22 539次 阅读
PHP后端工程师的前景和5个阶段

工程师必看:六招搞定常见电子元器件的检测

1. 判断晶振的好坏 先用万用表(R×10k挡)测晶振两端的电阻值,若为无穷大,说明晶振无短路或漏电;再将试电笔插入市电插孔内,...
发表于 10-04 16:52 209次 阅读
工程师必看:六招搞定常见电子元器件的检测