This is the seventh day of my participation in the August More text Challenge. For details, see:August is more challenging

It’s time to send in the long-lost interview oriented review method!

Directory:

  1. HTML report
  2. CSS article
  3. JS article
  4. DOM article
  5. HTTP post
  6. Vue2 article
  7. Security paper
  8. Browser Compatibility

An HTML report

1. What is HTML semantics?

A: Using HTML tags with appropriate semantics, such as

for paragraphs,

2. What does the Meta viewport do?

Use: Control the page on the mobile terminal not to zoom out display.

3. What HTML5 tags have you used?

A: Content related to the

,

content, side

Function related to the < Canvas >,

4. What is H5?

A: the H5! = HTML5, H5 is a mobile page, does not have to use HTML5 syntax page to be H5.

2. The CSS

1. Talk about the two box models

A: Width of content-box == Width of content area

Border-box width == Content area width + padding width + border width

Switch between the two box models using the Box-sizing property

2. How is the level in the middle? How do I center it vertically?

Horizontal center:

  • Inline element horizontal center: sets text-align: center on the parent element;
  • Block level element horizontal center: margin: 0 auto;

Vertical center:

The CSS is vertically and horizontally centered

3. How to use Flex? What are the common properties?

Flexbox flexible layout summary

4. What is BFC?

A: THE BFC is the block formatting context.

For example, if you give a div an overflow: hidden; (Clear float) The floating elements in this div will be wrapped around the div.

Conditions for BFC formation:

  • floating
  • Absolute positioning, fixed positioning
  • Overflow values other than the default (visible) : hidden, auto, scroll
  • display : inline-block
  • , etc.

5. CSS selector priority?

Weight method (CSS2) : Inline style is 1000 > ID selector is 100 > class selector is 10 > element selector is 1

More accurate judgment (CSS3) :

  1. The more specific the selector (the greater the sum of the weights), the higher the priority
  2. The CSS written in the back overrides the CSS in the front
  3. ! “Important” has the highest priority, but you are advised to use it sparingly.

6. Clear floating code?

The parent element adds the following code, and the child element clears the float:

.clearfix::after {
  content: ""; / / an empty string
  display: block; // Display as block-level elements
  clear: both; // Clear the effect of floating on both sides
}

.clearfix {
     zoom: 1; / / IE compatibility
 }
Copy the code

Or directly: overflow: hidden; But it’s not recommended.

3. JS

1. What do you know about ES6 Grammar? How does it work?

Summary of new features of ES6

2. How do you use Promise?

1. Promise is a Promise.

$.ajax(…) .then(success function, failure function)

The use of chained THEN:

$.ajax(…) .then(success function 1, failure function 1).then(success function 2, failure function 2)

Other methods, such as promise. all, promise. race, suggest reading straight through:

ES6 Standard introduction – Promise – Ruan Yifeng

3. How to generate a Promise object

// Memorize the code
function fn(){
  return new Promise(function(resolve, reject) {
    setTimeout(() = > {
      // resolive() 或者 reject()
    }, 3000)})}// Then we can do that
fn().then(...)
Copy the code

4. What about async/await syntax? What’s the purpose?

Purpose: Write asynchronous code into synchronous code

// The old way of writing (asynchronous) :
function fn() {
  return new Promise(function(resolve, reject) {
    setTimeout(() = > {
      resolive('Hahaha')},3000)
  })
}

fn().then((res) = > {
  res === 'Hahaha' // true
})

// New style of writing (synchronous) :
async function fn2() {
  var res = await fn();
  res === 'Hahaha' // true
}
Copy the code

5. Handwriting function stabilization and function throttling

Throttling function

Think of it as the cooldown on the GAME’s CD, and when a skill is in its cooldown, it is not used.

function fn() {
  // Game skills
}

var cd  = false; // Whether it is cooling

