The following is the content of 2021 interview preparation, some see big guy article video summary, some according to their own understanding….. If there is any error content can leave a message in the comment area, I will see the timely correction, gradually take time to complete the…..

A range of.

The box is horizontally and vertically centered

Level:

1. Text-align :center (for inline content, the child element must be set to display: inline; Or display: inline-block;)

2.margin: 0 auto; (Must be fixed width)

3. Absolute positioning implementation (more code; Out of the document flow; To use margin-left, you need to know the width; Poor compatibility with Transform (IE9 +). Remember it seems to cause a redraw??

#parent{ height: 200px; width: 200px; /* fixed width */ position: relative; /* background-color: #f00; } #son{ position: absolute; /* left: 50%; /* Left :100px*/ transform: translateX(-50%); Margin-left: -50px; margin-left: -50px; margin-left: -50px; */ width: 100px; /* height: 100px; background-color: #00ff00; }Copy the code

4. Favorite Flex (not compatible on PC, ok on mobile)

#parent{
    display: flex;
    justify-content: center;
}
Copy the code

Vertical:

1. Line-height (can only be used for single-line content; To know the height value)

2.vertical-align: middle; Font-size: 0; Can be completely vertically centered; You need to set display: table to its parent; To come into force; Table-cell is not aware of margin. Setting table-row and other attributes on the parent element will also make it not aware of height. Setting float or position breaks the default layout. Consider adding a parent div that defines properties such as float. The parent element is automatically split when the content overflows.

#parent{ height: 150px; line-height: 150px; font-size: 0; } img#son{vertical-align: middle; } / * baseline alignment, the default is to middle * / = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = # parent {display: table - cell; vertical-align: middle; }Copy the code

3. Absolute positioning (same level as above)

4. Flex (same level as above)

#parent{ display: flex; align-items: center; # the parent {} or display: flex; } #son{align-self: center; }Copy the code

Horizontal and vertical:

1.text-align: center; vertical-align: middle;

#parent{ height: 150px; line-height: 150px; /* align: center; text-align: center; font-size: 0; } #son{/*display: inline-block; */ vertical-align: middle; }Copy the code

2.display: table-cell; (Same level of disadvantage)

#parent{ height: 150px; width: 200px; display: table-cell; vertical-align: middle; /*text-align: center; } #son{/*margin: 0 auto; */ width: 100px; height: 50px; }Copy the code

4. Absolute positioning (lots of code; Out of document flow)

#parent{
    position: relative;
}
#son{
    position: absolute;
    margin: auto;
    width: 100px;
    height: 50px;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Copy the code

5.flex

#parent{
    display: flex;
}
#son{
    margin: auto;
}

或

#parent{
    display: flex;
    justify-content: center;
    align-items: center;
}

或

#parent{
    display: flex;
    justify-content: center;
}
#son{
    align-self: center;
}

Copy the code

A few interview questions about CSS3

Standard box model, IE box model;

Clear float;

BFC

Px, EM, REM

Classic layout (Grail, Wings)

2. It

Semantic tag classes

Audio and video processing

canvas/webGL

history API

requestAnimationFrame

The geographical position

web scoket

Javascript forever

A stack of memory and closure scope

JS 8 data types and differences

Basic type: number string Boolean, null, undefined type: function, object special (new in ES6) : symbol

JS stack memory operation mechanism

Stack: An environment for storing values of primitive types and specified code

Var function es5

Before code execution, all variables with the var function keyword are declared in advance in the current execution context of the current scope

Scope, scope chain

Closures do two things: protect/save

JS compilation mechanism: VO/AO/GO

JS advanced programming skills: inert function/Coriolization function/advanced function

A few interview questions

1.

/ / # # # example1 let a = {}, b = '1' c = 1 a [b] = 'AAAA' a [c] = 'BBBB' console, log (a [b]) / / BBBB / / / / = "objects and arrays difference between # # # example2 let a = {}, B = Symbol (' 1 ') c = Symbol (' 1 ') a [b] = 'AAAA' a [c] = 'BBBB' console, log (a [b]) / / AAAA / / = "to realize the Symbol / / # # # example3 let a = {}, B = {n: '1'}, c = {m: '2'} a [b] = 'AAAA' a [c] = 'BBBB' console, log (a [b]) / / AAAA / / = > Object. The prototype. The toString ()Copy the code

