preface

First of all, I would like to thank some colleagues for their affirmation. Welcome to forward the public account, to more suitable friends, but be sure to add the source of the article, respect all the authors (Nugget forum: step by step forward, juejin.cn/post/686771…

Secondly, the article title is “outline”, just the author, sort out a review outline to oneself.

Perhaps the content is not in-depth, because the title and definition of the article is the outline, and it is not expected that an article can teach the corresponding knowledge points mentioned. No matter which knowledge point, the most basic thing of a prototype chain, can be deeply dug, god can be put on tens of thousands of words, may not be able to let all people understand, training institutions tens of thousands of tuition, may not dare to say a package you understand, and the author is just a free outline summary? This article is only an outline. Everyone which knowledge point is not familiar with, should learn to find their own omissions to fill the gaps, their own learning to go deep.

Because time is limited, energy is limited, ability is also limited, forgive, also welcome your point out, everyone progress together, I am the gold: step by step forward, I hope everyone together step by step forward. Guangzhou is suitable for the push, you can also contact me. Leave a message.

** The next part, unlike the first part, is an open answer, also due to personal time reasons, so only provide a brief introduction, or a third party link. 支那

The outline

There are two chapters in this chapter:

  • The first part mainly HTML, CSS, JS, ES6, browser and other basic knowledge.
  • The next part is mainly handwritten API, network programming foundation, design pattern foundation, source code guidelines, framework review guidelines, etc.

Among them, this article is the next one, the link of the first one is: juejin.cn/post/686771…

3. Consolidate front-end infrastructure

The key points of this chapter, the classification of the knowledge points provided, and the key points. Specific knowledge points do not make redundant introduction. (If you are not familiar with the knowledge, it is recommended to focus on a surprise supplement.)

1

1. What are the ways to remove weight from the front end?

Read an article that is punctuated with twelve, you can refer to: segmentfault.com/a/119000001…

But the content feels like a lot of repetition, and a bit of repetition for the sake of repetition. Here are a few possible ways to do this in my head (keyword thinking, too much code to provide) :

  • 1. Use Set to remove the array. It’s also the most practical approach for ES6
  • 2. Using Map,
  • 3.for for splice/del
  • 4.indexOf
  • 5.sort
  • 6.includes
  • 7.hasOwnProperty
  • 8.filter
  • 9. Recursion

2. What are the front-end asynchronous solutions?

1) Promise 2) Generator 3) Async /await 4) event publishing/listening mode

Async and await have the advantage of processing the chain of then calls, which is more clear and accurate than using Promise directly. The downside is that abusing the await can cause performance problems because the await blocks code that may not be dependent on the subsequent asynchronous code but still needs to wait for the former to complete, causing the code to lose concurrency.

3. What are front-end network requests?

Ajax, fetch, axios.

In a simple statement, Ajax is eliminated because it does not support promise, so fetch has many defects. Fetch does not support catching exceptions, does not support listening to progress bars, and is not friendly to cookies. So, axios waves today.

Interested to know, recommend: juejin.cn/post/684490…

4. What are the front-end timers?

Asynchronous programming, of course, is not the timer, the common timer functions are setTimeout, setInterval, requestAnimationFrame. Let’s start with the most common one, setTimeout. A lot of people think setTimeout is how long, so it should be how long. This is wrong, because JS is executed in a single thread, and if the previous code affects performance, the setTimeout will not be executed as scheduled. Of course, we can fix the setTimeout in code to make the timer relatively accurate

First, requestAnimationFrame has its own function throttling function, which can be executed only once in 16.6 milliseconds (without losing frames), and the delay effect of this function is accurate. There are no other timer errors. Of course, you can also use this function to implement setTimeout.

5. What are the ways to create objects on the front end?