button.onclick = function() {
  if (cd) {
    // Cannot use skills
  } else {
    fn(); // Use skills
    cd = true; // Enter the cooldown
    var timerId = setTimeout(() = > {
      cd = false
    }, 3000) // The skill will be available after 3 seconds}}Copy the code

Image stabilization function

Imagine a situation where a user enters a piece of data and we need to validate it, but it would waste our computer resources to do so continuously. So we want to wait for the user to enter the data, and then wait for 2s to verify. If the user updates the input data between 2s, then 2s will be timed again.

function fn() {
  // The code to execute
}

var timerId = null;

button.onclick = function() {
  if (timerId) {
    clearTimeout(timerId); // Stop the previous timer
  }
  timerId = setTimeout(() = > { // Restart the timer
    fn();
    timerId = null;
  }, 2000)}Copy the code

6. Handwritten Ajax

Getting Started with Ajax

7. What does this point to in the code?

  • This in fn() is window
  • This in obj.fn() is obj
  • This in new Fn() is the newly generated object
  • () => this inside {} is the same as this outside the arrow function
  • Fn. Call (xx) this is xx
  • Fn. Apply (xx) this is xx
  • This in fn.bind(xx) is xx

For example:

var obj = {
  foo: function() {
    console.log(this)}}var bar = obj.foo
obj.foo() // This is printed as obj
bar() // This is printed as window
Copy the code

8. What are closures? What is the immediate execution function?

closure

9. What is cross-domain? The json? What is CORS?

Cross domain

10. What are the data types in JS?

A: There are seven basic data types: String, Number, Boolean, null, undefined, Symbol, BigInt, and one reference type: Object.

11. How to implement deep copy?

JSON method (disadvantages, such as a cannot have a function) :

vara = {... }var b = JSON.parse(JSON.stringify(a))
Copy the code

Recursive copying:

function clone(obj) {
  if(Array.isArray(obj)){
    var copy = [];
  }else{
    var copy = {};
  }
  for (let i in obj) {
    if (obj.hasOwnProperty(i)) {
      copy[i] = typeof obj[i] === 'object'? clone(obj[i]) : obj[i]; }}return copy;
}
Copy the code

Ring:

/ / not
Copy the code

12. How to deduplicate an array

Set to:

var a = [3.4.6.3.5.4]
Array.from(new Set(a)) // [3, 4, 6, 5]

[...new Set(a)] // Remove Set from ES6 syntax
Copy the code

Stupid way:

// Use a double loop to extract data from the original array and compare it with the existing data in the new array
Copy the code

13. Implement string.trim() with regular expressions

function trim(string) {
  return string.replace( /^\s+|\s+$/ ,' ');
}
Copy the code

14. The prototype? Prototype inheritance? The Class inheritance?

Initial knowledge of JS prototype/prototype chain/prototype inheritance

15. Questions about ==

Example :(a==1 && a==2 && a==3) can be true?

A: Maybe.

Example: null == undefined?

A: true,

16. Write a Promise by hand

// Google it
Copy the code

4. The DOM

1. What is the DOM event model?

Answer what is bubbling and capture can be.

2. What is event delegation? What are the benefits?

Answer: Do not directly listen to the child element, but listen to the parent element, only need to determine which “son” triggered the event after listening.

Benefit: listen to all the “sons” at once, even the dynamically generated “sons” can also be listened to.

5. The HTTP post

Common HTTP status code

6. Vue2 articles

1. Life cycle

A: Created (called immediately after the instance is created), Mounted, updated, destroyed (called after the Vue instance is destroyed) and other lifecycle hook functions.

2. Communication between components

A: Father-son communication (using Prop to transfer data, using V-ON binding custom events), brother communication (new Vue() as Bus or Vuex), grand-grandson communication (grandpa – > dad – > son communication in turn, or just using Vuex state manager solutions)

3. What is the principle of data response

Simple summary: When a JS Object is passed to a Vue instance as the data option, Vue will walk through all the properties of the Object and use object.defineProperty () to turn them into getters/setters. These gettet/ setters are not visible to the user, but internally they allow Vue to track dependencies and notify changes when properties are modified.

4. What is the difference between computed and methods and watch?

Calculate attributes vs method:

  • The difference is that computed attributes are cached based on their dependencies. A computed property is reevaluated only if its associated dependencies change.
  • Every time a re-render is triggered, the calling method will always execute the function again.

Evaluate properties vs listeners

  • Using the Watch option allows us to perform an asynchronous operation (access an API), limits how often we perform the operation, and sets the intermediate state until we get the final result. This is something that computational properties cannot do.

5. What is vue. set for?

Answer: Add a property to the responsive object and make sure that the new property is also responsive and triggers view updates. If you add a property to an object in the normal way, the new property will not be responsive.

6. What does Vuex do? How would you use it?

A: Vuex is a state management pattern developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application, and rules to ensure that the state changes in a predictable manner.

When I develop a blog, I put the user’s “logged in or not” status into Vuex for all components to access and modify.

7. What is a VueRouter? How would you use it?

A: It’s the official routing manager for vue.js, and it makes it easy to build single-page applications.

I’m working on a single page application, but when I want to achieve multiple pages, I’ll map each page to its components, and then I’ll manage them with a route, so I get a single page application.

Safety

1. What is XSS? How to prevent it?

Name: Cross-site scripting Attack (XSS) example: Using a client-side scripting language, Posting a malicious JavaScript code in a forum post is a script injection, if the code content requests an external server, then it is called XSS! Prevention: filter special characters such as Angle brackets and script (replace < with <)

2. What is CSRF? How to prevent it?

Name: cross-site request forgery Example: Impersonate a user to initiate a request (without the user’s knowledge) and complete some requests against the user’s will (such as malicious Posting, deleting posts, changing passwords, sending emails, etc.). Prevention: add picture verification code, SMS verification code; Performing the Token Check

Viii. Browser compatibility

  • Margin and padding are different by default. *{margin:0; padding:0; } to unify.
  • Margin-left and margin-right of two adjacent div s do not overlap, but margin-top and margin-bottom do.