Today I would like to summarize my first experience in goose factory. It is a remote video interview. The latest interview time was originally 7:00, but because I was still working as an intern and didn’t get off work until 6:30 in the evening, the interviewer helped me to postpone the interview to 8:00. In general, the interview is not difficult to ask questions, the interviewer is also very good, although before the interview to be ready to be abused, but the real interview, the state of mind is not straighten out or nervous, the answer is not good, autumn recruit the first battle is cool.

directory

  • Asynchronous processing of the process of development
  • Front-end cross – domain problem handling methods
  • What is a pre-request and when is it triggered
  • ES6 class declarations differ from constructor stereotype inheritance
  • How does a subclass call a method of the same name as its parent
  • Tell me about your project and what modules you did
  • Any questions you want to ask

Asynchronous processing of the process of development

As we all know, JS is a single thread execution environment, the reason is that JS was originally used for simple browser interaction, manipulation of the DOM, if the design of multiple threads, manipulation of the DOM may have problems, such as one thread reading DOM node data, another thread deleted the DOM node. So designers think that js thread is enough, the code is executed step by step in sequence; However, if a task takes a long time, subsequent tasks must wait in line, which may cause browser unresponsiveness and poor user experience. In order to solve this problem, the EXECUTION mode of JS language is divided into two types: synchronous and asynchronous. On the browser side, long operations should be performed asynchronously. There are several ways to handle asynchrony:

The callback function

What is a callback function? A callback is a function that is passed as an argument to another function and then executed after that function has finished executing.

For example, if you have two functions, f1 and f2, and the latter waits for the result of the former, if F1 is a time-consuming task, consider rewriting f1 to write F2 as the f1 callback

function f1(callback){
    // Put the code into asynchronous processing
    setTimeout(function () {
    // the code for f1
    callback()
    }, 1000);
}

f1(f2)
Copy the code

The callback hell problem can occur when multiple callbacks are nested

Conclusion: Callback function is the basic way of asynchronous programming. Its advantages are simple and easy to understand, but its disadvantages are highly coupled code and chaotic flow, which does not conform to our way of thinking.

Event listeners

This approach is event-driven, where the execution of tasks depends not on the order of the code but on whether the events that are being listened for happen. Again, take F1 and F2 as examples, adopt event listening and rewrite as:

// Set the listening event
f1.on('done', f2)
function f1 () {
    // the code for f1
    // Trigger an event after executing code
    f1.trigger('done')}Copy the code

Summary: This approach can bind multiple events, each event can specify multiple callback functions, and see that the code is loosely coupled, which is good for modularity; The downside is that the entire program becomes event-driven and the flow may become unclear

Promise

Promise is an asynchronous programming option added to ES6

For those of you who haven’t seen Promise yet, here’s the portal

Rewrite the above example using Promise

var p = new Promise((resolve, reject) = > {
    setTimeout((a)= > {
        // the code for f1
        console.log('start f1')
        // After execution
        resolve('success')},1000)
})
p.then(f2)
Copy the code

When there are multiple callback functions

f1().then(f2).then(f3)

Conclusion: With Promise, the callback function can be written as a chain call, and the program execution flow is clear

async await

Await syntax is an asynchronous programming style identified in ES2017 that can write asynchronous code as if it were synchronous code

Take a chestnut

function getCode(){
  return axios.get('json/code.json');
}
function getlist(params){
  return axios.get('json/person.json',{params})
}

/ / promise

function getResult () {
    getCode().then(res= > {
        const res = res.data
        if (res.code) {
            const params = res.id
            getList(params).then(list= > {
                console.log('Get the final data' + list)
            })
        }
    })
}
getResult()

/ / await processing

async function getResult () {
    const res = await getCode()
    const params = res.data.id
    const list = await getList(params)
    console.log('Get the final data' + list)
}
Copy the code

Await means wait, it wraps the following function as a Promise, await will throw an error if the Promise is rejected, otherwise it will return the promised value. As we can see from the above, await handles asynchrony more elegantly than Promise

Front-end cross – domain problem handling methods

I’ve summarized this problem before. Portals

What is a precheck request and when is it triggered

I didn’t know much about this question before, didn’t answer it, a little embarrassed

Preflight request is a requirement of the Cross-domain Resource Sharing (CORS) standard specification. For HTTP request methods that may cause adverse effects on server data (especially HTTP requests other than GET), the browser must first initiate a preflight request using the OPTIONS method. To know whether the server allows the cross-domain request

Conditions for sending precheck requests

  • Using thePUT.DELETE.CONNECT.OPTIONSThe HTTP methods, such as
  • It’s set up artificiallyCORSSecure header field collectionOther header fields
  • The value of the content-type is not one of the following:
    • application/x-www-form-urlencoded
    • multipart/form-data
    • text/plain

Take an HTTP request that needs to perform a precheck request

var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/post-here/';
var body = '
      
      
       
        Arun
       
      ';
    
function callOtherDomain(){
  if(invocation)
    {
      invocation.open('POST', url, true);
      invocation.setRequestHeader('X-PINGOTHER'.'pingpong');
      invocation.setRequestHeader('Content-Type'.'application/xml'); invocation.onreadystatechange = handler; invocation.send(body); }}Copy the code

The sent precheck request carries the following two header fields:

Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type
Copy the code

The response to the precheck request is:

Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
Copy the code

ES6 class declarations differ from constructor stereotype inheritance

The main differences are:

  • Class expression/class declared functions are not promoted, familiar with let, there is a temporary dead zone
  • The code runs automatically in strict mode and cannot exit
  • Can not lacknewcall
  • classThe class name cannot be overridden inside the function
  • None of the methods of the class[[constuct]]Pointer, that is, cannot be usednewCalled, not enumerable
  • Can dynamically decide which classes to inherit becauseextendsAccept any can return with[[Construct]]Property function expression

The above is my summary of the differences between the two, any omissions or errors welcome to mention

How does a subclass call a method with the same name as its parent?

The method of ES5

let person = {
    sayHello () {
        return 'Hello'}}let friend = {
    sayHello () {
        return Object.getPrototypeOf(this).sayHello.call(this)}}Object.setPrototypeOf(friend, person)
console.log(friend.sayHello()) // Hello
Copy the code

The method of ES6

let person = {
    sayHello () {
        return 'Hello'}}let friend = {
    sayHello () {
        return super.sayHello()
    }
}

Object.setPrototypeOf(friend, person)
console.log(friend.sayHello()) // Hello
Copy the code

Tell me about your project and what modules you did

This will not say ~

Any questions you want to ask

The interview lasted for about 40 minutes and I didn’t perform well in the whole interview. When the interviewer asked me if I had any questions, I wanted to be direct and asked if I had the chance to enter the next round of interview. The interviewer said he had to go back and evaluate it

conclusion

Although the interview failed, it was a good experience in general, and I found some shortcomings of myself. It will soon be September, so let’s calm down and prepare for autumn recruitment