异常值得一看的前端口试文章

文章来自翻译,个中疏忽了一些可有可无的内容直入主题。

作者前后在twitter,Stripe事情,时期会列入口试事情。现实上列入口试事情的人都晓得要想在一个较短的时候内(30min-1h)就对一个应聘者做出推断现实上是很难的,因而我们不能不想尽办法去越发合理的去推断口试者。下面是作者理出的一个思绪:

假如对方有github账号,我们会尽能够的去相识TA在开源项目上的动态和他的开源项目。我们也会从中挑出一些切入点,经由过程交换他做这个项目的起点也能够更好的相识口试者的设想思绪,也能够开端的去推断该人是否是合适团队。假如两边交换顺畅,接下来会直接举行到代码等一些基本题目上来。

本身的口试会很现实,险些全部都是coding,很少会提到算法和一些笼统的观点。本身提出的题目看似简朴,然则每一点都涉及到javascript的一些学问范畴。

口试的时刻并不发起运用白板,平常愿望口试者本身带上本身的笔记本,也许就运用本身的。我会将他们的代码运转,并示知结果。

Object prototype

我起初会提出一个异常简朴的题目就是定义一个函数spacify ,将一个字符串作为参数传入,然后返回一个字符串,不过该字符串相对原有传入参数的变化是字母与字母之间多了一个空格。

spacify('hello world') // => 'h e l l o  w o r l d'

虽然题目很简朴,但这倒是一个很好的最先,我们接下来的题目便能够缭绕此睁开, 特别关于那些宣称本身相识Javascript,但现实却连一个函数都不会写的口试者高低立判。

准确的答案以下,不过一些口试者也许会挑选for轮回,固然这并没有错

function spacify(str) {
  return str.split('').join(' ');
}

接下来,我会继承问如何将这个函数直接作用在一个字符串对象上.

'hello world'.spacify();

这个题目能够让我相识口试者对原型链的明白,这个题目能够让相互睁开一些有议论,诸如直接在原型链上定义属性的伤害等等.现实期待结果:

String.prototype.spacify = function(){
  return this.split('').join(' ');
};

平常到这里我会让口试者讲讲函数声明和函数表达式的区分。

Arguments

接下来,我会去相识口试者关于 arguments的明白,我们会请求口试者定一个log函数。

log('hello world');

函数相似完成一个简朴的控制台输出,在控制台输出传入的字符串。一边口试者都邑在定义的函数里直接写console.log,不过照样有更优异的口试者会直接运用apply。

function log(msg){
  console.log(msg);
}

接下来,我会继承问假如我传入多个参数照旧输出一个字符串
,我会提醒口试者传入的 参数是不牢固的,我会暗示作者console.log现实上也接收多个参数。

log('hello', 'world');

不过我照样愿望您的口试者如今已想起apply;口试者能够会在applycall上疑心,这个时刻我会做点小提醒,不过将console上下文传入也是异常重要的.

function log(){
  console.log.apply(console, arguments);
};

接着我会继承诘问,假如我愿望在谁人输出的字符串前一致加上(app) 如许的字符串,相似于如许:

'(app) hello world'

这个题目显著会庞杂许多,口试者应当晓得arguments是一个伪数组,我们须要先将它转换成一般的数组,我们能够运用Array.prototype.slice,代码以下:

function log(){
  var args = Array.prototype.slice.call(arguments);
  args.unshift('(app)');

  console.log.apply(console, args);
};

Context

接下来我想相识口试者关于上下文以及this的明白,我会给出下边的代码,让口试者去诠释count的值。

var User = {
  count: 1,

  getCount: function() {
    return this.count;
  }
};

接下来我会给出下面的代码,让口试者去回复应当输出的准确答案。

console.log(User.getCount());

var func = User.getCount;
console.log(func());

上面的例子中准确输出1undefined。现实上许多口试者都邑在这里摔倒。func的上下文是 `window,因而已失去了count属性。接下来我回继承诘问口试者如何确保func的上下文一直都和User关联,如许能够使输出的答案是1。

准确答案是运用Function.prototype.bind,代码以下:

var func = User.getCount.bind(User);
console.log(func());

这个时刻我会让口试者去举行完美,假如老的浏览器并不支撑该要领,我们应当如何去兼容。部份基本较差的口试者会比较纠结,然则个人认为任何一名前端工程师都应当对applycall有着较为深入的明白。

Function.prototype.bind = Function.prototype.bind || function(context) {
    var self = this;

    return function(){
        return self.apply(context,   arguments);
  };
}
一个弹窗库

口试的末了y一部份,我会请求口试者写点现实的东西。这个异常有效,足以相识前端的手艺栈。假如前面的题目回复的较为抱负,这个题目,我会异常敏捷的睁开末了一个题目的考核。

虽然终究结果取决于口试者的完成,然则这里照旧有充足的考核点。

最好不运用 position:absolute而是position:fixed,这个时刻纵然窗体有转动,也能够很好的遮罩住全局。我会提醒口试者如许运用,而且诘问这两者的区分。

.overlay {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0,0,0,.8);
}

如何将内里的内容居中也是一个异常重要的考核点。一些口试者会运用相对定位,而有的口试者则更善于运用Js。

.overlay article {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -200px 0 0 -200px;
  width: 400px;
  height: 400px;
}

我会继承问,如何确保点击遮罩层时遮罩层是封闭的?这个题目能够将我们的议论落脚到 冒泡中来。许多口试者都邑直接将点击实践绑定到遮罩层上。

$('.overlay').click(closeOverlay);

这个接下来能够事情了,然则你会发明假如点击了遮罩层中的子元素,遮罩层也会封闭。解决方案是就是推断event target ,而且保证 这个时候不会冒泡。

$('.overlay').click(function(e){
  if (e.target == e.currentTarget)
    closeOverlay();
});

尾声

固然前面的学问点仅仅是前端的一部份,现实上你还能够问:机能,HTML5 APIs, AMD vs CommonJS modules,constructors,数据类型,以及盒子模子。我常常都邑跟着口试者的举行去挑选响应的题目。

末了引荐人人都能够去看下Front-end-Developer-Interview-Questions 以及 JavaScript Garden.

翻译原文地点:http://blog.sourcing.io/inter…

    原文作者:静逸秋水
    原文地址: https://segmentfault.com/a/1190000004654217
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