This knowledge point only do summary prompt, do not do specific analysis. Please search for information and fill in gaps.

  • 1)var obj = new Object();

  • 2)var obj = {name: ‘xiaoming’}

  • 3) Factory mode

     function createObj(name){
  	var o = new Object();
  	o.name = name;
  	o.fun = function(){
  	}
  	return o;
  }
  
Copy the code

  • 4) The constructor

      function TestObj(name){
  	this.name = name;
  }
Copy the code

  • 5) Prototype creation

    Function TestObj(){} person.prototype. name = 'TestObj '; };Copy the code

  • 6) Constructor + prototype creation

  • 7) class

6. What are the inheritance methods of the front end?

  • 1. Prototype chain inheritance is essentially overwriting the object. Disadvantages: 1) Object instances share all inherited properties and methods. 2) Cannot pass arguments

  • 2. Constructor inheritance calls the supertype constructor inside the subclass constructor. Use the apply() and call() method disadvantages: 1) function reuse is not high, each instance is a re-instantiation constructor, there is no shared attribute 2) only inheritance of the attributes on the instance, the method on the prototype is not visible

  • 3. Composition inheritance nature: prototype chain + constructor parent-.call (this) new Parent() avoids the above disadvantages and is commonly used. Advantages: passable parameters, do not share with the parent class reference properties disadvantages: inheriting the parent class function when calling the parent class constructor, resulting in more than the parent class prototype attributes, there is a waste of memory.

  • The object () function performs a shallow copy of the object passed into it

  • 5. Parasitic inheritance borrows from constructors to inherit properties and inherits methods through a blend of prototype chains

  • 6. Parasitic combination efficiency only calls the constructor once, which combines the advantages of parasitic inheritance and combination inheritance, is the most efficient way to achieve type-based inheritance. Is the prototype of the Parent class assignment to the subclasses, and set the constructor for the subclass, such already solved the problem of Parent class attribute of the Parent. The useless call + Object. The create ()

More details can be referred to: juejin.cn/post/684490…

7. What are the ways to reuse front-end code?

This knowledge point only do summary prompt, do not do specific analysis. Please search for information and fill in gaps.

  • 1) Function encapsulation
  • 2) inheritance
  • 3) Copy extend
  • 4) mixin mixins
  • 5) I don’t know

2) Handwritten API

This part, nonsense not to say, directly to the corresponding code! If there are other important handwritten code, the message writer will consider adding.

Have source code do not understand the friends, can query information, or pay attention to the author’s explanation: juejin.cn/post/686940…

Also refer to the front end of the persuaders: juejin.cn/post/684490…

1.new

function createThis( proto ){
    var obj = new Object;
    obj.__proto__ = proto.prototype;
    let [ constructor,  ...args] = [ ...arguments ];
    let result = constructor.apply( obj, args );
    return typeof result === 'object' ? result : obj;
}
Copy the code

2.apply/call/bind

Function.prototype.wzApply = function (context) { const thisContext = context ? context : windows; thisContext.fn = this; var result = null; if (arguments[1]) { result = thisContext.fn(... arguments[1]); } else { result = thisContext.fn(); } delete thisContext.fn; return result; } Function.prototype.wzCall = function (context) { const thisContext = context ? context : windows; thisContext.fn = this; var result = null; var args = [...arguments].slice(1) if (args) { result = thisContext.fn(... args); } else { result = thisContext.fn(); } delete thisContext.fn; return result; } Function.prototype.wzBind = function (context) { var _this = this; var arg = [...arguments].slice(1); return function F(){ if( this instanceof F ){ return new _this(arg.concat(... arguments)); } return _this.apply( context, arg.concat(... arguments) ); }}Copy the code

3.instanceOf

