I wouldn’t want to write a summary if I didn’t see a lot of summaries for 2020. We all know that this year has been an extraordinary year, and we all feel what it is. I think this year is also one that I will remember deeply. Where to start? Let’s start with my story with the front end, or everyone’s story with the front end. Some of the partners are students of the academic discipline, walking the way of reading, club, basement, some “wild way”, through some of the way of social training, set foot on the big front of the pit, some veteran, some wonderful youth. So let’s start by sharing how to learn the front end. How to learn the front end is actually more like an outline or compass, which does not lead you to the destination directly or help you get out of the confusion. I think confusion is something that everyone struggles with as soon as they open their eyes, at least I do. The Analects of Confucius says: learning without thought is useless; thought without learning is perilous.

How did I learn the front end

In 2020, I was Yang Xiaoyang, and in 2021, I was vast. Some people may say that they don’t understand. What’s so easy to learn in the front end? Deep into the masses is HTML CSS JavaScript three nouns. Ok, so from HTML

1, the HTML

HTML as a whole may be just a bunch of tags, but for beginners, img, P, etc. So from the perspective of learning, in fact, don’t panic, these will be used in the work, when learning MDN can directly HTML (hypertext Markup Language), of course, if you have to ask, say to watch video learning. I personally do not recommend that you take a good look at the MDN document, of course, like some complicated tags, videos and so on, you may have to learn it in depth and slowly, but that is until you get into the video playback business. From an interview standpoint, here are some questions you might want to know

• HTML header interview questions and reference answers

Yeah, that’s HTML, it’s a little bit more practice, these tags, there’s nothing complicated about HTML, it’s a good Angle to get into the front end, and here’s another Angle, CSS

2, CSS,

CSS is not as easy as HTML, if HTML takes 5 days, then CSS is a long time to study, CSS for some people may like to watch the video, here is recommended

TooooBug teacher standing in the perspective of the interviewer, talked about how to understand the style, and how to restore the idea of the product better (and quarrel with the product)

Then I strongly recommend reading JowayYoung’s book on the art of CSS, which is definitely worth the price (I recommend you buy it and read it), and if you need to practice it at work, I suggest you know the following 21 questions from the perspective of CSS interview

• CSS header interview questions and reference answers

You can see that HTML CSS is enough for us to drink a pot of, is it enough to ask, this is actually a prelude to how to practice, everyone’s conditions are different, from the point of view of reading CSS also need to constantly read books and practice, I’ll talk about that later, next JavaScript

3, JavaScript,

Js may not be so simple to say, because it is the core, the big Boss in the game, directly start, I think you should be the following:

Strict mode (modern mode) constraints

Use strict When it is at the top of the script file, the entire script file works in “modern” mode. Once you’re in strict mode there’s no going back

(function() {
  "use strict";

  / /... Your code...}) ();Copy the code

There is no directive like “no use strict” to return the program to default mode.

Once you’re in strict mode, there’s no going back.

1. Functions cannot be named eval or arguments;
2. Function arguments cannot be called eval or arguments;
3. Two named parameters cannot have the same name
4. Strict mode disallows automatic or implicit creation of global variables
5. If strict mode is used, the default binding is not available for global objects, so this is bound to undefined

function foo() {
"use strict";
console.log( this.a );
}
var a = 2;
foo(); // TypeError: this is undefined
Copy the code

6. In strict mode, functions can only be declared at the top level of the current scope

/ / is not an error
'use strict';
if (true) {
  function f() {}}/ / an error
'use strict';
if (true)
  function f() {}
Copy the code

"use strict";

num = 5; // Error: num not defined
Copy the code

What is the implementation principle of the difference between var, let and const

Var operator (keyword)

When a variable is declared using var, it is automatically added to the nearest context. In a function, the closest context is the local context of the function. In the with statement, the closest context is also the function context. If a variable is initialized undeclared, it is automatically added to the global context

Use the block-level scope declaration for lets

But its scope is block-level, which is also a new concept in JavaScript. The block-level scope is defined by the nearest pair of inclusion braces {}. In other words, if blocks, while blocks, function blocks, and even individual blocks are also the scope of let declaration variables. Another difference between let and VAR is that you cannot declare it twice in the same scope. Duplicate var declarations are ignored, while duplicate let declarations raise SyntaxError. When the let value is modified, the previous value is deleted

Use a const constant declaration

In addition to let, ES6 also adds the const keyword. Variables declared using const must also be initialized to a value. Once declared, new values cannot be reassigned at any point in its life cycle. Const declarations apply only to top-level primitives or objects. In other words, a const variable assigned to an object cannot be reassigned to another reference, but the key of the object is not restricted. In essence, it is not the value of a variable that cannot be changed, but the data stored in the memory address to which the variable points. A const pointer to a memory address holds only a pointer to the actual data. The const pointer is guaranteed to be fixed, but it has no control over whether the data structure it points to is mutable. Therefore, declaring an object as a constant must be done with great care

 const o = {
      name:'yayxs'.age:18
    }
    Object.freeze(o)
    o.name = 'subs'
    const o3 = Object.freeze({});
    o3.name= 'yyx'
    console.log(o3.name) // undefined
    console.log(o.name) // yayxs
Copy the code

Use const declarations as often as possible, unless you really need a variable that will be reassigned in the future. This essentially ensures that reassignment bugs are found in advance.

Object.freeze()

To make the entire Object immutable, use object.freeze ()

What are the data types of JavaScript and what are the differences in storage?

There are 8 basic data types in JavaScript.

The type of the data type

Data types in JS are generally divided into two categories: one is basic data type (simple data type, primitive type) and the other is complex data type

Tables	desc	other
The original type	Number String Null Undefined Symbol Boolean BigInt(IE not supported)	Symbol
The complex type	Object	Stored reference

Store the difference

• Six primitive values: Undefined, Null, Boolean, Number, String, and Symbol. A variable that holds the original value is accessed by value because we are manipulating the actual value stored in the variable.

• Reference values are objects stored in memory. JavaScript does not allow direct access to memory locations, and therefore cannot directly manipulate the memory space in which the object resides. When you manipulate an object, you are actually manipulating a reference to the object rather than the actual object itself

Variables that hold reference values are accessed by reference

Does typeOF determine the type correctly?

• The typeof operator is suitable for determining whether a variable is primitive or, more specifically, whether a variable is primitiveThe numerical string Boolean value undefinedThe best way

// The basic data type
const isNumber = 1;
const isStr = "I am string";
const isBool = true;
const isUndefined = undefined;

const isSymbol = Symbol(a);const isArr = [0.1.2];
const isObj = {
  name: "i am obj"};const isNull = null;
const isFunc = () = > {};


const targetArr = [
  isNumber,
  isStr,
  isBool,
  isArr,
  isObj,
  isNull,
  isUndefined,
  isSymbol,
  isFunc,
];
for (let i = 0, len = targetArr.length; i < len; i++) {
  console.log(targetArr[i], typeof targetArr[i]);
}
Copy the code

The reason types are loose is that you need a way to detect the current data type

Tables	desc	other
1	number	Detection of a successful
I am string	string	Detection of a successful
true	boolean	Detection of a successful
{name: “i am obj”}	object	Detection of a successful
undefined	undefined	Detection of a successful
Symbol()	symbol	Detection of a successful
() = > {}	function	Detection of a successful
,2,2 [0]	object	failure
null	object	failure

Calling typeof NULL returns “object”. This is because the special value null is considered a reference to an empty object. In JavaScript, the first three bits of a binary are all zeros, so the first three bits of a null binary are all zeros. Therefore, when typeof is executed, “Object” is returned.

Conversion of data types

Data type conversion 2 string

let targetArr = [-1.2.0.1.NaN."1".""."0"."1"."1.1"."01".true.false.null.undefined.Symbol('id'),1.2], [] and {name:'yayxs'}, {},() = >{}]

targetArr.forEach(item= >{
  console.log(String(item))
})
Copy the code

• Empty strings and empty arrays are rendered empty
• Object to[object Object]

Data type conversion of 2 digits

let targetArr = [-1.2.0.1.NaN."1".""."0"."1"."1.1"."01".true.false.null.undefined.Symbol('id'),1.2], [] and {name:'yayxs'}, {},() = >{}]

targetArr.forEach(item= >{
  console.log(Number(item))
})
Copy the code

• Undefined to NaN
• Null to 0

You can also use the unary operator +

console.log(+' ') / / 0
Copy the code

Data type conversion 2 Booleans

let targetArr = [-1.2.0.1.NaN."1".""."0"."1"."1.1"."01".true.false.null.undefined.Symbol('id'),1.2], [] and {name:'yayxs'}, {},() = >{}]

targetArr.forEach(item= >{
 console.log(Boolean(item))
})

let arr =[]
if(arr){
console.log('Come in')}else{
 console.log('Did you come in?')}Copy the code

• Empty strings and 0 are converted to false
• 0, null, undefined, NaN, “”
• The empty array [] is converted to true

What is the difference between == and ===?

• The double equals sign == indicates the equality check. Values on either side of the equals sign == are first converted to numbers. The same is true of the empty string and false, which are converted to the number 0.
• The strict equality operator === does no type conversion when comparing.

ifBoolean conversion of statements

