preface

Let me introduce myself first

  • Graduated from a university under the Mountain of Qingcheng, Chengdu, junior college,Software testinggraduate
  • 22 years old, 15 years of internship, working experience of nearly three years, before the back-end writing PHP, I like to do things around, since last June began to study front-end, front-end experience of more than half a year

At the end of the year, I wanted to change a job for various reasons, but I was too busy to seriously prepare my resume and review the basic knowledge, so I didn’t dare to write on my resume. Then wrote a brief version of the resume to hang in Boss direct hire, ready to year after serious preparation of this matter.

To my surprise, a week unexpectedly received eight ali interview invitation, read the online seniors some experience: Ali can only apply for a job in three months, so he chose two favorite departments to cast a resume, one of the internal push did not follow, most of the education has not been 😂

The following is ali’s interview process

First round of phone interviews

  1. To introduce myself

    balabala…. I have not been in an interview for a long time, but I was very nervous about introducing myself. I mentioned some things that are not on my resume, such as writing PHP, using Swoole to do intelligent hardware communication, and why I wrote front-end, Balabala…

  2. ES6? What is deconstruction assignment? I gave you a direct example

    const { a, b, c } = { a: 'aa'.b: 'bb'.c: 'cc' }
    Copy the code
  3. Talk about the React lifecycle

    instantiation

    • getDefaultProps
    • getInitialState
    • componentWillMount
    • render
    • componentDidMount

    pol

    • componentWillReceiveProps
    • shouldComponentUpdate
    • componentWillUpdate
    • componentDidUpdate

    The destruction of

    • componentWillUnmount
  4. The React method calls the event handler (which uses this)

    this.foo.bind(this)
    Copy the code
  5. Question 4, why bind(this)

    Foo () {} has a different scope than const foo = () => {}. Foo () {} uses an external member. Bind (this)

  6. Question 4, can I not use bind(this)

    • You can use the arrow function
    • You can uselodash-decoratorsThe Bind decorator inside
  7. The principle of decorators

    Object. DefineProperty is called to add and modify Object attributes

  8. Implement a generic method of your own that does not require the use of bind and decorators for the purpose of question 4

    The detailed process will not be described in detail…

  9. The this scope inside the closure

    The this of the inner function refers to the scope enclosing it

  10. What did React Render do

    React source code analysis on the net a lot of… I mentioned the optimizations I made with Redux-Saga in shouldComponentUpdate, as well as my own open source project

  11. How to prevent XSS and CSRF

    • XSS: Cross-site scripting attacks. If js code is executed without filtering, cookies may be leaked. Prevent: filter
    • CSRF: Cross-site request forgery that traps users from performing unintended actions on currently logged Web applications. Prevent: Set token, disable CORS with POST or JSON API for write operations, disable cross-domain requests, and check referrer
  12. How does Ajax work? How do you normally send web requests

    • Through the XMLHttpRequest/ActiveXObject new Ajax requests
    • Register the callback function with onReadyStatechange
    • Use the combination of open, setRequestHeader, and Send to send requests
    • Usually send network request: when using next to do isomorphic application, useisomorphic-fetchSend a request, if only the client sends the request when usedaxios
  13. There are three elements, the first and the third are 100px wide, and the middle element takes up the rest of the space. How do I make the middle element change with the browser width

    <div className="main">
        <div className="div-1"></div>
        <div className="div-2"></div>
        <div className="div-3"></div>
        <style jsx>{` .main { width: 100vw; height: 100vh; display: flex; justify-content: space-around; } .div-1,.div-3 { min-width: 100px; height: 100vh; } .div-2 { width: 100%; height: 100vh; } `}</style>
    </div>
    Copy the code
  14. Tell me about the box – sizing

    • Standard mode: Width and height refer to the width and height of the content area. Adding padding, border, and margin will affect the overall size
    • Weird mode: Width and height refer to the content area +padding+border. Adding padding and border does not affect the overall size
  15. Did you have any problems with the project

    I have not encountered any big problems in these projects recently. What impressed me most is that when I built the EKL central log server as an intern, I was stuck for one day due to a time problem. The log time collected by EKL was inconsistent with the time (time zone) of the server, so the logs could not be collected

  16. What difficulties do you find in building EKL

    I think the most troublesome part of using EKL is writing grok match regex, which requires different regex to match different logs, but I’m used to it later, OK

  17. Talk about back-end projects that you remember most

    In my previous internship, I worked on an intelligent hardware project, which was an intelligent collar for pets that could record the movement data of pets. The hardware would send a large amount of gyroscope and accelerometer data to the server at regular intervals, establish TCP through Swoole, accept binary data, and then process the received data through Map Reduce…

  18. Stop. You talked about using Map Reduce for big data. Why not use Something like Redis

    Personally, I think the team was small at that time and needed a quick and simple solution, so Map Reduce was exactly what we needed. I also know about Redis that zset can be used to sum up easily

  19. Talk about mysql transactions

    BEGIN, ROLLBACK transaction, COMMIT transaction

  20. Tell me about your most satisfying business project

    Speaking of a homogeneous project for the touch screen version of next.js, which uses Prefech pre-loading and next’s dynamic loading, the experience is fairly quick, showing the scroll bar with nProgress, Before next. Js released version 5.0, I used PostCSS to solve the problem of using less and sass in Style-Jsx. The whole project used flexible + REM to be responsive, and I rewrote the Video-React component to be compatible with touch screen version. There are some business ideas that I think are good not to be repeated…

  21. Talk about the difference between REM and EM

    Rem is based on the font size of the root, em is based on the font size of the parent