function _instanceof(A, B) { var O = B.prototype; A = a. __proto__; While (true) {// object.prototype. __proto__ === null if (A === null) return false; if (O === A) return true; A = A.__proto__; }}Copy the code

4. Obtain URL parameters

function getQuery( params ){ var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0; i<vars.length; i++) { var pair = vars[i].split("="); if(pair[0] == params ){return pair[1]; } } return(false); }Copy the code

5. Simulate deep copy

Jane version of the code, such as the need to further advice: www.kancloud.cn/ljw78947894…

function deepClone(initalObj, finalObj) {    
  var obj = finalObj || {};    
  for (var i in initalObj) {        
    var prop = initalObj[i];        // 避免相互引用对象导致死循环，如initalObj.a = initalObj的情况
    if(prop === obj) {            
      continue;
    }        
    if (typeof prop === 'object') {
      obj[i] = (prop.constructor === Array) ? [] : {};            
      arguments.callee(prop, obj[i]);
    } else {
      obj[i] = prop;
    }
  }    
  return obj;
}
Copy the code

6. Shake and throttling

const debounce = (cb, wait = 500, immediate = true) => { let timer = 0; let context = null; let param = null; const later = () => setTimeout(() => { timer = null; if (! immediate) { cb.apply(context, param); context = null; param = null; } }, wait); return function (... args) { if (! timer) { timer = later(); if (immediate) { cb.apply(this, args); } else { context = this; param = args; } } else { clearTimeout(timer); time = later(); } } } const throttle= (func, delay=500 ){ var timer = 0; var startTime = Date.now(); return function( ... args ){ var context = this; var currentTime = Date.now(); Var diffTime = currentTime - startTime; // clearTimeout(timer); if( diffTime > delay){ func.apply( context, args); startTime = Date.now(); }else{ timer = setTimeout( function(){ throttle( func, delay); }); }}}Copy the code

7. Handwritten iterator next

	function createIterator(items) {
	    var i = 0;
	    return {
	        next: function() {
	            var done = (i >= items.length);
	            var value = !done ? items[i++] : undefined;
	            return {
	                done: done,
	                value: value
	            };
	        }
	    };
	}
	var iterator = createIterator([1, 2, 3]);
Copy the code

8. Handwritten Object. Freeze

function tFreeze(obj){ if(obj instanceof Object){ Object.seal(obj); For (let key in obj){if(obj. HasOwnProperty (key)){object.defineProperty (obj,key,{writable:false}) myFreeze(obj[key]); }}}Copy the code

3) framework source understanding

Source code is the focus of many enterprises, do not understand the source code does not matter, but to understand the source code is about what, what is the principle of the general. The content of this chapter is relatively large, so the author will not analyze it in this article alone.

The author himself is also in a state of exploration or learning. If you have 2 to 5 years of work experience, want to learn the source code, you can refer to the author of the past to write articles, that is the author review ideas.

List of knowledge points, are the key points of the key.

If you have a certain foundation, or read the source code, or feel that there are better posts on the Internet, you can learn from other places, do not like spray. **(the author is also learning to write down the source code, there are deficiencies or misunderstanding, a lot of inclusion and discussion) **

1. The vue source code

My mini version of the grass: juejin.cn/post/684790…

2. The react the source code

My mini version of the grass: juejin.cn/post/685457…

3. Wepback source code

My mini version of the grass: juejin.cn/post/685457…

4. Vuex source code

My mini version of the grass: juejin.cn/post/685705…

5. Vue route source

My mini version of the grass: juejin.cn/post/686010…

6. The diff source code

My mini version of the grass: juejin.cn/post/686881…

7. Promise the source code

My mini version of the grass: juejin.cn/post/686920…

8. The react system

React Fiber, React Redux, React Hook, etc.

The React Fiber: juejin. Cn/post / 685952…

The React Hook: juejin. Cn/post / 686774…

The React redux: juejin. Cn/post / 684490…

4) Tool expansion

1.babel

Concept part copy: juejin.cn/post/684490…

Babel is a toolchain designed to make ECMAScript 2015+ version code backward compatible with Javascript syntax so that it can run in older browsers or other environments. The three main processing steps of Babel are parse, Transform, and generate.

  • parsing

Parse code into an abstract syntax tree (AST). Each JS engine (such as Chrome’s V8) has its own AST parser, and Babel is implemented in Babylon. There are two stages in the parsing process: lexical analysis and syntax analysis. Lexical analysis converts string code into a stream of tokens, which are similar to nodes in an AST. The parsing phase converts a token flow into an AST, and the information in the token is converted into an AST representation.

  • conversion

At this stage, Babel accepts the AST and traverses it through the Babel-traverse depth-first, adding, updating, and removing nodes along the way. This is where the Babel plug-in comes in.

  • generate

The converted AST is then converted to JS code via babel-Generator by depth first traversing the entire AST and then building a string that can represent the converted code.

  • Babel-traverse makes the journey from Babylon to ES5, using babel-Generator to convert the new AST to ES5

  • babel/babel-polyfill

  • Babel-polyfill: transcode of ES6. IE compatibility

2.nignx

Non-professionals, but the front end people still need to know how to deploy the front end.

Simply to popularize nignx, Nginx can be simply understood as a high-performance Web and reverse proxy server developed.

Understand how Nigix implements forward proxy, reverse proxy, and load balancing. This article does not focus on the introduction, interested in please go to: juejin.cn/post/684490…

3. CSR and SSR

SSR(Server Side Rendering) : Traditional Rendering in which the Server renders the entire page to the client. This reduces one HTTP request from the client to the server, speeds up the corresponding speed, and is generally used for first-screen performance optimization.

CSR(Client Side Rendering) is a popular Rendering method that relies on JS running on the Client Side and allows the user to get only a small amount of instructional HTML code on the first request. The second request will ask for more JS files containing HTML strings.

SSR advantages: 1) beneficial to SEO optimization 2) fast first screen