let arr = [];
let arr1 = [1];
if (arr) {
  console.log('Empty array comes in'); / / print
}
if (arr.length) {
  console.log('Through length');
}
if (arr1) {
  console.log('There's data coming in'); / / print
}
if (arr1.length) {
  console.log('Data length'); / / print
}
Copy the code

if(0) {console.log(Array of '0')}if('0') {console.log('String 0') / / print
}
if(null) {console.log('null')}if(undefined) {console.log('Undefined')}if(NaN) {console.log('Not a number')}Copy the code

Null-value merge operator

let a = null

let b = 1

console.log(a?? b)Copy the code

Var declaration in the for loop

We define the variable I directly in the header of the for loop, usually because we only want to use I in the context of the inside of the for loop, ignoring the fact that I is bound to an external scope (function or global).

for (var i = 1; i <= 5; i++) {
  // Delay functions are executed at the end of the loop, and all callbacks are executed at the end of the loop
  setTimeout(function timer() {
    console.log(i);
  }, i * 1000);
}

Copy the code

The problem

The iterating variable I penetrates outside of the loop body. Printing I outside of the loop is 5 and printing window. I is 5 should theoretically be avoided. Block scopes can be used and a few of them in JS are with try/catch

with

Not only is it a difficult construct to understand, but it is also an example of block scope (a form of block scope), where scopes created from objects with with are valid only in the with declaration, not in the outer scope.

console.log(i); / / 5
console.log(window.i); / / 5
Copy the code

Plan 1 was changed to let

Thus iterating variables are scoped only within the inner block of the for loop (similar to the effect of function scope), and the let keyword can bind variables to any scope they are in (usually {.. } inside). In other words, let implicitly applies the block scope to the variables it declares. The let in the head of the for loop not only binds I to the block of the for loop, it actually rebinds it to each iteration of the loop, ensuring that it is reassigned with the value at the end of the last iteration of the loop.

for (let i = 0; i < 5; ++i) {
  setTimeout(() = > {
    console.log(i); // 0 1 2 3 4
  }, i * 5);
}
console.log(window.i); // undefined
console.log(i); // Uncaught ReferenceError: i is not defined
Copy the code

for (var i = 0; i < 5; ++i) {
  let _i = i;
  setTimeout(() = > {
    console.log(_i); // 0 1 2 3 4
  }, i * 5);
}
console.log(window.i); / / 5
console.log(i); / / 5
Copy the code

Build the closure environment

IIFE creates a scope by declaring and immediately executing a function

for (var i = 1; i < =5; ++i) {
 (
   function(){
     var j = i
     setTimeout(function timer(){
       console.log(j)
     },j*1000()})})console.log(window.i); / / 5
console.log(i); / / 5
Copy the code

try catchScope mechanism

Very few people will notice that the CATCH clause in JavaScript’s ES3 specification states that the try/catch clause creates a block field in which declared variables are valid only within the catch.

for (var i = 0; i < 5; ++i) {
  try {
    throw new Error(i);
  } catch (error) {
    let _i = Number(error.message);
    setTimeout(() = > {
      console.log(_i);
    }, _i * 5); }}console.log(window.i); / / 5
console.log(i); / / 5
Copy the code

Scheme 4 uses the third argument of the setTimeout function

This parameter is passed as an argument to the timer function

for (var i = 0; i < 5; i++) {
  setTimeout(
    (j) = > {
      console.log(j);
    },
    i * 5,
    i
  );
}
console.log(window.i); / / 5
console.log(i); / / 5
Copy the code

The way functions are created

• Method one function declaration

let bar
function foo(){
	console.log(bar) // It can be accessed
}

Copy the code

• Mode two function expression

// Function expression
let sum = function(a, b) {
 return a + b;
};
Copy the code

How objects are created

Constructor syntax

The first is to use the new operator and the Object constructor. New objects are created by using the new operator followed by a constructor.

var myObj = new Object(a); myObj.key = value;Copy the code

let person = new Object(a); person.name ="Nicholas";
person.age = 29;
Copy the code

The way an object is literal

var myObj = {
key: value
// ...
};

Copy the code

Object.create

1. Create an objectmyObjectAnd put the object’s[[Prototype]]Associated with the specified object,

Creates an empty object using the given proto as [[Prototype]] and the optional attribute description

const animal = {
  eats:true
}

const rabbit = Object.create(animal)
Copy the code

Please tell me something aboutObject.assign

Object.assign ES6 defines Object.assign(..). Method to implement shallow copy

let dest = {
  user:'yayxs'
}
Object.assign(dest, {name:'yayxs'}, {age:12})
console.log(dest)
Copy the code

We can also use object. assign instead of for.. The in loop performs a simple clone, which copies all the attributes in user into an empty object and returns the new object

Talk about garbage collection in JS

Unlike C and C++, JS automatically manages memory allocation and the collection of idle resources: it determines which variables are no longer being used, and then frees the occupied memory

• Periodicity runs automatically at regular intervals from beginning to end
• Algorithm simply by the algorithm can not be prepared to correctly locate a certain block of memory is in use, there is a certain unpredictability

Local variables in functions are no longer needed after they are used. Normally, they can be released normally, but not exclusively. There are two ways to track tokens internally

Mark sweep

Variables are marked when they enter the context and then marked when they leave. They can no longer be found in any context and are cleaned up

Reference counting

The number of references to a variable is 0. If the number of references is 0, the variable cannot be accessed

• Values that leave scope are automatically marked as recyclable and then deleted during garbage collection.
• The dominant garbage collection algorithm is tag cleaning, which marks values that are not currently in use and then comes back to reclaim their memory.
• Reference counting is another garbage collection strategy that keeps track of how many times a value is referenced. JavaScript engines no longer use this algorithm, but some older versions of IE- are still affected by it because JavaScript accesses non-native JavaScript objects (such as DOM elements).
• Reference counting has problems with circular references in your code.
• Dereferencing variables not only eliminates circular references, but also helps with garbage collection. To facilitate memory reclamation, global objects, properties of global objects, and circular references should all be dereferenced when no longer needed.

thisPointing problem of

Object method this refers to object obj

function foo() {
  console.log('points to object obj'.this);
  console.log(this.a);
}
var obj = {
  a: 2.foo: foo,
};
obj.foo(); / / 2

Copy the code

This is actually a binding that happens when the function is called. What it points to depends entirely on where the function is called. The value of this is computed at runtime, depending on the code context.

Call this in the function

function foo() {
  console.log(Window ` ` this point.this)
  console.log(this.a);
}

var a = 2;

foo(); / / 2

Copy the code

• In strict mode, undefined
• In non-strict mode, it points towindow

What’s the difference between an arrow function and a normal function?

• MDN – Arrow function

• Ruan es6- arrow function

What is an arrow function

• Grammar is simple
• Doesn’t have its own this
• Cannot be used as a constructor.

const agesArr = [12.13.7.8 ]

const res = agesArr.map(item= >`${item}At the age of `)
console.log(res) // ['12 ', '13 ', '7 ', '8 ']
Copy the code

const fn  = ([a, b] = [1.2], {x: c} = {x: a + b}) = > a + b + c;
const res1 = fn()
console.log(res1) / / 6
Copy the code

advantage

• Default values for parameters of a function

  • before

  function log(x, y) {
    y = y || 'World';
    console.log(x, y);
  }
  
  if (typeof y === 'undefined') {
    y = 'World';
  }
  Copy the code

  • now

  function Point(x = 0, y = 0) {
    this.x = x;
    this.y = y;
  }
  Copy the code

• It’s shorter to write

• There is no single this

• The arrow function makes the presentation more concise.

No arrow function

Is a function defined in terms of how it is calledthis

• If the function is a constructor, the this pointer points to a new object
• In strict mode function calls, this refers to undefined

 function Person() {
        // The Person() constructor defines' this' as its own instance.
        this.age = 0;

        setInterval(function growUp() {
          console.log(this);
          // In non-strict mode, growUp() defines' this' as a global object,
          // Not the same as' this' defined in the Person() constructor.
            // This is the window object.
          this.age++;
        }, 1000);
      }
Copy the code

Use the arrow function

function Person(){
  this.age = 0;

  setInterval(() = > {
    this.age++; / / | this | to p instance correctly
  }, 1000);
}

var p = new Person();
Copy the code

Arrow functions will not create their ownThis, which inherits this only from the upper level of its scope chain

What’s the difference between a normal function and an arrow function

• The this object inside the function is the object at which it is defined, not used

let obj = {
  name: "Zhang".sayHi() {
    console.log(this); // obj is the object
    function sayName() { 
      console.log(this); // this is a function that points to the window
    }
    sayName()
    const foo = () = >{
      console.log(this) // obj is the object
    }
    foo()
  },
};
console.log(obj.name);
obj.sayHi();

Copy the code

• ES6 introduces the REST parameter of the form. The variable name), which is used to get extra arguments to the function so that they are not neededargumentsThe object. The rest argument goes with a variable that puts the extra arguments into an array.

The // arguments variable is written like an array of objects
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// Rest arguments are written as real arrays
const sortNumbers = (. numbers) = > numbers.sort();
Copy the code

• UnusableyieldCommand, so arrow functions cannot be used as Generator functions.

newWhat happens when the operator executes

1. A new empty object is created and assigned to this
2. The function body executes. Typically, it will modify this to add new attributes to it.
3. Return the value of this.

function User(name) {
  // this = {}; (Implicitly created)

  // Add attributes to this
  this.name = name;
  this.isAdmin = false;

  // return this; (Implicit return)
}
Copy the code

Talk aboutOptional chain? The grammar

• obj? .prop — obj. Prop is returned if obj exists, undefined otherwise.
• obj? .[prop] — obj[prop] is returned if obj exists, undefined otherwise.
• obj.method? .() — call obj.method() if obj.method exists, otherwise return undefined.

Inexact calculation of why 0.1 + 0.2! = 0.3

