Part of my job at Alibaba was interviewing front-end engineers. You probably have a different approach to interviewing, and I’d like to share with you some of the techniques I use.

But I want to give you a word of warning, recruiting is a very difficult task, and it’s your job to tell you whether a candidate is a good fit or not in 45 minutes. But the biggest problem with interviews is that everyone is trying to hire themselves, and anyone who makes it through my interview is probably thinking like me (because you’re always asking questions you care about and know), which is not a good thing. So there’s a lot of chance in my decisions. But it is also a good start.

Ideally, candidates should have a comprehensive Github “resume” so we can get to know them through their open source projects as well. I often look at their code and ask questions about specific code designs. If the candidate has a very good open source project record, the following interview will directly test their teamwork spirit. Otherwise, I’d have to ask them some code questions.

My interviews were very hands-on and all about writing code. Nothing abstract or theoretical, other interviewers will probably ask these questions, but I think their front-end programming skills are questionable. Most of the questions I asked seemed pretty simple, but each set of questions allowed me to test the candidate on some aspect of JavaScript.

Prototypes For Prototypes

It was easy at first. I’ll tell the candidate to define a method that takes a string argument and returns each string character with a space, for example:

Spacify (‘ Hello world’) // => ‘hello wor L d’ Although this question seems so simple, it’s actually a good start, especially for candidates who haven’t been interviewed over the phone — many of whom claim to be proficient in JavaScript, But usually they don’t even have a simple way to do it.

Here’s the correct answer, and sometimes a candidate might use a loop, which is an acceptable answer.

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

Next, I’ll ask the candidate how to put this method on a String, for example:

'hello world'.spacify();
Copy the code

Asking this question allows me to see if candidates have a basic understanding of function prototypes. This issue often leads to interesting discussions about whether it is safe to add methods directly to prototypes of objects, especially objects. The final answer might look something like this:

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

At this point, I usually ask candidates to explain the difference between a function declaration and a function expression.

Part 2: Arguments

Next I’ll ask simple questions to see if candidates understand arguments objects. I’ll start by asking them to define an undefined log method.

Log (‘ Hello world’) I’ll let the candidate define log, which can then proxy the console.log method. The correct answer is the following lines of code, but a better candidate would use Apply directly.

function log(msg)  { console.log(msg); }Copy the code

Once they’ve done that, I’m going to say I’m going to change the way I call log, pass in multiple arguments. I’ll emphasize that the number of arguments I pass in is variable, but not two. Here I give an example of passing two parameters.

log(‘hello’, ‘world’); Hope your candidate can use Apply directly. Sometimes people may confuse apply and call, but you can remind them to tweak it. The context passed into console is also very important.

function log(){ console.log.apply(console, arguments); }; Next, I’ll ask candidates to add a “(app)” dropout to each log message, for example:

'(app) hello world'
Copy the code

Now we might be in a bit of trouble. A good candidate knows that Arugments is a pseudo-array and will convert it to a standard array. The usual method is to use array.prototype. slice, like this:

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

  console.log.apply(console, args);
};
Copy the code

Part three: Context

The next set of questions examines the candidate’s understanding of context and this. I defined the following example first. Note that the count attribute does not only read the current context.

var User = {
  count: 1,

  getCount: function() {
    returnthis.count; }};Copy the code

I wrote the next few lines, and I asked the candidate what the log output would be.

console.log(User.getCount());

var func = User.getCount;
console.log(func());
Copy the code

In this case, the correct answers are 1 and undefined. You’d be surprised how many people stumble over this basic contextual problem. Func is executed in the context of WinODW, so the count attribute is not accessible. I explained this to the candidates and asked them how to ensure that the User can always access the func context, i.e. return the exact value: 1. The correct answer is to use function.prototype.bind, for example:

var func = User.getCount.bind(User); console.log(func()); Then I usually say it doesn’t work on older browsers and let candidates fix the problem. Many weaker candidates struggle with this, but it’s important for you to hire a candidate who understands apply and call.

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

  return function() {return self.apply(context, arguments);
  };
}
Copy the code

Part 4: Overlay Library

In the final part of the interview, I will ask candidates to do some practice by creating a library of pop-ups. I find this very useful as it shows the full spectrum of a front-end engineer’s skills: HTML,CSS, and JavaScript. If a candidate passes the previous interview, I will ask them to answer this question immediately.

It’s up to the candidates to decide how to implement it, but I also want them to do it by:

It is best to use fixed in position instead of absolute in the mask, so that the mask will always cover the entire window even when scrolling. I remind candidates of this when they ignore it and ask them to explain the difference between fixed and absolute positioning.

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

How they center the content is another thing to look at. Some candidates opt for CSS and absolute positioning, which works if the content has a fixed width and height. Otherwise use JavaScript.

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

I would also ask candidates to make sure the mask closes automatically when clicked, which would be a good test of the opportunity for event bubbling. Usually candidates will bind a click-close method directly on top of the overlay.

$(‘.overlay’).click(closeOverlay); This is a method, but until you realize that clicking on something inside the window also closes the overlay — it’s obviously a BUG. The solution is to check that the event trigger object and the binding object are the same to make sure that the event is not bubbling up from a child element, like this:

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

Other aspects

Of course these questions only cover a little bit of the front end, there are many other aspects you might ask about, like performance, HTML5 apis, AMD and CommonJS module models, constructors, types and box Models. I often ask random questions, depending on the candidate.

Welcome to my blog:

• github

Focus on the startup section

• A partner