A summary of

On the one hand, I occasionally showed myself in the interview by mentioning the open source project I had seen according to the interviewer’s questions. React (Redner process), Next (PostCSS for style-jsX writing less, isomorphic-fetch usage, etc.), Ant Pro (Lodash-decorators), etc

Second Round of written Examination

1. Implement the destructuringArray method to achieve the following effect

/ / destructuringArray ([1, 2, 4], 3], [c] a, [b], "");
// result
// { a:1, b:2, c:3 }
Copy the code

2. The threshold parameter is required to control the function call frequency

const yourFunction = function(func, threshold) {
 / / please
}
const triggerSearch = yourFunction((val) = > {
  const {
    onSearch
  } = this.props
  onSearch(val)
}, 300)
triggerSearch(searchText)
Copy the code

My answer (can not read, reality)

/ / 1
const targetArray = [1[2.3].4];
const formater = "[a, [b], c]";
const formaterArray = ['a'['b'].'c'];

const destructuringArray = (values, keys) = > {
  try {
    const obj = {};
    if (typeof keys === 'string') {
      keys = JSON.parse(keys.replace(/\w+/g.'" $& "'));
    }
    
    const iterate = (values, keys) = >
      keys.forEach((key, i) = > {
        if(Array.isArray(key)) iterate(values[i], key)
        else obj[key] = values[i]
      })
      
    iterate(values, keys)
    
    return obj;
  } catch (e) {
    console.error(e.message); }}console.dir(destructuringArray(targetArray,formater));
console.dir(destructuringArray(targetArray,formaterArray));

/ / the second question
const yourFunction = function(func, threshold) {
  let timeOut;
  return function() {
    if(! timeOut) { timeOut = setTimeout((a)= > {
        timeOut = null;
        func.apply(this.arguments)
      }, threshold)
    }
  }
}

const triggerSearch = yourFunction((val) = > {
  const {
    onSearch
  } = this.props
  onSearch(val)
}, 300)
triggerSearch(searchText)
Copy the code

Please post your answers in the comments section at 😀

Third round of telephone interview

Balabala talks a lot (I don’t talk much in life, I’m a bit introverted, haha). I also talk a lot about my career development and personal ideas…

Unfortunately, the three sides were hung up, and the feedback was too much to say the key point. In fact, now in retrospect, I think three should be the best performance of the side, when the face felt stable, ha ha 😀. Because it’s all about what I know, I can talk about any question for a few minutes, but that’s why interviews fail. Talking too much is not always a good thing. Sometimes you need to be brief and get to the point.

conclusion

A specialized subject is very lucky to experience in the front end of the half a year to ali’s interview, end is hung up, but it is not because of technical reasons, the heart is glad, and ali’s interviewers are very nice, surface finish will be timely feedback, when you are nervous will give you time to adjust, end not to also can give advice and encouragement. Finally, you should not forget to improve your ability to express yourself while enriching your technology 😝