Let res = 0.1+0.2 console.log(res) 0.30000000000000004Copy the code

Js has a data type called Number which has a floating point value (the value must contain a decimal point and must have at least one Number after the decimal point). Floating point values are accurate to up to 17 decimal places, but are far less accurate in arithmetic than integers

The rounding error in ::: TIP is due to the use of IEEE 754 values (double-precision floating-point numbers) and is not unique to ECMAScript. Other languages that use the same format also have this problem.

It’s not just JavaScript that has the same problem with many other programming languages.

PHP, Java, C, Perl, and Ruby give exactly the same results because they are based on the same number format. : : :

A number is stored in memory in its binary form, a sequence of ones and zeros. But decimals like 0.1 and 0.2, which look simple in the decimal number system, are actually infinite repeating decimals in binary form.

To solve

console.log(+res.toFixed(2));
Copy the code

Note that toFixed always returns a string. It ensures that there are two digits behind the decimal point. If we have an e-shopping site and need to display ¥0.30, this is actually quite convenient. For other cases, we can use unary plus to cast it to a number:

let sum = 0.1 + 0.2;
alert(sum.toFixed(2)); / / 0.30
Copy the code

let sum = 0.1 + 0.2;
alert(+sum.toFixed(2)); / / 0.3
Copy the code

for.. of, for.. The difference between in and forEach and map

The for loop

This is the most basic operation. We can access each value in turn by looping through the index of the array:

// Get the length of the array
const len = arr.length;
for (let i = 0; i < len; i++) {
  // Outputs the element value of the array, and outputs the current index
  console.log(arr[i], i);
}
Copy the code

for in

A for-in statement is a strictly iterative statement that enumerates non-signed key attributes in an object. If a for-in loop iterates over a variable that is null or undefined, the body of the loop is not executed. The loop iterates through all the attributes, not just the numeric attributes

for (const key in window) {
  document.write(`${key}-- -- -- -- -- -- -- `);
}
Copy the code

var anotherObject = {
  a: 2};// Create an object associated with anotherObject
var myObject = Object.create(anotherObject);
for (var k in myObject) {
  console.log('found: ' + k);
}
// found: a
'a' in myObject; // true
Copy the code

for-of

A for-of statement is a strict iteration statement that iterates through the elements of an iterable. It does not get the index of the current element, but only the element value, but is sufficient in most cases. And it’s much shorter, and it’s usually used for arrays

for (let val of arr) {
  // ele is the element
}
Copy the code

forEach

We can also get the value of each element of the array and its corresponding index by taking the first and second input parameters of the function passed in to the forEach method, going through all the values in the array and ignoring the return value of the callback function

arr.forEach((item, index) = > {
  // Outputs the element value of the array, and outputs the current index
  console.log(item, index);
});
Copy the code

map

The map method is called in the same way as forEach, except that the map method processes each element of the array based on the function logic you pass in and returns a new array. So what MAP is doing is not just traversing, but “reworking” on top of traversing. When we need to make batch changes to the contents of an array with highly consistent logic, we can call map to do this:

const newArr = arr.map((item, index) = > {
  // Outputs the element value of the array, and outputs the current index
  console.log(item, index);
  // Add 1 to the current element value
  return item + 1;
});
Copy the code

I recommend using a for loop for traversal if there is no special need. Because the for loop is the fastest to iterate over in terms of performance.

What are the characteristics of an iterable

• Arrays can be iterated
• Strings can be iterated

Objects that implement the symbol. iterator method are typically iterated using for of

What is a class arrayarray-like

Are objects with index and length attributes, so they look a lot like arrays.

How do I turn it into a real array

Array.from(arrayLike);
Copy the code

The array. from method takes the object, checks that it is an iterable or array-like object, then creates a new Array and copies all the elements of that object into the new Array.

Set Map WeakSet WeakMapThe difference between

So first of all, what is a Set and what is a Map and all of these things, we know they’re pretty much like objects, but the key of an object can only be a string or a Symbl, right

let id = Symbol("id");
console.log(typeof id);
let obj = {
  0: "0"."0": "123",
  [id]: "12"};console.log(obj); // {0: "123", Symbol(id): "12"}
Copy the code

Map

At this point, we can create a Map to get rid of this constraint, which means that the Map key can be the object type. Ok, so let’s just write a simple Map

let doms = document.getElementsByTagName("h1");
console.log(doms);

let map = new Map(a); [...doms].forEach((h1) = > {
  map.set(h1, "Test");
});
console.log(map);

console.log(map.get(doms[0])); / / test
console.log(map.size);
Copy the code

let key = {
  name: "yayxs"};let key1 = {
  age: "18"};let map = new Map(a); map.set(key,"name").set(key1, "age");
console.log(map.keys());
console.log(map.values());
Copy the code

let map = new Map([["pingguo".19],
  ["xiangjiao".20]]);for (let k of map.keys()) {
  console.log(k);
}
for (let v of map.values()) {
  console.log(v);
}
for (let e of map) {
  console.log(e);
}
Copy the code

let obj = {
  name: "yayxs".age: "20"};let map = new Map(Object.entries(obj));
console.log(map);
Copy the code

let obj  = {
  '1':'yayxs',
  1:'yayxs'
}
console.log(obj)
Copy the code

let id = Symbol('id')

let obj = {
  [id]:'yayxs'
}
console.log(obj)
Copy the code

These are all map postures, or let’s look at map iterations

const map  = new Map(a)console.log(map)
map.set('1'.'str')
map.set(0.'num')
map.set(true.'boo')

console.log(map.keys())
console.log(map.values())
console.log(map.entries())
Copy the code

Then there’s the forEach method of the map

map.forEach( (value, key, map) = > {
  console.log(`${key}: ${value}`); 
});
Copy the code

Create one from an objectmap

let obj = {
  name: "John".age: 30
};

let map = new Map(Object.entries(obj));

alert( map.get('name'));// John
Copy the code

WeakMap

WeakMap keys must be objects; WeakMap does not support iteration and keys(), values() and entries() methods

let map = new Map(a); map.set("1"."yayxs");
console.log(map);
let map = new WeakMap(a); map.set("1"."yayxs");
console.log(map); // Identifier 'map' has already been declared
Copy the code

let obj = {
  name: "yayxs"};let arr = [obj];
obj = null;

console.log(arr[0]);
Copy the code

If we use an object as a key in weakMap and there are no other references to the object — the object will be automatically cleared from memory (and map).

Set

let set = new Set(a);let zhangsan = {
  name: "zhansan"};let lisi = {
  name: "lisi"};let wangermazi = {
  name: "wangermazi"}; set.add(zhangsan); set.add(lisi); set.add(wangermazi); set.add(zhangsan);console.log(set);

for (let val of set) {
  console.log(val);
}
console.log(set.keys());
Copy the code

WeakSet

• Similar to Set, but we can only add objects to WeakSet (not raw values)
• Objects can stay in a set only if they can be accessed somewhere else
• Like Set, WeakSet supports add, HAS, and DELETE methods, but does not support size and keys(), and is non-iterative

Talk about Object. Keys, values, and entries

let obj = {
  key1:'1'.key2:'2'.key3:'3'
}

console.log(Object.keys(obj)) // ["key1", "key2", "key3"]
console.log(Object.values(obj))
console.log(Object.entries(obj))
Copy the code

Rest parameterswithThe arguments variable

Rest parameters

Rest parameters must be placed at the end of the parameter list

function sum (a,b,... rest){
  let sum = 0
  for(let ele of rest){
    sum = sum +ele
  }
  console.log(sum)
}

sum(1.2.3.4)
Copy the code

arguments

function foo(. rest){
console.log(rest)
console.log(Array.isArray(rest))
}

function bar(){
  console.log(arguments)
  console.log(Array.isArray(arguments))
}

foo(1.2)
bar(3.4)
Copy the code

If we call Arguments in an arrow function, the arguments we call do not belong to the arrow function, but to a “normal” function outside the arrow function.

Talk about garbage collection in JS

Unlike C and C++, JS automatically manages memory allocation and the collection of idle resources: it determines which variables are no longer being used, and then frees the occupied memory

• Periodicity runs automatically at regular intervals from beginning to end
• Algorithm simply by the algorithm can not be prepared to correctly locate a certain block of memory is in use, there is a certain unpredictability

Local variables in functions are no longer needed after they are used. Normally, they can be released normally, but not exclusively. There are two ways to track tokens internally

Mark sweep

Variables are marked when they enter the context and then marked when they leave. They can no longer be found in any context and are cleaned up

Reference counting

The number of references to a variable is 0. If the number of references is 0, the variable cannot be accessed

• Values that leave scope are automatically marked as recyclable and then deleted during garbage collection.
• The dominant garbage collection algorithm is tag cleaning, which marks values that are not currently in use and then comes back to reclaim their memory.
• Reference counting is another garbage collection strategy that keeps track of how many times a value is referenced. JavaScript engines no longer use this algorithm, but some older versions of IE- are still affected by it because JavaScript accesses non-native JavaScript objects (such as DOM elements).
• Reference counting has problems with circular references in your code.
• Dereferencing variables not only eliminates circular references, but also helps with garbage collection. To facilitate memory reclamation, global objects, properties of global objects, and circular references should all be dereferenced when no longer needed.

What are the use scenarios for closures and function closures? What are the pros and cons

function foo() {
  var a = 2;
  function bar() {
    console.log(a); / / 2
  }
  bar(); // bar() covers the closure of the scope foo()
}
foo();

Copy the code

function foo(){
    var a = 2
    function bar(){
        console.log(a)
    }
    return bar
}

var baz = foo()

