Front end factory interview questions

Posted by kind on Fri, 14 Jan 2022 11:52:25 +0100

------------Restore content start------------

The front-end 14 large factories had 1-week interview questions, and job hopping was stable

Summary of knowledge points mastered in front-end development:

HTML & CSS: Browser kernel, rendering principle, dependency management, compatibility, CSS syntax, hierarchical relationship, common attributes, layout, selector, weight, CSS box model, Hack, CSS preprocessor, CSS3 animation

JavaScript: data type, operation, object, Function, inheritance, closure, scope, event, Prototype, RegExp, JSON, Ajax, DOM, BOM, memory leak, cross domain, asynchronous request, template engine, modularization, Flux, isomorphism, algorithm, ES6, ES7, ES8 features, Nodejs, HTTP

Framework and class libraries: ajax, jQuery, Bootstrap, axios, Vue, Vuex, React, element UI, layui, webpack

1, Millet

1. css implementation of image adaptive width and height

The general practice is as follows

1 <style>
2     div{width: 200px; height: 200px}
3     div img{width: 100%; height: 100%}
4 </style>
5 <div>
6     <img src="xxxx.png" />
7 </div>

However, if the width and height of the outer element are inconsistent with the picture, the picture will be stretched or contracted, making it ugly. So you can fill the entire outer element with part of the picture

 1 <style>
 2     div{
 3         width: 200px;
 4         height: 200px;
 5         background: url('xxxx.png') no-repeat;
 6         background-size: cover;
 7         background-position: center center;
 8     }
 9 </style>
10 <div></div>

2. Talk about flex, write out the common attributes of flex, and talk about the function

Flex direction: row / row reverse / column / column reverse determines the direction of the main axis (i.e. the arrangement direction of items)

Flex Wrap: Wrap / nowrap / wrap reverse determines how items are arranged

　　flex-basis: number|auto|initial|inherit; Specifies the initial length of the elastic item.

　　flex-grow: number|initial|inherit; Specify the increase of items relative to other elastic items in the same container.

　　flex-shrink: number|initial|inherit; Specify the shrinkage of the item relative to the remaining elastic items in the same container.

Flex flow < flex direction > | < flex wrap > the first two abbreviations. The default is flex flow: row nowrap;

Justify content: Flex start / flex end / Center / space between / space around

* space between: both ends are aligned, and the spacing between items is equal.
* space around: the spacing on both sides of each item is equal. Therefore, the interval between items is twice as large as that between items and borders.

Align items: Flex start / flex end / Center / baseline / stretch defines how items are aligned on the cross axis
* baseline: the baseline alignment of the first line of text of the project.
* stretch (default): if the project is not set to height or set to auto, it will occupy the height of the whole container.

Align content: Flex start / flex end / Center / space between / space around / stretch defines the alignment of multiple axes. This property has no effect if the project has only one axis.

3. What is BFC

① what is BFC: BFC (Block Formatting Context) formatting context is the CSS rendering mode of box model layout in Web pages, which refers to an independent rendering area or an isolated independent container.

② conditions for forming BFC:

1. Floating element, float values other than none;

2. position (absolute, fixed);
3. display is one of the following values: inline block, table cell, table caption;
4. overflow values other than visible (hidden, auto, scroll);

③ characteristics of BFC

　　　　1. The inner boxes will be placed one by one in the vertical direction.
　　2. The distance in the vertical direction is determined by margin
　　3. The area of BFC does not overlap the element area of float.
　　4. When calculating the height of bfc, floating elements also participate in the calculation
　　 5.bfc is an independent container on the page. The child elements in the container will not affect the external elements.

See details https://www.cnblogs.com/chen-cong/p/7862832.html

4. How is front-end authentication implemented in the project?

Use vuex to save the global state and persist the data

The token variable is defined in vuex to indicate whether the user logs in. The initial value is ""

 1 import createPersistedState from 'vuex-persistedstate'
 2 
 3 export default new Vuex.Store({
 4       state: {
 5         token: '',
 6       },
 7       mutations: {
 8         setIsLogin(state, isLogin) {  //Login successfully called
 9           state.token = isLogin;
10         },
11         FedLogOut(state) {        //Exit login execution
12           state.token=''
13         }
14       }
15     actions,
16     getters,
17     plugins:[createPersistedState({  //vuex Data solidification to local cache, data persistence
18         storage: window.localStorage
19     })] 
20 });

