This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

πŸ“’ Hello everyone, I am Xiao Cheng, a sophomore front-end enthusiast

πŸ“’ This article will discuss the understanding of several common interview questions

πŸ“’ Thank you very much for reading

πŸ“’ May you be true to yourself and love life

πŸ’‘ Knowledge points look first

  1. link 与 @importThe difference between
  2. Multiple ways to implement array de-duplication
  3. Tell me what you know about closures
  4. JavaScript for solving cross-domain problems
  5. Hooks benefits

Can you explain the difference between link and @import

When we first learned about the front end, we introduced CSS files via link, but later found that we could also introduce CSS files via @import

First of all, there are differences in their usage

From their usage, we can clearly see the difference between them

  1. link 是 htmlTag, it can not only loadCSSFile, you can also definerelConnection properties, etc., while@import 是 CSSThe import style sheet syntax is only useful
  2. When the browser loads the page, it loads synchronouslylinkThe introduction ofCSSFile,After the page is loadedAnd then to load@importThe introduction ofCSSstyle
  3. @importonlyIE5Above can be used, andlinkBetter compatibility
  4. JavaScriptCan only controldomchangelinkThe styles introduced without control@importThe style of the
  5. linkThe style weight is higher than@importThe weight of

How many ways do you have to implement array deduplication

Array de-emphasis is a lot of front-end application, although I can’t remember it for a while now, but really important

In this article, I will introduce some simple methods of de-duplication, but not the double-loop test

IndexOf deweighting

The core of this method is to use indexOf to determine whether the unknown index that appears in the array for the first time is equal to the current index. If the index is not equal, there is no duplicate index and delete it

The second type: filter

Use filter to filter the array

The third kind: Set

This method is easiest to write using the unique properties of a Set

There are countless ways to go heavy, the other will not be introduced, usually I use more is Set to go heavy

Tell me what you understand about closures

Everyone has a different idea of closures, so let’s take a look at some of the explanations in the books

Closures are functions that have access to variables in the scope of another function;

Technically speaking, all JavaScript functions are closures: they’re all objects, and they’re all associated with a scope chain.

Closures occur when a function can remember and access its lexical scope, even if the function is executed outside the current lexical scope.

These are the descriptions of the three front-end classics, from which we can conclude little.

Let’s talk about my understanding

A function that remembers and accesses variables outside its scope forms a closure with this variable, as an example: If you define A variable B in function A, and you want to access it outside of function A, you define A function C in function A, take B as the return value of function C, and return function C in function A

How many ways can you think of to solve the cross-domain problem?

Cross-domain problems are often encountered in the process of front and back end interaction. When we use scaffolding like React and Vue to build projects, we can easily solve cross-domain problems by configuring proxies. However, when we first learn front-end, this problem is really difficult. I haven’t used native JS to solve cross-domain problems, and I think many people have, so how do you solve cross-domain problems

First, cross-domain is caused by the same origin policy of the browser, which is a security function of the browser to prevent XSS and CSRF attacks. The so-called homology refers to the same protocol, domain name, and port. Even if two domain names point to the same server, they are still non-homology

First, let’s talk about

1. JsonpTo solve the cross domain

This takes advantage of a vulnerability in HTML tags

There are three tags that allow the Img, link, and script tags to load resources across domains

Jsonp uses script tags to load resources across domains, but this approach requires the cooperation of back-end servers and only supports Get requests

  1. First we need to declare a callback function in the front end
  2. throughparamsTo concatenate our request parameters inurlOn the path
  3. willurlAdded to thescriptOf the labelsrcOn the properties
  4. The server also needs to be specific to this type of request to receive and special processing, to get results

Therefore, there is no way to solve cross-domain problems through Jsonp if it is purely front-end

2. Implement CORS

This method is the simplest, only need to configure the back-end server access-Control-Allow-Origin to enable CORS, you can set which domain name can Access resources, so there is no front-end things,

3. Nginx reverse proxy

If the project is separated from the front end, we can configure the proxy in the Nginx configuration of the front end server

The front end first asks the front end server when configuring baseUrl and adds an identifiable suffix, such as/API

Configure it on the front-end server

4. Enable cross-domain in the browser

This approach is not recommended, because the cross-domain problem is caused by the browser’s policy, so we can find a way to turn off the browser cross-domain restrictions

How to close, oneself seek, closed unavoidably can give what problem, in the future may forget to open come back what, not good

That’s all I can think of, that I know about, and there’s a lot of other ways to do it, but I don’t know enough about it, so I don’t want to mislead you

Can you say something about the benefit of using Hooks?

The first and most obvious benefit is that the code is much smoother to write. Hooks don’t need to use life cycle hooks like componentWillMount compared to class-based components. Code is much freer and less restricted. The ability to implement 3 life cycles at a time with a single useEffect hook is very developer friendly.

In application, hooks no longer need to keep track of which hooks point to this. In class components, hooks need to keep track of which hooks point to this and cause problems

The biggest benefit of hooks is the reuse of components. For every place that a component is used, a separate memory space is created, just like calling a function

The code is highly readable, we do not need to use life cycle functions to achieve the convergence of functions, more convenient to read and maintain the code

The hooks implementation has helped us optimize a lot of code by using hooks to avoid repeating renderings of components and to control the number of times they are rendered. Hooks also provide hooks like useMemo useCallback for performance optimizations

So I feel that hooks are better than class-based components in terms of writing, readability, reusability, and (for the most part) performance

πŸ“– summary

I have thought a lot about these interview questions, and I have my own understanding of closures and hooks. Everyone has their own understanding, and I would like to hear yours

Finally, I am Xiao Cheng, welcome to pay attention to this column, keep paying attention to the latest articles ~ wish you get your desired offer

Finally, I may not be clear enough in many places, please forgive me

πŸ’Œ if the article has any mistakes, or have any questions, welcome to leave a message, also welcome private letter exchange