baz()
Copy the code

Whenever you use callbacks in timers, event listeners, Ajax requests, cross-window communication, Web Workers, or any other asynchronous (or synchronous) > task, you’re actually using closures!

Application scenarios

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

Declaration enhancement in JS

The VAR declaration is carried to the top of the function or global scope, before all the code in the scope. This phenomenon is called ascension.

Promotion lets code in the same scope use variables without considering whether they have been declared. In practice, however, promotion can also lead to the legal but strange phenomenon of using variables before they are declared.

For example, this process is as if variable and function declarations are “moved” to the top from where they appear in the code. This process is called ascension.

function fn1() {
  var name = 'Jake';
}

// This is equivalent to:
function fn2() {
  var name;
  name = 'Jake';
}
Copy the code

foo(); / / 1
var foo;
function foo() {
  console.log(1);
}
foo = function () {
  console.log(2);
};

Copy the code

Even the else statement, but var is elevated to the top of the function sayHi

function sayHi() {
  // var phrase // Step 1
  if (false) {
    var phrase = "Hello";;
  }
  // if (false) {
  // phrase = "Hello"; The second step
  // }
  console.log(phrase);
}
sayHi();
Copy the code

Functions take precedence over secondary variables

Talk about what you know about call function expressions immediately

This pattern is so common that a few years ago the community gave it a term: IIFE, which stands for Immediately Invoked Function Expression;

var a = 2;
(function foo() {
  var a = 3;
  console.log(a); / / 3}) ();console.log(a); / / 2
Copy the code

Methods to create IIFE

This pattern is so common that a few years ago the community gave it a term: IIFE, which stands for Immediately Invoked Function Expression;

var a = 2;
(function foo() {
  var a = 3;
  console.log(a); / / 3}) ();console.log(a); / / 2
Copy the code

Simple talk aboutpromise

• Problem aPromiseIs the constructor executed synchronously or asynchronously
• Problem two:thenHow about the method in?
• Question 3:promiseHow to implementthenTo deal with?

The problem with callbacks

• Code bloat.
• Poor readability.
• The coupling degree is too high and the maintainability is poor.
• Poor code reuse.
• Bug prone.
• Exceptions can only be handled in callbacks.

let url1 = 'http://xxx.xxx.1';
let url2 = 'http://xxx.xxx.2';
let url3 = 'http://xxx.xxx.3';
$.ajax({
    url:url1,
    error:function (error) {},
    success:function (data1) {
        console.log(data1);
        $.ajax({
            url:url2,
            data:data1,
            error:function (error) {},
            success:function (data2) {
                console.log(data2);
                $.ajax({
                    url:url3,
                    data,
                    error:function (error) {},
                    success:function (data3) {
                        console.log(data3); }}); }}); }});Copy the code

Everyone is saying promise, interview is also the basic must ask questions, general knowledge, some online reference articles are not outdated, such as some configuration of the article we may like to see the most recent article. We will look at these questions in terms of basic concepts and principles of interview. So the first thing to talk about is promises and generally we just read documents, from simple to difficult.

Promise is an object

Promise instanceof Object;
true;
Copy the code

Represents the final completion or failure of an asynchronous operation

Suppose we now need to create an audio file, which requires us to prepare two callback functions, one to be called on success and one to be called on failure

So now we need to prepare two callback functions, and with promise, we can do this

const promise = createAudioFileAsync(audioSettings);
promise.then(successCallback, failureCallback);
Copy the code

Object constructor syntax

const p = new Promise((resolve,reject) = >{})Copy the code

The function passed to Peomise is automatically executed

const p = new Promise(() = > {
  console.log('Function executed immediately');
});
Copy the code

Promise is a constructor that uses the new operator to return a Promise object. The constructor takes an excutor as an argument. Excutor takes resolve and reject as arguments of two types, both of which JS tries to call

The returned p has two internal properties, originally pending undefined

[[PromiseState]]: "pending"
[[PromiseResult]]: undefined
Copy the code

What are the common asynchronous tasks

There are two types of asynchronous tasks: microtasks and macroTasks. Different types of tasks are assigned to different task queues. When all tasks in the execution stack are executed, the system checks whether there are events in the microtask queue. If there are, the corresponding callback of events in the microtask queue will be executed successively until it is empty. Then fetch an event from the macro task queue and add the corresponding callback to the current execution stack. When all tasks in the execution stack are executed, check whether there is an event in the micro task queue.

• A queue is a first-in, first-out task that is queued first
• The task queue is executed only when there are no other tasks in the JS engine

Microtask queues (ES8 terminology)

Microtask events include but are not limited to the following:

• Promise.then
• Object.observe
• process.nextTick

Macro task

Events belonging to macro tasks include but are not limited to the following:

• setTimeout
• setInterval
• setImmediate
• IO

setTimeout Promise Async/AwaitThe difference between

Async/await is a special syntax for using Promise in a more comfortable way, but it’s also very easy to understand and use.

async

async function foo() {
  return 1;
}

foo().then(res= >{console.log(res)})
Copy the code

await

1. We get a syntax error if we try to use await in a non-async function
2. Await cannot run in top-level code

JSModular development of

Understanding modularity

Module concept

Encapsulate a complex program into several blocks or files according to certain rules or specifications, and combine them together. The internal data and implementation of blocks are private, but some interfaces or methods are exposed to communicate with other modules.

Why introduce modularity

• Reduce complexity and improve decoupling
• The deployment of convenient
• Avoid naming conflicts
• Better separation, load on demand
• Higher maintainability

Attendant problems

• Request too much
• Relying on the fuzzy
• Difficult to maintain

CommonJS server execution environment

specification

Each file can be treated as a module, and the CommonJS specification Outlines the module definitions on which synchronous declarations depend. This specification is primarily used to implement modular code organization on the server side, but can also be used to define module dependencies for use in browsers. On the server side: modules are loaded synchronously at runtime and cannot be run directly on the browser side.

Module exposure

Exposed nature: Objects (Exports objects)

Module. exports = a value exports. XXX = a valueCopy the code

Note that:

• Module. exports overrides exports when both exist
• Exports is the same as module.exports when a module is completely exports
• Exports is a subset of module.exports.

// moduleA.js
console.log("ModuleA. Js execution");

module.exports = "string123";
Copy the code

// index.js
const ma = require("./moduleA");
console.log("The index performs");

console.log("Modulea.js execution result", ma); // {} defaults to {}
Copy the code

AMD Browser execution environment

One of the oldest Module systems, Asynchronous Module Definition Chinese name is Asynchronous Module. It is a specification for modular development on the browser side. Because it is not supported by JS native, page development using AMD specification needs corresponding function library, namely famous RequireJS. In fact, AMD is the standardized output of RequireJS module definition in the promotion process.

define('moduleA'['moduleB'].function(moduleB) {
  return {
    stuff: moduleB.doStuff();
  };
});
Copy the code

Problem solved

• Multiple JS files may have dependencies that need to be loaded into the browser before the dependent files
• When JS is loaded, the browser will stop rendering the page. The more files loaded, the longer the page will be unresponsive
• Asynchronous preloading

Generic module definition

UMD (Universal Module Definition) is compatible with both AMD and CommonJS

(function(root, factory) {
  if (typeof define === "function" && define.amd) {
    / / AMD. Register as an anonymous module
    define(["moduleB"], factory);
  } else if (typeof module= = ="object" && module.exports) {
    / / the Node. Strict CommonJS is not supported
    Module. Exports is supported by Node
    // Use in CommonJS environment
    module.exports = factory(require(" moduleB "));
  } else {
    // Browser global context (root is window)
    root.returnExports = factory(root.moduleB);
  }
})(this.function(moduleB) {
  // Use moduleB in some way

  // Export the return value as the module
  // This example returns an object
  // But modules can also return functions as exported values
  return {};
});
Copy the code

The CMD seaJS