Configure request Interceptor: request Interceptor: unified processing before sending the request, such as setting request header, application version number, terminal type, etc.

 1 service.interceptors.request.use(
 2   config => {
 3     if (store.state.token) {
 4      // For the request header object, add token Verified Authorization field
 5      config.headers.Authorization = store.state.token;     
 6     }
 7         return config
 8   },
 9   error => {
10     // do something with request error
11     console.log(error) // for debug
12     return Promise.reject(error)
13   }
14 )

Response response Interceptor: sometimes we need to perform the next operation according to the status code of the response. For example, because the current token expires and the interface returns 401 unauthorized, we need to log in again.

 1 service.interceptors.response.use(
 2   response => {
 3     Toast.clear()
 4     const res = response.data
 5     if (res.status && res.status !== 200) {
 6       // login timeout ,token After expiration, return to 401 and log in again
 7       if (res.status === 401) { 
 8         store.dispatch('FedLogOut').then(() => {
 9                 router.replace({
10                 path: '/login'
11                 //After successful login, jump to the current page
12                 // query: {redirect: router.currentRoute.fullPath}
13             })
14         })
15       }
16       return Promise.reject(res || 'error')
17     } else {
18       return Promise.resolve(res)
19     }
20   },
21   error => {
22     Toast.clear()
23     console.log('err' + error) // for debug
24     return Promise.reject(error)
25   }
26 )

5. What happened to the virtual dom in vue?

When you use native js or jquery libraries to operate DOM, the browser will start with building the DOM tree and execute the whole process. Therefore, frequent operation of DOM will cause unnecessary calculations, resulting in page jamming and affecting the user experience

The implementation principle of virtual DOM mainly includes the following three parts:

- The real DOM tree is simulated with JavaScript objects to abstract the real DOM;
- diff algorithm - compare the differences between two virtual DOM trees;
- pach algorithm - applies the difference between two virtual DOM objects to a real DOM tree.

6. vue bidirectional binding

The two-way data binding of vue is mainly through object The defineproperty () method is used for data hijacking and the publisher subscription mode. When vue instantiates, it will traverse all properties and add get and set methods to these properties for data hijacking;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>forvue</title>
 6 </head>
 7 <body>
 8   <input type="text" id="textInput">
 9   Input:<span id="textSpan"></span>
10   <script>
11     var obj = {},
12         textInput = document.querySelector('#textInput'),
13         textSpan = document.querySelector('#textSpan');
14 
15     Object.defineProperty(obj, 'foo', {
16       set: function (newValue) {
17         textInput.value = newValue;
18         textSpan.innerHTML = newValue;
19       }
20     });
21 
22     textInput.addEventListener('keyup', function (e) {
23         obj.foo = e.target.value;
24     });
25 
26   </script>
27 </body>
28 </html>

Use object Defineproperty() to define the set function of the property. When the property is assigned, modify the value of input and innerHTML in span; Then listen to the keyup event of input and modify the attribute value of the object to realize such a simple two-way data binding.

7. Handwritten function anti shake and function throttling

Function throttling: after a function is triggered continuously, it will be executed for the first time, and the second time will be executed only after it is greater than the set execution cycle

　1 /* 
 2             Throttling function: fn: the function to be throttled, delay: the specified time
 3         */
 4        function throttle(fn,delay){
 5             // Record the time of the last function departure
 6             var lastTime = 0
 7             return function(){
 8             // Record the time when the current function is triggered
 9             var nowTime = new Date().getTime()
10             // This function is triggered when the current time minus the last execution time is greater than the specified interval
11             if(nowTime - lastTime > delay){
12                 // binding this point
13                 fn.call(this)
14                 //Synchronization time
15                 lastTime = nowTime
16             }
17             }
18        }

Function anti shake: continuously trigger a function to make it effective only for the last time within the specified time, and none of the previous functions will be effective

　1 function debounce(fn,delay){
 2            var timer = null
 3         //  Clear last time delay
 4           return function(){
 5                clearTimeout(timer)
 6               //  Reset a new time delay
 7               timer = setTimeout(() => {
 8                   fn.call(this)
 9               }, delay);
10           }
11        }

8. ES6 syntax, such as promise, class, and so on

promise see https://www.cnblogs.com/Blod/p/15801202.html

class see https://www.cnblogs.com/Blod/p/15801399.html

Topics: Front-end

Programmer Think