current position:Home>Summary of front-end common interview questions (continuously updated ~ ~ ~)

Summary of front-end common interview questions (continuously updated ~ ~ ~)

2022-01-27 05:07:08 Mily_ k

promise

What is it?

Promise It's an object , It is generally used as a constructor (new Promise), It contains 3 States ,pending( In processing )、fulfilled( success )、rejected( Failure ).

How to use it?

To get a Promise After the instance , have then and catch Method , commonly then Get successful results in it ,catch Get the result of failure .

What problems have been solved

It mainly solves the problem of callback to hell , however Promise It doesn't simplify the code .

What's the alternative

So I usually cooperate when I work async/await To use , This not only solves the callback hell, but also simplifies the code .


rem

What is it?

REM Is a relative to the root element (HTML) A unit of font size .

How to use it?

Generally, we will do mobile terminal adaptation

1、 introduce flexible.js, It is divided by default 10 Share

2、 So the benchmark value is set to 75px( Divide the width of the measured design by 75 Turn into REM)

3、 because flexible It can dynamically calculate the font size of the root element according to the width of different devices , So what? ? The font size of the root element has changed , So all use REM The elements of the unit naturally change .

What problems have been solved

The problem of mobile terminal adaptation is solved .

What's the alternative

vw/vh


1、 After the user logs in successfully , Get user information , The user information contains the current user's == Authority sign ==.

await store.dispatch('user/getUserInfo')

2、 Based on the current == Authority sign == Filter out routes with permission ( Dynamic routing ).

const routes = await store.dispatch('permission/filterRoutes', roles.menus)

3、 Then I did 2 thing .

4、 The first 1 thing , Pass the filtered routes with permission through addRoutes Added to the router example , Purpose : In order to be able to access... Through the address bar .

router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }])

5、 The first 2 thing , Save the filtered routes with permission to Vuex One copy , Purpose : For the sidebar to be able to use .

//  In this  action  It's made in it 
const routes = await store.dispatch('permission/filterRoutes', roles.menus)

6、 The routing instance has been added , Why not get it directly from the routing instance ? Because by addRoutes The route added later cannot be accessed , Official suggestion put Vuex One copy .


Memory leak

Objects not in use , But it's not recycled (Garbage Collection), It's a memory leak .

Under what circumstances may cause memory leakage

  1. Unintentional global variable
//  Unintentional global variable , It will cause internal leakage 
function fn() {
    obj = {
        age: 18,
    }
}
//  The functions have been called , The internal object is not released 
fn()
console.log(obj)
function fn() {
    this.obj = {
        age: 18,
    }
}
fn()
  1. DOM quote
<button id="btn">btn</button>
<script>
    const oBtn = document.querySelector('#btn')
    oBtn.onclick = function () {
        console.log(1)
    }
    document.body.removeChild(oBtn)

    oBtn.click()
    oBtn.onclick()
</script>

solve

oBtn = null //  Hand release 

What is? webpack

webpack It's a packaging modularity JavaScript Tools for , stay webpack All the documents in are modules , adopt loader Convert files , adopt plugin Inject the hook , Finally, output the file composed of multiple modules ,webpack Focus on building modular projects ,webpack It can be regarded as a module packer : What it does is , Analyze your project structure , find javaScript Modules and other extensions that browsers can't run directly (Sass,TypeScript etc. ), And package it into a suitable format for browsers to use

copyright notice
author[Mily_ k],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270507027789.html

Random recommended