Defects: 1) performance is all dependent on the server; 2) only static, interaction effect is still CSR; front-end interface development is not highly operable; 3) limited development conditions, life cycle, etc.

On the contrary, CSR is not conducive to SEO, the first screen is slow, but the interaction effect is good.

4.web Worker

Want to know the friends move: juejin.cn/post/684490…

4. Programming related

This is “programmatic” rather than “front-end” because this is the basis that developers on either side of the client must learn. Needless to say, this article enumerate the knowledge point of the previous end hook.

1) Design patterns

Design pattern is a kind of thinking. There are altogether 23 design patterns, including creation type, structure type and behavior type. This article gives a brief description of some of the design patterns used in the front end.

  • If you want to understand the comprehensive, can refer to the author has written an article: juejin.cn/post/684490…
  • In addition, “Xu Xiaoxi” is also good. Juejin. Cn/post / 684490…

1. Singletons

Does an “instance” that is likely to be repeated consume performance if it is repeatedly created? If we use the first instance, we only reuse that instance later, thus achieving our goal of saving performance.

Perhaps a friend of the server knows what a database connection pool is, and this is the classic pattern of a singleton, database connection pool, and each time a database connection is created, the efficiency value will be vastly different. This is the beauty of the singleton pattern.

In our front-end practice, we can often borrow this thinking. For example, when you log in to a pop-up and cancel the re-pop-up, the original pop-up is displayed instead of recreating it.

var myLogin = function( fn ){ var result; Return the function () {return result | | (result = '< div > I am a login box < / div >'); }}Copy the code

2. Factory mode

There are technically two types of design patterns, one called simple factory and one abstract factory.

The simple factory pattern is called the static factory method pattern, where a factory object determines which instances of a product class are created. For example, Foxconn needs to produce huawei, Apple and other mobile phones at the same time. We can use a model of a factory. As long as the manufacturer inputs the model, the corresponding mobile phone can be produced.