Define (ID, deps, Factory) because CMD advocates a module per file, it often uses the file name as the module ID; CMD advocates nearby dependencies, so instead of writing dependencies in define parameters, you write them in Factory. Factory takes three arguments: Function (require, exports, module){}} function(require, exports, module){}} function(exports, module){}} function(exports, module){}} Exports exports is an object that provides a module interface. A module is an object that stores properties and methods associated with the current module. Mymodule. js define(function(require, exports,) module) { var $ = require('jquery.js') $('div').addClass('active'); }); / / load module seajs. Use ([' myModule. Js], function (my) {});Copy the code

ES6 module

• Module code is only executed after loading.
• Modules can only be loaded once
• A module is a singleton
• A module can define a common interface on which other modules can observe and interact
• Modules can request that other modules be loaded
• Support for circular dependencies

conclusion

Because modules support special keywords and features, we must tell the browser that this script should be treated as a module by using the

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>vue-vast-admin</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
Copy the code

4, JavaScript advanced

• JavaScrip head high frequency handwriting to achieve interview topic summary

Be a reader

At this point, I need to say something very important: read a book, read a book, read a book, read a book, do technology. If you want to go far, if you want to go far in life, you have to read a book. Put down the short video. I made a video a long time ago

• CSS HTML JavaScript Vue React Es6 Http 2020

I remember it very well. It was a video that I made all night. Haha, because I was not familiar with PS PR Au at that time, I have some good books.

HTML

In fact, as for the HTML part, we can read it from some documents such as MDN or other online, and it will be faster to enter the door of **** structure ****

• * The Definitive Guide to HTML5 *

It introduces the preparatory knowledge and the progress of HTML, CSS and JavaScript

• * HTML5 Programming (Version 2) *

HTML5 historical background, new semantic tags, and fundamental changes from previous HTML versions

CSS

Then is our style sheet, also is what we call CSS,CSS is our brush, so that we are full of charm, sometimes cool, sometimes quiet.

• * CSS Design Guide *

• * Mastering CSS Advanced Web Standards Solutions (version 2) *

This section describes the basic concepts and best practices of the CSS

• * CSS Revealed *

47 CSS tricks to help you cope with any CSS problem; Backgrounds and borders, shapes, visuals, typography, user experience, structure and layout, transitions and animation, etc

• * The Definitive Guide to CSS (3rd edition) 2006 *

Rationalization of the proportion of theory and example arrangement, easier to read; Will tell us what CSS is and what can be done to cover CSS2.0

• *《Head First HTML and CSS, XHTML》*

A better primer

• * CSS World *The author is Zhang Xinxu

Using “flow” as a clue, it provides a comprehensive and in-depth explanation of the CSS knowledge that front-end developers must know and master, from structure, content, to beautification

JavaScript

In fact, we will find that many of the popular words **** in **** interview, including but not limited to, such as closure scope prototype chain and so on, are always covered and described in different books, more or less, depth. Active learning is better than passive acceptance, rather than blame life, self-pity; Instead, explore the mysteries of the book, return to the sea of knowledge, and talk to colleagues or people around you…

• * JavaScript Advanced Programming also known as the Little Red Book of The Front End

Explains the VARIOUS components of JS language; These include DOM, event model, etc. Basically ES5 content

• * The Definitive guide to JavaScript – The Rhino Book *

• * The Art of JavaScript DOM Programming *

A number of important JavaScript programming principles and practices, such as smooth degradation, are expounded thoroughly. You can do some DEMO along the way

• * JavaScript up, Middle, and Down you Don’t Know *

I covered scopes and closures, this and object prototypes (understanding these is what leads to popular techniques like frameworks).

The medium volume focuses on type syntax asynchrony and performance

The next volume mainly talks about the outlook of ES6 and its future development

• * High Performance JavaScript *

• * JavaScript Language Essentials *

• * “Nettao JavaScript Tutorial Ruan Yifeng” *

• * Introduction to ES6 Standard Ruan Yifeng *

• * Deep Understanding of ES6 *

Data structures and algorithms

• * Learning JavaScript Data Structures and Algorithms *

This section describes common algorithms

• * JavaScript Descriptions of Data Structures and Algorithms *

Computer network

• * The Definitive Guide to HTTP *

So what happens when you enter the URL in the address bar, haha

• * Illustrated HTTP *

• * Illustrated TCP/IP *

The framework

• * Deep Into the React Technology Stack *

• * Vue. Js *

Node

• * Node.js In Action (version 2) *

• * Node.js in Plain English *

Performance optimization

• * The Definitive Guide to Web Performance *

Design patterns

As for the front end, I think it’s important to know about design patterns, including things like publisher subscriptions, etc. What books can you read about design patterns

• * JavaScript Design Patterns and Development Practices *

• * JavaScript Design Patterns *

6. Computer networks

The first four points can be said to be the basic point, the four points complement each other, but also the basic front end, the next plan to talk about the network

The classic five-tier model

• Layered management: application layer, transport layer, network layer, and data link layer

  • Application layer: Determines the communication activities when providing application services to users FTP DNS HTTP
  • Transport layer: Network two you inoculate data between two computers by transferring TCP UDP
  • Network layer: Handles packets over the network
  • Data link layer: The hardware part of the network that links

  

httpThe development of

version	The characteristics of	year
HTTP / 0.9	1. There is only one GET. 2	1990
HTTP / 1.0	1. Added command 2. Multi-character set support	In May 1996
HTTP / 1.1	1. Add persistent connections 2. Pipeline 3	In January 1997
HTTP2	1. Binary transmission 2, multiple requests no longer come in order 3. Header information compression and push to improve efficiency

TCPThree-way handshake

In order to transmit data accurately, TCP uses the three-way handshake. Because of network transmission, the packet is lost and the server does not know whether to receive the message

GTE vs POST

The standard reference

W3school:www.w3school.com.cn/tags/html_r…

project	GET	POST
Back button/refresh	harmless	The data will be resubmitted (browsers should inform users that the data will be resubmitted).
bookmarks	Bookmark	Do not bookmark
The cache	Can be cached	Can’t cache
The encoding type	application/x-www-form-urlencoded	Application/x – WWW – form – urlencoded or multipart/form – the data. Use multiple encoding for binary data.
history	Parameters are retained in browser history.	Parameters are retained in browser history.
A limit on the length of data	Yes. When sending data, the GET method adds data to the URL; URL length is limited (maximum LENGTH of URL is 2048 characters).	unlimited
Restrictions on data types	Only ASCII characters are allowed.	There is no limit. Binary data is also allowed.
security	GET is less secure than POST because the data sent is part of the URL. Never use GET! When sending passwords or other sensitive information.	POST is more secure than GET because parameters are not saved in browser history or Web server logs.
visibility	The data is visible to everyone in the URL.	The data is not displayed in the URL.

Side effects and idempotent concepts

Side effects refer to changes made to resources on the server. Searching has no side effects, while registration has side effects.

Idempotent refers to sending M and N requests (different and both greater than 1), the state of resources on the server is consistent, for example, registering 10 and 11 accounts is not idempotent, and changing articles 10 and 11 times is idempotent. Because the former is an extra account (resource), the latter is just updating the same resource.

In standard application scenarios, Get is mostly used in idempotent scenarios with no side effects, such as searching for keywords. Post is mostly used in side-effect, non-idempotent scenarios, such as registrations.

Technical differences

• Get requests can be cached, but Post requests cannot
• Post is a little more secure than Get, because Get requests are contained in the URL (although you can write to the body if you want) and are kept in the browser’s history. Post does not, but it is the same in the case of packet capture.
• Urls have a length limit that affects Get requests, but this length limit is browser-specific, not RFC specific
• Post supports more encoding types and does not restrict data types

Difference on packets

Conclusion: There is no substantial difference between GET and POST, but the packet format is different.

GET and POST are two HTTP request modes. HTTP is an application layer protocol based on TCP/IP. Both GET and POST use the same transport layer protocol, so there is no difference in transmission.

In the format of packets without parameters, the biggest difference is the method name of the first line

The first line of the POST request is POST /products/create HTTP/1.1

The first line of the GET request is GET /products? Name = zs&age = 18 HTTP / 1.1

Yes, the difference without parameters is only the first few characters of the message

What’s the difference between a text with parameters? In the convention, the parameters of the GET method should be placed in the URL, and the parameters of the POST method should be placed in the body

For example, if the argument is pname=’ mi 9′, pprice=3500

The message of the GET request method is as follows:

The POST request method sends the following message:

Now we know that the two methods are essentially TCP connections, there’s no difference, which means that if I don’t follow the specification, IT’s okay. We can write parameters in the URL, and then the method uses POST; You can also write parameters in the Body and then use GET in the method. Of course, this requires server-side support.

• Get is used to query certain information from the server. If necessary, you need to add query string parameters after the URL of the GET request

https://jsonplaceholder.typicode.com/posts?_offset=1&_limit=2
Copy the code

• Post is used to send data to the server that should be saved. Every POST request should carry the submitted data in the request body, whereas GET requests do not

WebSocketandAjaxWhat is the difference between and how to achieve

Ajax

Asynchronous JS and XML effectively use JS and DOM local Web page replacement asynchronous communication means, only update part of the page XMLHttpRequest has a large number of requests

websocket

A new set of protocols and apis implemented as part of HTML5 can send data to each other, as well as to the client

• Push server sends data directly
• Reduce traffic Always stay connected Reduce overhead Reduce traffic
• Upgrade websocket

What are the application scenarios of WebSocket

The goal of the Web Socket is to achieve full-duplex, two-way communication with the server over a long-term connection. Instead of using http:// or https://, use ws:// and WSS ://. The former is an insecure connection, while the latter is a secure connection

Talk to you aboutIPThe understanding of the

IP protocol at the network layer (IP address and MAC address)

• The IP address can be changed
• The MAC is basically unchanged

Talk to you aboutTCPThe understanding of the

TCP is located at the transport layer, provides byte stream service, uses three-way handshake policy, and uses SYN and ACK flags. It mainly ensures the reliability of data transmission

Talk about thehttpUnderstanding and basic structure of

The communication must start from the client, is not saved protocol, ** stateless ** does not persist persistent connections (to reduce the overhead of repeated connection disconnection)

disadvantages

• Communications using plaintext unencrypted content can be eavesdropped
• Do not authenticate the communicator
• The integrity of the message could not be proved
• Security holes exist

It is located at the application layer like HTTP and provides domain name to IP resolution services

httpwithhttpsBasic concepts, differences, and working principles of protocols

Through communication encryption, there is no encryption mechanism in HTTP protocol, and SSL to establish a combination of communication has an HTTPS

• HTTP Hypertext transfer protocol
• HTTPS Hypertext transfer security protocol
  • Because communication with SSL is moderately slow, encryption and decryption consume resources
  • Certificates cost money

SSL provides encryption, certificates, and md5 SHA-1 hash verification issued by third-party organizations. HTTPS is not a new protocol

SSL is the most widely used security technology

What is the difference between HTTP2 and HTTP1

• Http2.0 has been advancing
  • Speed experience
  • multiplexing
  • The TLS obligation,
  • negotiation
  • The client
  • Flow control
  • websocket

HTTPSHow is it encryptedhttpsThe principle of? Why is HTTPS secure?

Encryption processing and authentication Add encryption and authentication mechanisms to HTTP called HTTPS. SSL is encrypted using the public secret key

Asymmetric encryption

A private key and a public key

CA institution

• Submit an application for the public secret key
• Assigned to a public secret key
• The server sends to the client
• Client gets digital certificate (certificate)

URL vs URI

• urlUniform resource locator specifies the URL at which the document residesThe web addressEnter the web page address
• uriUniform Resource Identifier (URI)
  • U Protocol scheme FTP HTTP Mailto Telnet file
• A URL is a subset of a URI

https://www.baidu.com/s?ie=utf-8&wd=vue&tn=40025628_10_hao_pg
Copy the code

• https:// Protocol scheme name

• www.baidu.com Server address

• 443 Server port number

• Wd = query string

Talk abouthttp 的message

The information used for HTTP interaction is called HTTP packets, which are generally divided into the request line status and line header fields

Content encoding

Common content encoding

• gzip
• compress
• deflate
• identity

mimemechanism

• The multipart/form-data form file is uploaded for use
• Multipart/Byteranges status code 206

When using a collection of objects, add content-Type to the header field

HTTPWhich parts do the request packets contain

• Request method
• The request URI
• The HTTP version number
• Optional request header field
• Content of the entity

GET https://jsonplaceholder.typicode.com/posts?_offset=1&_limit=2 HTTP / 1.1 the user-agent: Fiddler Everywhere Host:jsonplaceholder.typicode.com Content-Type:text/plainCopy the code

HTTPWhat are the components of the response packet

• HTTP version number status code Cause phrase
• Date of response
• The first field
• The subject of the resource entity

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  }
]
Copy the code