2.

var test=(function(i){ return function(){ alert(i*=2) } })(2); / / create and execute the test immediately (5) / / / '4' * * * * * * * * * * * * * attention to alert output string (detail decides success or failure)Copy the code

3.

var a=0,
b=0;
function A(a){
    A=function(b){
        alert(a+b++);
    };
    alert(a++)
}
A(1)
A(2)
Copy the code

4.

Object array depth and shallow clone

Let obj = {a: 'AAA' b:,1,2,3] [' BBB ', 1, c: {c: xx,} d: / ^ \ d + $/} let obj2 = {} / / shallow clone obj2 = {... obj}; for(let i in obj){ if(! obj.hasOwnProperty(i))break; Obj2 [I]=obj[I]} let obj2=JSON. Parse (json.stringify (obj)) If (obj===null) return null if(typeof obj! =='object') return obj if(obj instanceof RegExp){ return new RegExp(obj); } if(obj instanceof Date){return new Date(obj); //********* note} // instead of creating an empty Object directly, let newObj=new Object() to clone the result and keep the same owning class as before; // New obj.constructor==> for(let key in obj){ if(obj.hasOwnProperty(key)){ newObj[key]=deepClone(obj[key]) }; } return newObj }Copy the code

5.

function Foo(){
    getName=function(){
        console.log(1);
    }
    retune this;
}
Foo.getName=function(){
    console.log(2);
}
Foo.prototype.getName=function(){
    console.log(3);
}
var getName=function(){
    console.log(4);
}
function getName(){
    console.log(5);
}
Foo.getName();
getName();
Foo().getName();
getName();
new Foo.getName();
new Foo().getName();
new new Foo().getName();

Copy the code

www.bilibili.com/video/BV1ek…

Two object oriented and this processing

Singleton design pattern

Class and instance

Prototype/Prototype chain

The implementation mechanism of the new operator

There are four ways to call a function:

  • Called as a function
  • Function is called as a method
  • Call a function using a constructor
  • Calling functions as function methods (call, apply)

Process of new:

  • Create an empty object obj;
  • Points the implicit stereotype of the newly created empty object to the display stereotype of its constructor.
  • Use call to redirect this
  • If no value is returned or a non-object value is returned, obj is returned as the new object; If the return value is a new object, return that object directly.
var a = new myFunction("Li","Cherry");

new myFunction{
    var obj = {};
    obj.__proto__ = myFunction.prototype;
    var result = myFunction.call(obj,"Li","Cherry");
    return typeof result === 'obj'? result : obj;
}
Copy the code

call/apply/bind

Change the way this points to: Change the way this points to:

  • Use the arrow function of ES6
  • Use _this = this inside the function
  • Use apply, call, and bind
  • New instantiates an object

Define apply in MDN as follows; The apply() method calls a function with a specified this value and arguments supplied as an array (or array-like object). fun.apply(thisArg, [argsArray])

The syntax for call is:

fun.call(thisArg[, arg1[, arg2[, ...]]])

In fact, Apply and Call are basically similar. The only difference is that the call method takes a list of arguments, while Apply takes an array of arguments.

MDN defines bind as follows:

The bind() method creates a new function that, when called, sets its this keyword to the supplied value and, when called, provides a given sequence of arguments before any supply.

Bind creates a new function that we have to call manually

Example:

//example1 var a ={ name : "Cherry", fn : function (a,b) { console.log( a + b) } } var b = a.fn; Var a ={name: "Cherry", fn: function (a,b) {console.log(a + b)}} var b = a.f; Example3 var a ={name: "Cherry", fn: function (a,b) {console.log(a + b)}} var b = a.fein; B.b ind (a, 1, 2) (a) / / 3Copy the code

Constructor constructor pattern

The comprehensive combing of this five cases in JS

JS four data type detection schemes

typeof

Typeof '5' // string typeof 5 // number typeof null // object************************* Note typeof undefined // undefined typeof true // boolean typeof Symbol('5') // symbol typeof 5n // bigint typeof new Object(); // object typeof new Function(); // functionCopy the code

Null is considered to be an empty object, so object is returned, because any object can be converted to binary, null to binary means that all are 0, if the first three are 0, JS will treat it as an object, this is a bug left over from the early js.

instanceof

[] instanceof Array; // true //[]. Proto's prototype refers to array. prototype, indicating that two objects belong to the same prototype chain, returns true [] instanceof Object; // true function Person() {}; const person = new Person(); person instanceof Person; // true person instanceof Object; Let obj1 = {} console.log(obj1 instanceof Object) // true let obj2 = Object.create(null) console.log(obj2 instanceof Object) // false******************* Note let obj3 = object.create ({}) console.log(obj3 instanceof Object) // trueCopy the code

[#] can only be used to determine whether there is a prototype attribute on the variable’s prototype chain (whether two objects belong to the prototype chain), and not necessarily to obtain the specific type of the object. Instanceof is not applicable to determine the value of the original type, but can only be used to determine whether the object is dependent.

constructor

// Principle: Each instance object can access its constructor via constructor, which is also based on the principle of prototype chain. Note -undefined and null are invalid objects, Constructor === String // true [5].__proto__. Constructor === Array // true undefined.__proto__.constructor // Cannot read property '__proto__' of undefined null.__proto__.constructor // Cannot read property '__proto__' of undefinedCopy the code

toString

/ / for instance objects may be custom toString method, will cover the Object prototype. ToString, therefore, when using, Plus the best call. * * * * * * * * * pay attention to the Object. The prototype. ToString. Call (' 5 ') / / [Object String] Object. The prototype. ToString. Call (5) / / / Object  Number] Object.prototype.toString.call([5]) // [object Array] Object.prototype.toString.call(true) // [object Boolean] Object.prototype.toString.call(undefined) // [object Undefined] Object.prototype.toString.call(null) // [object Null] Object.prototype.toString.call(new Function()); // [object Function] Object.prototype.toString.call(new Date()); // [object Date] Object.prototype.toString.call(new RegExp()); // [object RegExp] Object.prototype.toString.call(new Error()); // [object Error]Copy the code

[#] Object. The prototype. The toString method returns the Object of type string, thus can be used to judge the type of a value. All data types can be detected using this method with great precision

JS inheritance scheme (shallow and deep copy)

1. Prototype chain inheritance

2. Borrow constructor inheritance

3. Combinatorial inheritance

4. Original type inheritance

Parasitic inheritance

Parasitic combinatorial inheritance

7. Blending inherits multiple objects

8.ES6 class extends extends

A few interview questions

Dom/BOM and event processing mechanism

Core DOM/BOM operations

The event object

Drag and drop plug-in encapsulation

Publish and subscribe design patterns

JQ part of the source code understanding

Event propagation mechanism and event broker

The core operating mechanism of DOM2 level events

Mobile Touch, Gesture event and encapsulation handling

The browser’s underlying rendering mechanism and the BACKflow redrawing of the DOM

A wrapper around the DIALOG modal box component

Iv. Framework (VUE for my own use)

Component communication

vue2

Two-way data binding

vue3

Two-way data binding

script setup

MVC is different from MVVM

Five webpack.

Algorithm of six.

Array and object deduplication

Sort (bubble, select, quicksort)

Array flattening N methods and advantages and disadvantages

A couple of recursion problems

Fibonacci numbers

7. Es6-9

let const var

Note the use of distinction and variable promotion

Arrowfunction Arrowfunction

Note that arrow functions cannot be new.

This points to the problem

Deconstruct assignment and expand operators

Set and MAP data structures

Promise design pattern

There is nothing wrong with the callback function itself; the problem is that multiple callback functions are nested. Suppose file A is read and then file B is read as follows.

fs.readFile(fileA, function (err, data) {
  fs.readFile(fileB, function (err, data) {
    // ...
  });
});
Copy the code

It’s not hard to imagine multiple nesting if multiple files are read in sequence. Code doesn’t grow vertically, it grows horizontally, and quickly becomes an unmanageable mess. This is known as the “callback hell.”

Promise was made to solve this problem. It is not a new syntax feature, but a new way of writing that allows callbacks to be vertically loaded instead of horizontally loaded. Use Promise to read multiple files in succession, written as follows.

var readFile = require('fs-readfile-promise');

readFile(fileA)
.then(function(data){
  console.log(data.toString());
})
.then(function(){
  return readFile(fileB);
})
.then(function(data){
  console.log(data.toString());
})
.catch(function(err) {
  console.log(err);
});
Copy the code

This code uses the fs-readfile-PROMISE module, which returns a promise version of the readfile function. Promise provides then methods to load callback functions and catch methods to catch errors thrown during execution.

As you can see, the Promise writing is just an improvement on the callback function, and with the then method, the two pieces of asynchronous task execution are more visible, but nothing new.

The biggest problem with promises is that the code is redundant. The original tasks are wrapped up by Promises, so that no matter what operation is performed, the original semantics become very unclear. –>> How to optimize?

Async, await and realization principle

Generator function

www.ruanyifeng.com/blog/2015/0…

Interator iterators and for.. in for.. Of circulation

Promise + specification

Js basic operation mechanism: single thread and synchronous asynchronous programming

Asynchronous programming is too important for the JavaScript language. JavaScript has only one thread, and without asynchronous programming, it can’t be used at all.

In the past, there were about four methods of asynchronous programming.

  • The callback function
  • Event listeners
  • Publish/subscribe
  • Promise object

To understand asynchrony: In simple terms, a task is divided into two parts, perform the first part first, then move on to other tasks, and when you are ready, return to the second part. For example, if a task reads a file for processing, the asynchronous execution would look like this.

Continuous execution is called synchronization.

Js underlying operation mechanism: micro task macro task and event loop mechanism

Event Queue (Micro-task: Promise, async, await, macro-task: timer, event binding)

A few interview questions

1.

async function async1(){
    console.log('async1 start')
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}
console.log('script start')
setTimeout(function(){
    console.log('setTimeout')
},0)
async1();
new Promise(function(){
    console.log('Promise1');
    resolve();
}).then(function(){

    console.log('Promise2')
});

console.log('script end')
Copy the code

www.bilibili.com/video/BV1ek…

2.

3.

AJAX/HTTP back-end data interaction

AJAX core 4 steps

Get and POST core mechanics and differences

Get and POST are both TCP/IP in nature, but they differ in TCP/IP in addition to HTTP. Get generates one TCP packet and post two.

Specifically:

For a GET request, the browser sends the headers and data together, and the server responds with 200. For a POST request, the browser sends the headers first, and the server responds with 100 continue. The browser sends data, and the server responds with 200.

Again, the difference here is the specification level, not the implementation level

TCP three handshake, four handshake

The essence of HTTP is TCP/IP request. You need to understand the three-way handshake rule to establish a connection and the four-way wave when disconnecting a connection. TCP divides HTTP long packets into short packets and establishes a connection with the server through the three-way handshake for reliable transmission. Steps of the three-way handshake :(abstract)

Client: Hello, are you server? Server: Hello, I'm server, are you client client: Yes, I'm clientCopy the code

Once the connection is established, data is transferred, and then, when the connection is disconnected, four waves are required (because it is full-duplex, four waves are required).

Steps for four waves :(abstract)

Passive: RECEIVED the message that the channel is closed. Passive: Let me also tell you that my active channel to you is also closed. Active: Finally received the data, and then the two parties cannot communicateCopy the code

TCP/IP concurrency limits:

  • Browsers limit concurrent TCP connections under the same domain name (2-10)
  • And in HTTP1.0 there is often a TCP/IP request for each resource download
  • Therefore, there are a lot of resource optimization schemes for this bottleneck

Axios library and source code

Fetch basics and applications

9 front-end cross-domain scenarios (non-same-origin policy requests)

Protocol, domain name, port number

  • Same-origin policy request (deployed to the Web server) Ajax and FETCH
  • Cross-domain request (server split)

1.JSONP (Cons: only get- optimized??) Websocket 5.Node middleware proxy 6. Nginx reverse proxy 7. Window.name +iframe 8. Location.hash +iframe 9.document.domain+iframe

Juejin. Cn/post / 684490…

www.bilibili.com/video/BV1wT…

HTTP network status code and actual combat processing scheme

Front-end performance optimization (pre-cache and weak cache)