OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

如何面试前端工程师:Github很重要


分享到
分类 求职面试   发布 ourjs  1388581981000
注意 转载须保留原文链接,译文链接,作者译者等信息。  

12月30日 2013年,作者 Alex MacCaw, 翻译:myownghost

注:之前我们介绍过:一名靠谱的JavaScript程序员应备的素质,从程序员的角度提出要去学习哪些知识,下面这篇文章从面试官的角度介绍到面试时可能会问到的一些问题。

我在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 API, AMD和CommonJS模块模型,构造函数(constructors),类型和盒子模型(box model)。根据侯选人的情况,我经常会随机提些问题。

原文地址: 点此
社区评论 ( Beta版 )
  • #0 旧人序 1388651373000
    居中我一般这样弄,不过文章中的看上去更高级: .overlay article { margin: 0 auto; width: 400px; height: 400px; }
  • #1 怜曦 1388668660000
    感觉前端工程师很无聊啊,都是在和语法与环境搏斗
  • #2 不折腾不会死 1388672823000
    用绝对定位也可以居中 .absoluteCenter{ width: 400px; height: 400px; margin: auto; position: absolute; top: 0;left: 0;bottom: 0;right: 0; }
  • #3 细水流年 1392006255000
    @旧人序

    这个只是左右居中,没有上下居中
  • #4 细水流年 1392006722000
    @不折腾不会死

    把absolute改成fixed也可居中;并解决文中提到的问题
  • #5 励精图治 1399513992000
    Array.prototype.slice.call(arguments); 应该是 Array.prototype.slice.apply(arguments);
  • #6 lebroncarmelo 1402124307000
    @励精图治

    谁说call不行?
  • #7 梁问队 1415412203360

    都一样啦

  • #8 梁问队 1415412531873

    话说回来 这是在外国,要是中国,那个遮罩根本不行啊,IE6哪支持fixed 还得再问一下兼容性。。

  • #9 时永出 1415702704188

    感觉前端面试的时候就可以知道这家公司把前端的定位成什么。面试毕竟是双向选择的过程。

  • #10 姜迈队 1418097694378

    刚看完帖子,不过,既然前面都是面的原生javascript,到后面出现了了jQuery代码。让人难以费解,为什么不用documen.addEventListener或是document.attachEvent来考验面试者对事件的注册,捕捉冒泡的了解呢?

  • #11 陈亡打 1418955138257

    作者的问题都很简单且基础,换成我们的面试官,直接面死了

  • #12 席丑云 1421388109874

    @旧人序 #0

    你搞笑,弹出框除了水平居中还要锤子方向呢,而且你那个也不兼容!

  • #13 谢与伟 1421892897791

    @励精图治 #5

    当只传递上下文的时候,apply和call是等价的。

  • #14 谢与伟 1421893218825

    @陈亡打 #11

    虽然考题简单,但是题题都紧扣js的核心知识点。作者说他是行业派,确实不虚。面试题是要考察候选人是否合适岗位,而不是证明面试官有多牛。

  • #15 钱予方 1425364925815

    考察问题基础,能看出不少东西

  • #16 池忙卫 1445916398688

    @怜曦 #1

    其实是和浏览器兼容做斗争……语法上的问题,在调试的时候总会发现错误的输出,想办法解决,做得多了就好了!然而浏览器的问题……

  • #17 易可存 1451892621834

    @励精图治 #5 是call他的参数只有arguments一个

  • #18 霍网亿 1488158100153

    呃呃

OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. 一名靠谱的JavaScript程序员应备的素质
  2. PayPal为什么从Java迁移到Node.js,性能提高一倍,文件代码减少44%
  3. 人类只占到互联网流量的40%不到
  4. 芝加哥将计算机科学列为主修课
  5. 我为什么想把比特币一把火烧了
  6. 我真的需要一门编程语言吗?
  7. 程序员最艰巨的十大任务
  8. Ruby己死?NodeJS能否取代Ruby?
  9. 编写更好的jQuery代码的建议
  10. Python不可维护?终于把一个8万行的Python程序用Java重写了
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 求职面试
  1. 如何面试前端工程师:Github很重要
  2. 编程面试的10大算法概念汇总
  3. 长时间工作意味着什么
  4. 跨国求职: 张江男曲折的出国梦
  5. 苹果面试8大难题及答案

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号