Response header field body that is basically optional by protocol version status code cause phrase

HTTPRequest method

HTTP defines a set of request methods that indicate the operation to be performed on a given resource. Indicates the expected action to perform for a given resource. Although they can also be nouns, these request methods are sometimes referred to as HTTP verbs. Each request method implements different semantics, but some common characteristics are shared by a group: for example, a request method can be safe, idempotent, or cacheable.

Method names	usage
GET	The GET method requests a representation of a specified resource. Requests using GET should only be used to GET data.
HEAD	The HEAD method requests the same response as the GET request, but without the response body.
POST	Used to commit entities to a specified resource, often resulting in state changes or side effects on the server.
PUT	The PUT method replaces all current representations of the target resource with the request payload.
DELETE	The DELETE method deletes the specified resource.
CONNECT	The CONNECT method establishes a tunnel to the server identified by the target resource.
OPTIONS	The OPTIONS method is used to describe the communication OPTIONS of the target resource.
TRACE	The TRACE method performs a message loopback test along the path to the target resource.
PATCH	The PATCH method is used to apply partial changes to the resource.

cookieState management

Because HTTP is stateless, it stores session information, which passes through the request and response messages

It is not difficult to findcookieIs composed of several parameters shown in the picture

Set-Cookie: __cfduid=df6eaa5fb405d992b43fb3487389a612c1607999890; expires=Thu, 14-Jan-21 
Copy the code

Notifies the client to save the Cookie

Header field name	instructions	The first type
Set-Cookie	Cookie information used to start state management	Response header field
Cookie	Cookie information received by the server	Request header field

Property of the set-cookie field

​

attribute	instructions
NAME=VALUE	The name of the value
expires=DATE	The period of validity
path=PATH	The file directory serves as the appropriate object for cookies
Domain = domain name
Secure
HttpOnly	limit

disadvantages

1. Domain specific restrictions

2. Browsers limit

3. It doesn’t take up much disk space

4. The total number is mostly limited. If it exceeds, delete the previous one or delete it randomly

5. The size limit is 4096 bytes

6. Data is not kept in a secure environment

httpCommon status codes

Status code When the client sends a request to the server, only about 14 status codes are used to describe the returned request results

1xx	State information	The received request is being processed
2xx	The successful state	Normal processing completed
3xx	Redirection state	Additional actions
4xx	Client error	The server cannot process the request
5xx	Server side error	The server failed to process the request

---

The browser needs to perform some special processing

• 300 “multiple choices”
• 301 “Moved PERMANENTLY” Permanent redirection assigned a new URI
• 302 “Found” temporary redirection Expects the user to access this time using the new URI and not be permanently removed
• 303 the “see Other “client should begetMethods to obtain resources
• 304 “Not Modified” has nothing to do with redirection conditional request
• 305 “use proxy”
• 307 “temporary Redirect “temporary redirects do not change from POS to GET
• 308 “permanent redirect”

---

Client error

• 400 “Bad Request” syntax error, need to modify the request content
• 401 “Unauthorized” Requires authentication information
• 402 “payment required”
• 403 “Forbidden” Denied by the server Not authorized to access the file system
• 404 “not found” Not found resource

---

Server error

• 500 “Internal server error” Indicates a bug. The server execution error occurs

The agent

• Cache proxy Resource copies stored on local disks on the proxy server or client to save communication time
• Transparent proxy

The HTTP header

Headers are divided into request headers and response headers, and some headers are common. Next, we will study some common headers.

Generic header field

Header used by both request and response packets

The field name	instructions
Cache-Control	Controls the behavior of caching
Connection	The type of connection the browser wants to use preferentially, connection management
Date	Date and time of creating a packet
Pragma	Packet instructions
Via	Proxy server information
Transfer-Encoding	Transmission coding mode
Upgrade	The client is required to upgrade the protocol
Warning	There may be errors in the content, error notification

• Cache-control Indicates the working mechanism of the cache

  Cache-Control: no-cache
  Cache-Control: private,max-age=0,no-cache
  Copy the code

  instruction	parameter	instructions
  no-cache		To verify again
  no-store	There is no
  max-age		The maximum age value of the response

• Connection control is no longer forwarded to the agent to manage persistent connections

  Connection	Keep-Alive	Keep-alive is added to maintain persistent connections over older VERSIONS of HTTP

• Date

  Date: Tue, 15 Dec 2020 05:32:53 GMT
  Copy the code

Request header field

The request header field is the field used by the client to send the request packet

The request first	role
Accept	The type of media that can be properly received and handled by the user agent
Accept-Charset	A character set that can be correctly received
Accept-Encoding	A list of encoding formats that can be correctly received
Accept-Language	List of languages that can be received correctly
Expect	Expect the specified behavior of the server
From	Email address of the requester
Host	Server domain name
If-Match	Resource tag comparison at both ends
If-Modified-Since	Local resource unmodified returns 304 (comparison time)
If-None-Match	Local resource unmodified returns 304 (comparison mark)
User-Agent	HTTP client program information
Max-Forwards	Limit the number of times that can be forwarded by proxy and gateway
Proxy-Authorization	Sends authentication information to the proxy server
Range	Request a portion of something
Referer	Represents the previous page visited by the browser
TE	Transmission coding mode

