preface

Take stock of your usual interview questions at work

Part I HTML5+CSS

1. What is margin merging? The vertical margin folding of multiple adjacent normal streams is called margin merging.

2. How do I center a div box of indeterminate width horizontally and vertically?

.father{
  position:relative;
}
.son{
    position:absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
Copy the code

The second part is JS

What is deep copy and shallow copy?

Deep copy: redistributes memory in the heap without affecting each other. Shallow copy: only references are copied

2, Null and undefined difference?

Null is an object representing “none” and is zero when converted to a value; Undefined is a primitive value for “none”, which is NaN when converted to a value. Both are false when converted to booleans.

The typical use of null: (1) as an argument to a function, indicating that the argument to the function is not an object. (2) as the end of the object prototype chain.

The typical use of undefined: (1) when a variable is declared but not assigned, it is undefined. (2) When the function is called, the argument that should be provided is not provided, which is equal to undefined. (3) The object has no assigned attribute. The value of this attribute is undefined. (4) If the function does not return a value, undefined is returned by default.

What is a closure?

An inner function that always has access to parameters and variables declared in the outer function is called a closure.

Pros and cons of closures:

Advantages:

1: Variables are stationed in memory for a long time. 2: avoid pollution of global variables; 3. The existence of private members.

Disadvantages: will increase the memory usage, improper use will cause memory leakage.

Solution: Delete all unused local variables before exiting the function.

4. What does the js new operator do?

New creates an empty object whose prototype points to the constructor’s proType, which is returned when the constructor is executed.

The code is as follows:

var Func=function(){
 
};
 
var func=new Func ();
Copy the code

The new operator goes through four stages: (1) Creating an empty object

var obj = new Object();
Copy the code

(2) Set the prototype chain

obj._proto_ = Func.prototype;  
Copy the code

(3) Make Func’s this point to obj and execute the function body

var res = Func.call(this);  
Copy the code

(4) Determine the type of return value res

If (typeof(res)=="object"){// return object func = res}else{// Return obj func = obj} if(typeof(res)=="object"){// Return obj func = obj}Copy the code

By default, the function returns undefined, that is, if the return value is not defined, except for the constructor, which by default returns the newly created object without a return.

However, in the case that a return value is displayed, if the return value is of the basic data type {string, number, NULL, undefined, Boolean}, the return value is still the newly created object.

The return value of the function is the specified object only if the display returns a non-basic data type. In this case, the value referenced by this is discarded.

5. Talk about the understanding of this

The direction of this is determined not at writing time, but at execution time, and the different directions of this follow certain rules.

1. Determine during execution:

Function foo(){console.log(this.age)} obj = {age:12, foo:foo} obj.foo()// The called position is owned by the object obj, so the result is 12Copy the code

2. This of new refers to the new object

var Function = function(name){
   this.name = name
   console.log(name)
}
var func = new Function('hi')//hi
Copy the code

The this of an arrow function refers to its context, that is, its parent.

The third part is Vue

1. Why must data be a function in Vue components?

The value of data in a VUE component cannot be an object because objects are reference types and components may be referenced by multiple instances at the same time. If the value of data is an object, multiple instances will share the same object, and one component will change the value of the data attribute, affecting the other instances as well.

2. Vue.nexttick (

(1) What is vue.nexttick ()? The official documentation explains as follows: A deferred callback is performed after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM.

Hence the Vue method for getting the updated DOM. So what you put in the vue.nexttick () callback should be js code that manipulates the DOM.

(2) Usage scenario: DOM operations performed by created() hooks in the Vue lifecycle must be placed in the vue.nexttick () callback function

(3) Created () hook is created without DOM rendering and DOM manipulation is useless, so it is important to put the JAVASCRIPT code for DOM manipulation into the view.nexttick () callback. The equivalent is the Mounted hook function, which executes when all DOM mounting is complete.

In short, a series of JS operations on the DOM are put into the vue.nexttick () callback whenever an action changes the structure of a DOM element.

Code sample

<template>
	<div id="msg">hello world</div>
</template>
<script>
  export default{
  	created(){
      	     this.$nextTick(() = >{
          	  console.log(document.getElementById('msg').innerText)
          })
      }
  }
</script>
Copy the code

2. Use of vue.set ()

Usage Scenario In a Vue project, after adding attributes to an object of data, the view is not updated?

Why is that? This is because due to javascript limitations,vue.js cannot listen for object properties to be added or removed. Getter and setter methods are called during vUE component initialization, so properties must be present in the object from the beginning for the view layer to respond to changes in the data.

The vue.set () method is used to solve this problem. For example, if we need to add the Hobby property to a student object, we could say:

this.$set(student,'hobby','reading')
Copy the code

Another way is:

this.student.hobby = 'reading'
this.student = Object.assign({},this.student)
Copy the code

Why do these two approaches solve these problems?

Because we add properties to objects in these two ways, we add get and set methods to objects, so when we manipulate the properties again, the view will be updated.

Here is:



Figure 2 shows just one line of codethis.student.hobby = 'reading'Student, which has the new Hobby property, but no get and Set hobby methods.

Part four: Webpack

1. What is Webpack?

Webpack is a static module packaging tool for modern JavaScript applications. When WebPack works with an application, it internally builds a dependency graph that maps to each module required for the project and generates one or more bundles.

2. Functions of Webpack:

The purpose of Webpack is to handle dependencies, modularize, package compressed files, and manage plug-ins.

Since Webpack only supports JS files, you need to use loader to convert modules supported by WebPack.

3. Workflow of Webpack:

(1) Parse the configuration parameters, merge the configuration information from shell(NPM install similar command) and webpack.config.js file, output the final configuration information;

(2) Register the plug-in in the configuration, let the plug-in listen to the event nodes in the WebPack construction life cycle, and make corresponding responses;

(3) Parse the entry file in the configuration file, and find out the file that each file depends on, recursively;

(4) In the recursive process of each file, find out the corresponding Loader according to the file type and loader in the configuration file to convert the file;

(5) Get the final result of each file after the end of recursion, and generate code chunk(the name after packaging) according to entry configuration;

(6) Output all chunks to the file system.

Reference article: WebPack introduction and Practice (I)- WebPack configuration and techniques