Check out how to interview front-end engineers: Github is very important, front-end github

Check out how to interview front-end engineers: Github is very important, front-end github

From the programmer's point of view, this article introduces some questions that may be asked during the interview from the interviewer's point of view.
However, I would like to give you one piece of advice. Recruitment is a very difficult task. In 45 minutes, it is up to you to determine if a candidate is appropriate. However, the biggest problem during the interview is that everyone wants to hire themselves. Most people who pass my interview have similar ideas (note: because you always ask questions that you care about and know), this is not a good thing. As a result, I have made a lot of luck in my previous decisions. However, this is also a good start.

Ideally, the candidate has a comprehensive Github "resume" so that we can learn about them through their open-source projects. I often browse their code and ask some questions about some specific code designs. If the candidate has a very good open-source project record, the next interview will directly test their team spirit. Otherwise, I have to ask them some code problems.

My interview is very practical. I write all the code. There is no abstraction or theory (Note: The author is an industry School). Other interviewers may ask these questions, but I think their front-end programming capabilities are debatable. Most of the questions I asked seem very simple, but each group of questions allows me to examine the knowledge of some JavaScript of the candidate.

Part 1: Object Prototypes (Object prototype)

It was easy at first. I will ask the candidate to define a method, input a string type parameter, and then add a space between each character of the string to return, for example:

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

Although this seems very simple, it is a good start, especially for those candidates who have not been interviewed by phone-many of them claim to be proficient in JavaScript, but it is usually not written into a simple method.

The following is the correct answer. Sometimes the candidate may use a loop, which is also an acceptable answer.

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

Next, I will ask the candidate to add this method to the String object, for example:

    'hello world'.spacify();

This question allows me to check whether the candidate has a basic understanding of function prototypes (method prototype. This issue often leads to some interesting discussions: whether adding methods to the prototypes of an Object is safe, especially on an Object. The final answer may look like this:

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

Here, I usually ask the candidate to explain the differences between the function declaration and the function expression.

Part 2: arguments

Next, I will ask some simple questions to check whether the candidate understands the parameter (arguments) object. I will ask them to define an undefined log method as the start.

    log('hello world')

I will ask the candidate to define the log, and then it can proxy the console. log method. The correct answer is the following lines of code. In fact, better candidates will directly use apply.

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

Once they have completed writing, I will say that I want to change the method of calling log and input multiple parameters. I will emphasize that the number of input parameters is variable, but there can be more than two. Here is an example of passing two parameters.

    log('hello', 'world');

We hope your candidate can use apply directly. Sometimes people may confuse apply and call, but you can remind them to fine-tune them. The context passed into the console is also very important.

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

Next, I will ask the candidate to add a "(app)" prefix to each log message, for example:

    '(app) hello world'

It may be a bit difficult now. A good candidate knows that arugments is a pseudo array and converts it into 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);
    };

Part 3: Context

The next set of questions is to examine the candidate's understanding of context and this. I first defined the following example. Note that the count attribute does not only read the following information.

var User = {
  count: 1,

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

I wrote the following lines and asked the candidate log what the output would be.

    console.log(User.getCount());

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

In this case, the correct answer is 1 and undefined. You will be surprised because many people are tripped by this basic context problem. Func is executed in the context of winodw, so the count attribute cannot be accessed. I explained this to the candidate and asked them how to ensure that the User can always access the context of func, that is, return the positive value: 1

The correct answer is to use Function. prototype. bind, for example:

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

Next, I will usually say that this method does not work for browsers of the old version, and then let the candidates solve this problem. Many of the weaker candidates are hard on this issue, but it is very 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);
      };
    }

Part 4: Overlay library)

In the last part of the interview, I will ask the candidate to do some practical work by creating a 'pop-up window 'library. I found this very useful. It can fully demonstrate the skills of a front-end engineer: HTML, CSS, and JavaScript. If the candidate passes the previous interview, I will immediately ask them to answer this question.

The implementation scheme is decided by the candidates themselves, but I also hope they can achieve it through the following points:

It is best to use fixed in position in the mask to replace the absolute attribute, so that the mask can always cover the entire window even when scrolling. When the candidates ignore this, I will prompt them 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);
    }

How they center the content is also a bit worth looking. Some candidates will choose CSS and absolute positioning. If the content has fixed width and height, this is feasible. Otherwise, JavaScript is required.

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

I will also ask the candidate to automatically close the mask when it is clicked. This will give a good test of the event bubbling mechanism. Generally, the candidate will bind a click-close method to overlay.

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

This is a method, but when you realize that clicking something in the window will also close overlay-this is obviously a BUG. The solution is to check whether the trigger object of the event is consistent with the bound object, so that the event does not come from the child element, just like this:

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

Other aspects

Of course, these questions only cover a little bit of front-end knowledge. You may also ask many other questions, such as performance, HTML5 API, AMD and CommonJS module models, constructors ), type and box model ). Based on the candidate's situation, I often randomly raise some questions.