Abstract factory, one more abstract object. Abstract factories are at the heart of the factory method pattern, and all factory classes that create objects must implement this interface. As such, if you also need the phone color, memory size, together to determine the step of the phone, this is the abstract factory. Abstract factory also requires the user to obtain the corresponding class instance according to the parameter, which avoids direct instantiation of the class and reduces the coupling.

3. Policy mode

The simpler way to think about it is to give different algorithms or different results for different states. Define policy groups and define different policies according to different states. Examples of our front end, such as our form validation. His strengths:

  • 1. The algorithm can be switched freely.
  • 2. Avoid using multiple conditions.
  • 3. Good expansibility.

Disadvantages:

  • 1. Policy classes will increase.
  • 2. All policy classes need to be exposed.

4. Chain of Responsibility model

An execution chain that handles responsibility for related transactions. For example, events bubble in front-end JS, passing layer after layer up. Advantages:

  • 1, reduce the coupling degree. It decouples the sender and receiver of the request.
  • 2. Simplify objects. So that the object does not need to know the chain structure.
  • 3. Increase flexibility in assigning responsibilities to objects. Allows responsibilities to be added or removed dynamically by changing members in the chain or reordering them.
  • It is convenient to add a new request handling class.

Disadvantages: There is no guarantee that the request will be received; Code debugging is not convenient, may cause a circular call;

5. Observer Mode (Vue)

  • Observer mode: Observers Subscribe directly to a Subject and Fire events in the Observer when the Subject is activated.

  • Publish subscribe pattern: Subscribers register and Subscribe the event they want to Subscribe to the Topic. When the Publisher publishes the event to the scheduling center, that is, the event is triggered. The processing code registered to the dispatch center by Fire Event subscribers.

The publish subscribe pattern is a generalized observer pattern. With the precipitation of time, it is gradually independent of the observer mode and becomes another different design mode.

This is a good one:Blog.csdn.net/hf872914334…

Vue two-way binding thinking design mode, Vue players must dig into.

7. React mode

Decorator patterns allow new functionality to be added to an existing object without changing its structure. It’s kind of like the way our picture frames relate to photos.

  • Advantage: The decorator class and the decorator class can develop independently and are not coupled to each other.
  • Disadvantages: Multi-layer decoration will appear more complex.

React high level component thinking, React players have to dig into it.

2) Network protocol

I would like to list a few key points. Suggest direct tiantianUp article, write more suitable for the audience (unlike write more suitable for their own, their own reading is to write a point to associate).

References in this section:

  • Consolidate your knowledge of HTTP: juejin.cn/post/685728…
  • 2. The front end essential basic knowledge of HTTP: www.jianshu.com/p/20bd68e95…
  • 3.12 Front End Sprint essential guide: juejin.cn/post/684490…

1. The HTTP features

advantages

  • 1. Simple and fast

The URI of each resource is fixed. To access a resource, you only need to enter the corresponding URI of the resource. Uniform Resource Location (URL) and Uniform Resource Identifier (URI). A URL is a subset of a URI, which is a URI implemented in the form of a location.

  • 2. The flexible

Each HTTP header has a content-type. An HTTP protocol can transmit different types of resources by setting different content-type values.

  • 3. No connection

Limit processing to one request per connection. When the server finishes processing the customer’s request and receives the customer’s reply, it disconnects. In this way, transmission time can be saved.

  • 4. A stateless

The HTTP protocol has no memory for transactions. A simple reply from Zhihu is very good: it is the second time you can not recognize it has been here. However, with the addition of cookies and sessions, network requests are now stateful.

disadvantages

  • 1. Stateless, sometimes, need to save information, such as shopping system, need to keep customer information, etc., on the other hand, sometimes, stateless can also reduce the network overhead, such as live broadcasting industry, etc., this is still a scene.
  • 2. In plaintext transmission, packets (mainly the header) are transmitted in text rather than binary data. In this way, HTTP packet information is exposed to the outside world, which brings convenience to attackers.
  • 3. Queue header blocking: When the long connection is enabled for HTTP, the TCP connection is shared. When a request takes a long time, other requests are blocked.

