A front-end interview

I have been engaged in front-end development for some time, and my development level has not improved. I was quarantined at home recently for the epidemic. I reflected on my daily work and felt that there was a problem with my learning method. There is always input, but there is never output. Today I muster my courage and start writing my first output. One is to deepen the understanding of knowledge, and the other is to make a summary and induction of knowledge. The content of my article is to summarize personal knowledge points. If there is an incorrect understanding, I hope you can help me correct it. I will actively understand and digest, and hope to make progress with everyone.

1. What are the states of promise in es6? What problem can be solved?
(My answer: waiting state, satisfied state and rejected state.)
1.1 State:
① pending, waiting state, such as a network request in progress, or the timer has not expired.
② fulfill, the state of fulfillment. When we actively call back resolveet, we are in the fulfilled state and call back the .then() method.
③ Reject, reject status. When we actively call back reject, we are in reject status and call back the .catch() method.
1.2 Problems that
can be solved: ① Multiple concurrent requests can be supported to obtain return data.
② Solve the problem of callback hell

2. How to center a div horizontally and vertically?

(My answer: Knowing the width and height of the parent element and the child element, make the child element be centered horizontally and vertically within the parent element.)

<style>
    
      .parent {
       width: 500px;
       height: 500px;
       background-color: pink; 
       position: relative;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: deeppink;
        position: absolute;
        top: 200px;
        left: 200px;
      }
      
    </style>

For this answer, top and left were calculated through oral calculations when I answered, but they are not practical in actual development. The interviewer did not ask me if there are any other solutions. There are several ways to achieve vertical centering of elements.
2.1 Use positioning plus -margin:

	.parent {
       width: 500px;
       height: 500px;
       background-color: pink; 
       position: relative;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: deeppink;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -50px;   /* 这个值是-width/2*/
        margin-left: -50px;
      }

2.2 Use positioning plus margin: auto;

	.parent {
       width: 500px;
       height: 500px;
       background-color: pink; 
       position: relative;
      }
      .son {
        width: 100px;
        height: 100px;
        background-color: deeppink;
        display: inline-block;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
      }

3. How to understand the MVVM model?
(My answer: it is the model layer, the viewmodel layer, and the view layer. View and model do not interact directly. The viewmodel layer coordinates data in the middle)
:
Description: MVVM is the idea of ​​hierarchical development of front-end views, which mainly divides front-end pages into Model layer, ViewModel layer, View layer. The ViewModel layer is the coordinator of the Model layer and the View layer, and it provides two-way data binding of data.

4. What are the types of DOM?

(My answer: Document node, Node node, Element node.)

1. Element node Node.ELEMENT_NODE(1)

2. Attribute node Node.ATTRIBUTE_NODE(2)

3. Text node Node.TEXT_NODE(3)

4. CDATA point Node.CDATA_SECTION_NODE (4)

5. Entity reference name node Node.ENTRY_REFERENCE_NODE(5)

6. Entity name node Node.ENTITY_NODE(6)

7. Processing instruction node Node.PROCESSING_INSTRUCTION_NODE(7)

8. Comment node Node.COMMENT_NODE(8)

9. Document node Node.DOCUMENT_NODE(9)

10. Document type node Node.DOCUMENT_TYPE_NODE(10)

11. Document fragment node Node.DOCUMENT_FRAGMENT_NODE(11)

12. DTD declares the node Node.NOTATION_NODE(12)
    5. How does the native DOM get an element?
    My answer: document.getelementById, document.getelementsByxxx.
    Full answer:
    get by ID: getElementById

Get through the name attribute: getElementsByName

Get by tag name: getElementsByTagName

Get by class name: getElementsByClassName

Get an element through the selector: querySelector

Get a set of elements through the selector: querySelectorAll

Method to get html tags: document.documentElement

Method to get the body tag: document.body

6. There is a click event in native js. Should it be captured or bubbled first? What is capture? What is bubbling?
(My answer: first capture and then bubbling. Event triggering needs to go through three stages: event capture, triggering event, and event bubbling) I have
drawn a picture and
I have met two in total. These are all interview questions for the first company. The shortcoming of my interview is that all answers can only be done on the edge, and the answers are incomplete and in-depth.