• Accept

  Accept: application/json, text/plain, */* - Text file text/ HTML text/plain text/ CSS application/ XHTML + XML application/ XML - Image file image/ JPEG image/ GIF iMAg/PNG - Video files Video/MPEG video/ QuickTime - Binary files application, OCtet-stream application/zipCopy the code

Response header field

In response to the first	role
Accept-Ranges	Whether certain kinds of scopes are supported
Age	The amount of time a resource exists in the proxy cache
ETag	Resource identifier
Location	The client redirects to a URL
Proxy-Authenticate	Sends authentication information to the proxy server
Server	Server name
WWW-Authenticate	Obtain authentication information required for resources
#### Entity header field

Entity first	role
Allow	The correct way to request a resource
Content-Encoding	The encoding format of the content
Content-Language	The language in which the content is used
Content-Length	The request body length
Content-Location	Alternate address to return data
Content-MD5	MD5 check value of content in Base64 encryption format
Content-Range	The location range of the content
Content-Type	The media type of the content, the object type
Expires	The expiration time of the content
Last_modified	When the content was last modified

httpauthentication

• BASIC Authentication
• DIGEST DIGEST authentication
• SSL client authentication
• FormBase is based on form authentication

7. Design patterns

preface

Unconsciously this is already the fourth chapter of the front-end thick said, in the front-end circle few people share design pattern related things, as for why to share this article, I think I have a few points to say

• 1. Design pattern is only mentioned by tutors in university, but rarely used in actual development. It is not good to write code, but good to organize code
• 2. It’s not just front-end developers who will be interviewing you. Some “older” leaders will ask you about design patterns because it’s their basic skill set
• It is the computer network, design pattern, operating system that is the core of the difference can go long

Okay, HTML, CSS, javascript so let’s talk about design patterns

What are design patterns?

A concise and elegant solution to a specific problem in object-oriented software design

Or is a kind of programming routine, so that the code is better maintenance and so on

What are some common design patterns?

In general, there are about 23 design patterns that we refer to. Js features are prototype mode and vUE observer mode without knowing the truth

Constructor pattern

First of all, let’s talk about the first design mode, which is the constructor mode. If you may be unfamiliar with this name, let’s go back to the time when you were in primary school or middle school. At this time, you were the monitor of the class and the second in charge of the teacher and the head teacher. This is where you come in.

• Wang Erhua, Student One
• Student Class 2 grass li Er egg
• And so on…

Then you say yes

 const wangerhua = {};

      wangerhua.name = "weh";
      wangerhua.age = 16;
      wangerhua.sex = "Female";

      const lierdan = {};

      lierdan.name = "led";
      lierdan.age = 15;
      lierdan.sex = "Male";
Copy the code

In order to play in front of your goddess three dishes, you stay up late to write all the class of more than 40 people, see the roster is about to be finished, you are full of expectations to send your goddess, plan to let her see…… “, but, as a bystander of us, we found that there is a bit of a problem, so stay up late efficiency is not high, although also can create a roster, but this will not get the heart of the goddess. Under the improvement!

 function Student() {
        this.name = "wangerhua";
        this.age = "16";
        this.sex = "Female";
      }
      // Then use the keyword 'new' to create a real 'new'
Copy the code

But now is to write dead affirmation is not good, put three vegetables where right, that easy to handle

  // Then use the keyword 'new' to create a real 'new'

      function Student(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
      }

      constWang Erhua =new Student(' '.' '.' ')
      constLi Er egg =new Student(' '.' '.' ')
Copy the code

Or we can use the most comfortable method es6 class method

class Student {
        constructor(name,age,sex) {
          this.name = name;
          this.age = age;
          this.sex = sex; }}Copy the code

The factory pattern

Its core purpose is to achieve brainless reference transmission. Encapsulate the process of creating an object separately. Generate several classes of objects faster

  function Persion(name,age,profession,work){
            this.name = name
            this.age = age
            this.profession  = profession
            this.work = work
        }
Copy the code

• The first simple factory

 function Factory(name,age,profession){
            let work; // What is it
            switch (profession) {
                case 'coder':
                 work = ['fishing']
                    break;
                    case 'coder':
                 work = ['fishing']
                    break;
                case 'Fisherman':
                    work = ['fishing']
                default:
                    break;
            }
            return new Persion(name,age,profession,work)
        }
Copy the code

• Second factory

  Let’s imagine a scenario. I remember I majored in arts and science when I was a sophomore in high school. I think you, who wrote most of the articles, are science majors

    // name your name
        // Choose your choice
        function factory(name, choose) {
          let stu = [];
          if (type === "Science student") {
            stu = ["Knock code"."Fishing"];
          } else {
            stu = ["Piano chess"."Painting and calligraphy"];
          }
          return new Student(name, stu);
        }
  
        const yayxs = factory("Yang Xiao Yang"."Science student");
  Copy the code

Singleton pattern (vuEX application)

• Definition: Ensures that a class has only one instance and provides a global access point to access it.
• Application: OursvuexThe singleton pattern is applied to ensure global performancestoreAnd the browserThe window object
• A variable is used to indicate whether an object has already been created for a class. If so, the next time an instance of the class is retrieved, the object is returned

For example, let’s imagine a scene where we save our New Year’s money by ourselves and save our own income, but we have only spent 10 yuan. In my mother’s eyes, my New Year’s money is still so much (just because it is new again).

        functionNew Year's money,){
            this.money = 100000
        }
        constMy lucky money =newLucky money () My lucky money10block// My mother
        constMy mother's concept of lucky money =newNew Year's money () my mother's concept of New Year's money. Money =100000
Copy the code

So no matter what we do new returns the same instance,

 class SingletonMode {
            sayHi(){
                console.log('Hello, I'm in singleton mode.')}static isHaveInstance(){
                if(! SingletonMode.isHaveInstance){// There is no take to recreate
                    SingletonMode.instance = new SingletonMode()
                }

                return SingletonMode.instance
            }
        }
Copy the code

Let’s talk about vuex briefly. If we can’t control a vuex globally, our data will be out of order, won’t it

let vue
export function install (_vue){
    if(Vue && _vue===vue){
        // If it already exists, do not create it again
        return
    }
    Vue = _vue
}
Copy the code

Prototype pattern (create an object)

When Brendan Eich designed an object-oriented system for JavaScript, he borrowed two prototype-based languages, Self and Smalltalk. The prototype-based object-oriented system was chosen not because time was in a hurry, it was relatively simple to design, but because Brendan Eich never intended to introduce the concept of classes into JavaScript in the first place.

The prototype pattern we’ll talk about next is not just a design pattern, it’s also called a programming generics.

• Action applies to a pattern for creating objects

The key to the implementation of the prototype pattern is whether the language itself provides the Clone method. ECMAScript 5 provides the object. create method, which can be used to clone objects. Because this article mainly introduces the sharing of design patterns related to the specific analysis of JS apis

   class Coder1{

            constructor(name,age){
                this.name = name
                this.age = age
            }
            like(){
                console.log('i like mofish')}}function Coder2(name,age){
            this.name = name
            this.age = age
        }
        Coder2.prototype.like = function(){
            console.log('i like mofish')}Copy the code

• Constructor Coder2Constructor === Coder2
• Instance object coderYayxs.proto// Prototype object {like: ƒ, constructor: ƒ}

When I try to access the properties/methods of a JavaScript instance, it first searches for the instance itself; When it finds that the instance does not have a corresponding property/method defined, it searches for the instance’s prototype object instead. If it can’t find any of the prototype objects, it searches for the prototype object of the prototype object, and the trajectory of the search is called the prototype chain.

In other words, we create an object using es5 syntax. Of course, the current student has the ability to say his or her own name, but this ability is something everyone has

  function Student(name,age,sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
      
      function sayName(){
          console.log(`Iam The ${this.name}`)}}constWang Erhua =new Student(' '.' '.' ')
      constLi Er egg =new Student(' '.' '.' ')
Copy the code

At this point we can put generic capabilities outside the constructor and code like this

  function Student(name, age, sex) {
        this.name = name;
        this.age = age;
        this.sex = sex;
      // the sayName function is referenced
        this.sayName = sayName;
      }

      function sayName() {
        console.log(`Iam The ${this.name}`);
      }
Copy the code

And then we’re going to use a prototype, like the programmer coder above, and then we’re going to put some generic capabilities (let’s call them that for now) on top of the prototype

 Student.prototype.sayName = function(){}Copy the code

Decorator mode (applied in Nest.js)

It is defined as “wrapping and extending the original object to meet the more complex needs of users without changing it”.

import { Controller, Get } from '@nestjs/common';

@Controller('cats')
export class CatsController {
  @Get()
  findAll(): string {
    return 'This action returns all cats'; }}Copy the code

Adapter pattern (applied in AXIOS)

• application
  • As for whyaxiosThe reason whyaxiosIs such a good library because its API is unified enough, but brings inThe browserAs well asnodeThe ability to request in a unified environment, because it has been adapted in the library, the caller consumer just needs to pass in the unified parameters
  • And then there’s thevueIn the development of componentization, computing attributes are used to transform and adapt some weird data

Proxy mode

• Definition: The proxy mode is a mode in which an object cannot directly access another object due to various considerations/restrictions, and a third party (proxy) is required to indirectly access the object.In the es6 的proxyA Proxy object wraps another object and intercepts other operations such as reads and writes; in short, intercepts operations on the object. Provides a proxy or placeholder for an object to control access to it
• Scenario: lazy loading and merging of imageshttp request
• Other agents:
  • Firewall agent
  • Remote agent
  • Protection agency
  • Intelligent reference

  const user = {
        name: "Yang Xiao Yang".age: 18};/** * Parameter 1 target Object to wrap the object (can be a function) * parameter 2 Handler object proxy configuration interception operation method */
      const  proxy = new Proxy(user, {
          get(user,key){},/** * parameter 1 target Target object * parameter 2 prop Target attribute name * parameter 3 Val Target attribute value * parameter 4 */
          set: function(user, key, val){}});Copy the code

The value is our event proxy mode, so when I click on Li, the parent UL will do the proxy and so on,

Observer mode (vUE’s responsive principle)

The observer pattern defines a one-to-many dependency that allows multiple observer objects to listen to a target object at the same time. When the status of the target object changes, all observer objects will be notified, so that they can automatically update. Some people also call the publisher subscription pattern

class Publisher {
  constructor() {
    this.observers = [];
    console.log("init");
  }
  add(observer) {
    console.log("add");
    this.observers.push(observer);
  }
  remove(observer) {
    console.log("remove");
    this.observers.forEach((item, i) = > {
      if (item === observer) {
        this.observers.splice(i, 1); }}); }notify() {
    console.log("notify");
    this.observers.forEach((item) = > {
      item.update(this); }); }}class Observer {
  constructor() {
    console.log("init");
  }
  update() {
    console.log("update"); }}Copy the code

What books have I read

• I haven’t read any books about HTML

• I have read CSS world briefly about CSS

• I read a little book about CSS JowayYoung playing with the beauty of CSS art

• I’ve read almost two modern JavaScript tutorials on JavaScript

  

• For JavaScript I read JavaScript Advanced Programming (version 4)

• I’ve read JavaScript volumes you don’t know about

• I read the diagram HTTP about computer networking

• For design patterns I read JavaScript Design Patterns and development practices

• I read about Flutter in action

• I read webpack in a nutshell

• I read about typescript and understand typescript in depth

• I read vue.js about vue in a nutshell

• About VUE I read a deep understanding of vue. Js actual combat

Talk about vertical Vue

For a brief reflection, in 2020, I did flutter at the beginning of the year, then VUE in the middle of the year, then REACT, and then VUE recently. This year was too fast, I was always rushing as if rushing something. On the National Day, I got a plaster on my neck, just because I stared at the computer with my head down after work. Just because it’s too fast, let’s start with vue3

vue3

• The first thing you need to do is look at the Composition API, not to mention the RFC website, right
• Second, you can take a look at this project if you have to write your project in new stuff vue-vben-admin
• This project should have what you want to know about VUE3 -News

If you want to write platform web projects, that’s where you read them

• Ant-design-vue of Teacher Tang and his friends
• classic

If you’re writing a mobile web page (not an app)

• Really good Vant

vue2