2.https

  • For HTTPS, you need to apply for a certificate from the CA. Generally, there are few free certificates and you need to pay a fee.
  • HTTP runs over TCP, and all content transmitted is in plain text. HTTPS runs over SSL/TLS, which runs over TCP, and all content transmitted is encrypted.
  • HTTP and HTTPS use completely different connections and ports (80 and 443).
  • HTTPS can effectively prevent carrier hijacking and solve a big problem of anti-hijacking.

3. Http1.1

  • Cache handling
  • Bandwidth optimization
  • Improvement of exception codes, 24 new error status response codes,
  • The Host header processing
  • A long connection

4. Http2.0

  • The header compression
  • New binary format
  • multiplexing
  • Server push

5. HTTP cache

See the browser cache section in the previous section.

6. Common status code

1xx: Indicates that the request has been accepted and needs to be processed. 2xx: Indicates the success. 3xx: indicates the redirection status. 4xx: The client is incorrect. 5xx: The server is faulty.

7. The DNS

Browser cache – >> local hosts file – >> Local DNS resolver – >> Local DNS server – >> Requests from other DNS servers.

8. Three handshakes

  • First handshake: When the connection is established, the client sends a SYN packet (seq=j) to the server and enters the SYN_SENT state, waiting for the server to confirm. SYN: synchronization Sequence Numbers.
  • Second handshake: When the server receives a SYN packet, it must acknowledge the client’s SYN (ACK =j+1) and send a SYN packet (SEq =k). Then the server enters the SYN_RECV state.
  • Third handshake: After receiving the SYN+ACK packet from the server, the client sends an ACK packet (ACK =k+1) to the server. After the ACK packet is sent, the client and server enter the ESTABLISHED state (TCP connection succeeds) and complete the three-way handshake.

9. Four waves

  • 1. The client sends a request packet to disconnect the TCP connection. The packet contains the SEQ sequence number, which is randomly generated by the sender. (FIN=1, seq=x, x is randomly generated by the client)
  • 2, the server will reply the client sends a TCP disconnect request packet, which includes a seq serial number, is randomly generated by the reply end, fields, and will produce an ACK ACK field value is based on a client sending a seq serial number + 1 to reply, so that the client receives the information, know their own TCP disconnect request has been verified. (FIN=1, ACK=x+1, seq=y, y is randomly generated by the server)
  • 3. After replying to the CLIENT’s TCP disconnection request, the server will not immediately disconnect the TCP connection. The server will first ensure that all the data transmitted to A has been transmitted before the disconnection. (FIN=1, ACK=x+1, seq=z, z is randomly generated by the server)
  • 4. After receiving the TCP disconnection request from the server, the client will reply the disconnection request from the server, including randomly generated SEQ fields and ACK fields. The ACK field will add 1 to the SEQ of the TCP disconnection request from the server, so as to complete the authentication reply of the server request. (FIN=1, ACK=z+1, seq=h, h is randomly generated on the client)

V. Front-end Framework (Review Guide)

This chapter, this plan lists all the knowledge points. Follow-up found that there are many good articles, coupled with the lack of time, to avoid this article did not follow, the author to do a simple guide. (There will be a separate article for this chapter in the future, but the time is not yet certain. Please look forward to it if you are interested.)

1) the Vue

  • Forested: juejin.cn/post/684490…
  • Boy: juejin.cn/post/684490…
  • Coderfei: juejin. Cn/post / 684490…
  • Bian Bian village head: juejin.cn/post/684490…

2) the React

  • Riding a snail to a brothel: juejin.cn/post/684490…
  • RNG cow force: segmentfault.com/a/119000001…
  • JAVA advanced road: zhuanlan.zhihu.com/p/91725031

Article time is limited, hope to understand. I’m from the Nuggets”Step by step”.Juejin. Cn/user / 419539…