Front-end interview basics (1 year for domestic demand)

Jin SAN Yin Si company asked me to interview the first one year experience, I hereby spend some time to study the interview questions, recently sorted out to share, let more friends see, in my opinion, these basic knowledge points are essential

Common CSS Layouts

Problems with inline-block and solutions

• Horizontal gap problem This is because when writing code, input Spaces and newlines produce whitespace. Browsers do not ignore whitespace and automatically merge multiple consecutive whitespace into one, resulting in so-called gaps.

Generally speaking, there are two ways to get rid of the newline gap: code does not wrap and font size.

This gap is removed by setting the font size of the parent element to 0, and then resetting the font size of the child element to restore the child element literal characters. Just set inline-block to remove the gap

Float Clear floating details

The main purpose is to solve the problem of overlapping elements or height collapse of parent elements caused by floating elements leaving the text stream

• Clears the previous sibling element float

Clearing the previous sibling float is as simple as using clear:both on elements that do not want to be affected by the float element

• Closed child element floats

1. Setting clearFix for elements is commonly used

The famous Clearfix method implemented through the pseudo-element (::after) of the parent element looks like this: <div class="container clearfix">
    <div class="box"></div>
</div>
.clearfix::after {
    content:""; display:table; clear: both; } adds a clearFix class name to the parent element that handles closed child element floats, using the ::after pseudo-element class selector to add an empty structure to clear the float.Copy the code

2. Create a NEW BFC for the parent (Block Formatting Context)

Please explain the location method in detail

Achieve a popover full screen in the middle effect.

1. Div uses absolute layout, setmargin:auto;And set theTop, left, right, bottomIt doesn’t have to be all 0.

.center{
    text-align: center; /* Center the text inside the div */
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
Copy the code

2. In the absolute layout, the left and top are both 50%. This will make the far left of the div 50% away from the far left of the screen in the horizontal direction, which is the same in the vertical direction, so use the transform to shift its width (height) 50% to the left to achieve the effect of center, the effect is the same as the top.

.center{
    text-align: center;
    background-color: #fff;
    border-radius: 20px;
    width: 300px;
    height: 350px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(50%, 50%); }Copy the code

Name a few common selectors

Five categories of selectors:

1. Basic selector

• Element selection (Gets the element name directlyP, h1(Too direct)
• ID selection (#id) [Unique value cannot be reused]
• Class selection (.class(combination, reuse)
• *Universal selector (all elements)

2. Relational selector

   

3. Pseudo class selector

• :nth-child(n) :n can be a number (4), keyword (old,even), or formula (2n+1)
• :active: Adds the style to the active element
• :focus: Adds the style to the selected element
• :hover: Adds styles when the mouse hovers over an element
• :link: To add a link that has not been accessed
• :visited Adds a link to a visited one
• :first-child: the first child added to the element
• :lang: Defines the language used

4. Pseudo-element selectors :first-letter :first letter to add to text :first-line :first line to add to text :before: insert something before an element :after: insert something after an element

5. Property selector

   

Talk about the new features of CSS3

1. HTML5 Semantic Elements
2. HTML 5 Web store

• SessionStorage: client data storage, which can only be maintained within the current session range.
• LocalStorage: client data store that can hold multiple sessions. Object storage data has no time limit. IndexDB is generally used for large and complex data structures

3. CSS3 @media all and(min-width:800px){… }
4. CSS3 transform and transform: transform
5. CSS3 transition
6. CSS3 animation: animation

Asynchronous request implementation

1. The original js,new XMLHttpRequest();// For browser compatibility reasons, the code is complex, using jquery-based asynchronous request method (internal encapsulation)
2. Jquery-based Ajax methods:
3. Vue – axios (promise)

Talk about their own code debugging methods

JS array manipulation

• Concat () joins two or more arrays and returns the result
• Join () splits and concatenates an array into a string by specifying delimiters
• Pop () removes and returns the last element of the array
• Push () adds one or more elements to the end of the array and returns the new length
• Reverse () reverses the order of the elements in the array

Jq DOM selector, DOM document operation

• Append () : Inserts the content specified by the argument to the end of the element.
• Prepend (): Inserts the content specified by the argument to the beginning of the element.
• After () : Inserts content after matched elements.
• Before (): Inserts content before each matched element.
• AddClass (): adds the specified class name to the matched element.
• Attr () : Sets or returns the attributes and values of the matched elements.
• RemoveAttr (): Removes the specified attribute.

Advantages of the Vue framework

1. The MVVM: Model layer represents the data Model, where you can also define the business logic for data modification and manipulation; A View represents the UI component that is responsible for converting the data Model into a UI presentation. A ViewModel is an object that synchronizes the View and Model.

2. MVC and MVVM are not that different. It’s all a design idea. Basically, the Controller in MVC morphed into the viewModel in MVVM. MVVM mainly solves the problem that a large number of DOM operations in MVC reduce page rendering performance, slow loading speed and affect user experience.

Different from VUE data driven, the view layer is displayed through data rather than node operations. Scenario: A scenario in which many data operations are performed

Vue life Cycle

• BeforeCreate: initializes part of the forecreate parameters. If the forecreate parameters have the same values and are combined, run the beforeCreate command. El and data objects are undefined and not initialized;

• Created: Initializes Inject, Provide, props, methods, data, computed, and watch, and executes created. Data has it, EL doesn’t;

• BeforeMount: Checks whether there is an EL attribute. If there is an EL attribute, perform dom rendering and run beforeMount. $EL and data are initialized, but the DOM is still a virtual node, and the corresponding data in the DOM has not been replaced.

• Mounted: instantiate Watcher, render DOM, execute mounted; The vue instance is mounted, and the corresponding data in DOM is rendered successfully.

• BeforeUpdate: Execute beforeUpdate during data updates after dom rendering and after mounted hook is executed.

• Updated: Checks the current watcher list to see if the watcher to be updated exists.

• BeforeDestroy: checks whether it has been uninstalled. If it has been uninstalled, return directly. Otherwise, run beforeDestroy.

• Destroyed: to delete all traces of oneself;

Git git

git cloneGit commit -m commit with a message Git push Git pullCopy the code

About 10,000 interviews

Reproduced please annotate source thank you ~ feel helpful might as well circle, late release front-end knowledge