If you really want to receive vUE, it is not recommended to watch the video, even if you are the up owner. If you recommend a teacher, coderwhy

2019 latest Vue, Vuejs tutorials, from beginner to master

I don’t recommend watching videos though, as I enjoyed researching Big Guy’s code in the second half of 2020

• Teacher Hua’s admin project should inspire and help many people in many circles including the boss of the boss
• He must be a genius. He could read the code

Iv. Community outcomes

If so, which one to start with? Let’s start with cloud suppression.

Netease cloud

Although I wrote a little bit about the netease cloud project using React, I stopped updating it for dozens of days. You will see it when it is updated in 2021. There is no need to see it now

• React16.13.1 network cloud field suppression (first week) | axios encapsulation, shuffling figure implementation, alias alias As the star of this article (article I firmly believe that the article must be great enough)
• React16.13.1 network cloud field suppression (2 weeks) | article play double component, routing configuration, Api project deployment

The above article need not see dozens of days do not update

• Accompanying Video 1
• Accompanying Video 2

In fact that’s not what I want to say, but about music, I think everybody in sharing network cloud suppression to summarize a few days ago, I am a little open and found that I didn’t quite long at all, didn’t listen to a few songs, but now when listening to and reading school is not the same, no longer listen to those songs widely spread-and deeply felt moaning whinge-bags Love love Or a short video of music, the heart of pins and needles, I used to rap new Generation and now I’m mostly listening to rap. Amway, bottom of ninth inning hot dog

WeChat

WeChat this has a number of public, but only a few days to get up early every day to send articles, may not have realized how play, mainly their haven’t a lot of focus on, still have even if I don’t like friends, WeChat in addition to chat, no harvest, no achievements, preliminary estimates go around November 2021 WeChat public, So if you saw my article before and asked you to scan the code and pay attention to it, just ignore it and do not update it. There is no need to take up your memory. If you think I am ok, you can add wechat.

zhihu

Talking about Zhihu, 2020 a year did not write how, but to promote some of their own ideas effect is quite good, which programmer does not play Zhihu, just off the plane, 2021 around should pay attention to it, after all, there are a lot of stars in the community topics in Zhihu, such as what

• What if ElementUI is no longer maintained and Vue 3 is no longer supported
• What do you think of Element3 and Ant Design Vue’s skepticism of Element Plus?
• How do you view gin-vue-admin authors working on open source projects?
• Who are the people making fun of Vue-Admin-beautiful and how do they feel about being used?

Wait, the above does not represent my point of view, but I have mentioned to Zhihu whether we can support md format, in the future to write articles should be digging gold zhihu, a lock, expand the scope of their own community

So Zhihu 2021, come on

B station

Let’s talk about it. Let’s look at the data

I am also an UP master, and I am proud to share something with you. Some of my series are profound

1. At that time, the camera was not sold for economic reasons
2. Also, I broadcast my reading live on July 2nd, or recorded it. I remember but I said in the group whether we should read together and supervise each other
3. Do YOU still update react? I think I will update react when I’m ready

Thinking about station B, after adapting to the new job tomorrow, I will share front-end or skills from a macro perspective. Hope to break through 1000 fans, and then tell me about B station community, may be a lot of children’s shoes is studied in B, but I personally don’t recommend watching video learning, especially if you already know what you’re lacking or know what things, even if I am too up Lord, why do you say that? Because up to say good, doesn’t mean you can read also can write, Still have be to speak bad that you finished ha ha all be fooled, that I simply recommend a few

• Fat uncle from the initial details to now macro 188,000 attention
• If you can’t get into the Flutter anyway, not much update but enough for 3658
• The solemn voice and cicadas remind me of the stars after the quiet dinner in my childhood
• The top of the stack is all about nestJS
• In the second half of 2020, learn his understanding of React

Outside of the technology will not say luo Xiang teacher he students in the next philosophy not to tease Sichuan wood fish water heart and so on, they are my every night off the class of entertainment, accompany me day after day, the whole 2020.

As for the thinking of station B, I think it has helped a lot of students who like programming. In 2021, I will consider writing a complete project and then producing a set. After all, I am also a heavy user

github

Look at my Github feeling quite deep, because it contains my submission of my Github again and again

• I submitted around 733 in 2020
• The current harvest of star 157

It’s important that I sort out my front line

• Advanced warehouse frontend-thick-talk based on basic knowledge and skills
• Top-fe-iqa Interview questions Warehouse based on job-hopping interview

In 2021, I would write a project from the point of view of H5, and then standardize engineering, such as

• Editor configuration

• Prettier. Config. Js configuration

Wait, this will be a reference to the current community of good projects, followed by the maintenance of a library of its own, all in progress, when the time is ripe. As for Github, I think you should take good care of it, because it is your intangible wealth that is slowly accumulated

The Denver nuggets

Nuggets really is my 2020, including what time I hair of what, even in Denver community, only can even think of me is written in what scenario documents, sometimes in early in the morning, sometimes in the middle of the night, but now a little article is wrong and even inappropriate or not comprehensive, oneself also is at the end of the year to write articles updated before

hello 2019.. It’s impossible to slow you down. This year.. I went from the laughing teenager who swiped Douyin and played Weibo to the quiet boy who went to B station to read nuggets and write articles. This year.. I’m still using a sloppy apple 6.. Around some more excellent efforts of the programmer friends.. I saw an essay on the subway one morning I can’t remember. And on a specific shift of the bus wrote with emotion.. Share some of your own advice with others… But will no longer write down the details of life.. 2019 has come a lot.. Some people and things have disappeared… And I’m not as good as most people… Will crop the video.. Know movies.. Play a good game.. Some people lose weight successfully.. Someone has a family and a career.. Occasionally write open source projects when bored.. I am really a failure.. Very stupid and clumsy programmer.. But what makes you happy… In 2019, I found the man I used to be.. The one who still believes that hard work pays off. Improved a bit in 2019.. You’ll be in the tech group talking to you on the other side of the screen… Know how to read English documents.. Actually think the code is interesting.. Words are sometimes more vivid than words. I probably don’t care what I hear… When you really read an article… But more and more deep memory..

The above is excerpted from the 2019 annual summary

2020 you want to say to you:

2020 is still going fast. Your clunky iPhone has been replaced by a 12 and you bought your mother a new phone. In 2020, you will still be digging gold b station two apps

In 2020, you have already edited several videos. In fact, you still stayed up until 5 o ‘clock in the reading and sharing episode, but you watched other people’s commentary

2020 you’re already on a diet and you clocked in for 5 days at the Nuggets’ boiling point event and still won the lottery lol

You don’t mix up the flutter group much in 2020 because you write more about vue

In 2020, you’ll still be alone. This hopeless gold digger has a blind date

Another thing is that your blog is already very systematic

learning

• React Hooks+ Consolidate class syntax
• Follow the big guy Vue 3X
• Flutter solution
• Node.js + top layer framework

Let 2020 me tell you about the points you made in 2019

You’re already writing projects with React in 2020

Vue3 2020 is coming to an end and still not very mature

You don’t write much about Flutter in 2020

How is your Node in 2020 actually written to you in 2021

community

There is also talk about the whole community, I know fewer people, or limited to their own wechat group, QQ group, in fact, should embrace more excellent people, just say that there are various gods, I think everyone knows THAT I will not say, But speaking of the flying wooden fish and Flutter candies I’ve seen, I’m wondering if I can meet some great people in 2021 to take me to, in general, multiple friends and multiple paths

Five, the outlook

In 2021, the first thing should be jump jump, followed by the balance of work and study of time allocation, and then may be moved, the whole year, the heart should be on the algorithm, the first half of the time should be in Vue to take a good look at the Chinese community source code article

• Analyze vue.js source code line by line

Promise and browser and Webpack Node were not mentioned in the first knowledge sharing session. These will be the focus of the second half of 2021

Six, gratitude

The nuggets community activities, I remember how many people is the first time to participate in the activities on the coveted gift, the boiling point of Thanksgiving But this time I just want to thank yourself, in this 2020 I basic staring at a computer, every day in a week spend less time on mobile phones, mobile phones have a statistical weekly spend on the phone, I don’t have a short video app on my mobile phone. Maybe I have been staring at the computer for a long time, and the posture of sitting is not right. During the National Day holiday, I bought a plaster on JINGdong and put it on much better. In 2020, I gained a few pounds by not exercising for a long time. I started a gym almost in January, running every day and eating fruits in the evening. I sold the backlighting lamp and camera I had made UP before. Wait, oneself also just work more than 1 year, do not have a lot of savings, step by step, 32G apple 6 mobile phone I used 3 years, because of the card is not good, recently changed 12, weight is also a little thin, there is a drop, make persistent efforts before the Spring Festival. Or warned the big guy, the body take good care of yourself, take care of cervical vertebra is too heavy, I confess that I do not spend enough time in the university spent on academic, would lead to now so passive, but I didn’t give up, no no target, every step, I plan to which aspects such as myself a lot this week, this month focus there, in the work and how their work time planning, In September and October, the interview went smoothly, but still after the New Year, it is said that there are many opportunities after the New Year, in 202 urban areas quite many, first of all, my girlfriend did not, I also moved to a place close to the company, so I have enough time to read books every day. Or writing code or sharing video technology, choosing not to say anything that can or cannot be said, and spending all the time not going out to play is in the rental room

About my old cell phone

Every time I scan a health bag, my “broken mobile phone” makes people wait for a long time. In the first few days of December 2020, I finally changed it. Before THAT, I bought a mobile phone for my mother, although it is not as good as mine

About my little desk

Denver annual essay | 2020 technical way with me The campaign is under way…