Web front-End Knowledge Outline: series One JS article

The large and complex knowledge architecture of the Web front-end:html, CSS, and JavaScript

A. js

1. Basic Syntax

The basic Javascript syntax includes: variable declarations, data types, functions, control statements, built-in objects, and so on.

In ES5, there are two ways in which variable declarations are var and function, Var is used to declare ordinary variables, to receive arbitrary types, and function to declare functions. In addition, ES6 adds four commands such as let, const, import, and class to declare common variables, static variables, modules, and classes, respectively.

There are six types of JS data, String, number, Boolean, Null, Undefined, and Object, respectively, and ES6 new symbol type. Where Object is a reference type, and the other is the original type (Primitive type).

The primitive type, also known as the base type or simple type, because it occupies space fixed, is a simple data segment, in order to facilitate the variable query speed, stored in the stack (by value access). To facilitate the operation of such data, ECMAScript provides 3 basic wrapper types: Boolean, number, and String. The basic wrapper type is a special type of reference, and whenever a basic type value is read, JS internally creates a corresponding wrapper object, which can be invoked to manipulate the data.

A reference type cannot be stored in the stack because its value is changed, so it is stored in the heap, the value stored in the variable is a pointer, to the memory of the storage object (accessed by the site), and for the value of the reference type, you can add properties and methods to it. You can also change and delete its properties and methods, but you cannot add properties and methods to the base type.

Javascript can judge the original data type through typeof, but cannot judge the reference type, and to know the specific type of the reference type, it needs to be judged by the ToString method on the Object prototype.

There are three roles in JS function: normal function, constructor, object method. The same function, the invocation way, the function is different, the role is not the same. The direct invocation is the normal function, which is the constructor when the object is created by new, and is the method when called by the object.

JS commonly used built-in objects such as window, Date, Array, JSON, regexp, etc., window is a browser in the execution of the script when the global object, mainly describes the browser window related properties and state, this later, the Date and Array use the most scenes, JSON is primarily used for the serialization and deserialization of objects, and one effect is to implement deep copies of objects. REGEXP is the regular expression, which is a powerful tool for processing strings.

2. Function prototype chain

JS is an object-based language, but before the ES6 is not support inheritance, in order to have the ability to inherit, Javascript on the function object to establish a prototype object prototype, and the function object as the main line, from top to bottom, in the JS internal construction of a Prototype chain . The prototype chain links individual objects together, and object is the ancestor of all objects, and the prototype chain created by any object eventually points to object and ends with object.

In simple terms, a variable lookup mechanism is established, and when a property of an object is accessed, the object itself is found, and if it does not exist, it goes to the prototype where the object is located, until the object is found, and the property is returned if it is not undefined. Therefore, we can use the prototype chain to achieve JS inheritance.

3. Function scope

Function scopes are defined by variables in the body of the function in which they are declared and in any function within which the body of the function is nested. Therefore, there is no block-level scope in JS, only the function scope, this design led to the problem of variable elevation in JS. Simply put, the variable declaration is promoted to the very beginning of its scope, and in order to resolve the side effects of the variable promotion, ES6 adds a let command to declare the variable, which is only valid within the code block where the Let command resides, so there is no variable elevation problem.

4.this pointer

The this pointer exists in the function to identify the context in which the function is running. This is different from the type of the function: for normal functions, this always points to the Global object window; For constructors, this points to the newly created object, and for the method, this points to the object that called the method. In addition, the function object also provides methods such as call, apply, and bind to change the this point of the functions, where call and apply active execution functions, bind is generally used in the event callback, and the difference between call and apply is only the way the parameters are passed differently.

If you go deep to understand, no matter what function, this is changed, in essence, this all points to the object that triggered the function when it was run. The value of this cannot be changed while the function is running.

5.new operator

There are three ways to create a function, that is, explicit declaration, anonymous definition, and new function (). As mentioned earlier, the function in JS can be a function, it can be a method, it can also be a constructor. When using new to create an object, the function is a constructor, JS points the prototype chain of the new object to the prototype object of the constructor, so a prototype chain is established between the new object and the function object, and the new object can access the methods and properties in the prototype prototype of the function object.

6. Closures

In layman's terms, closures are a static execution environment with a separate scope. Unlike the function scope, the scope of the closure is static, the local resources can be persisted, and the function scope exists only at runtime, immediately after the execution of the function is destroyed. Therefore, closures can form an independent execution process.

7. Single-threaded and asynchronous queues

JavaScript is a single-threaded language, in the browser, when the JS code is loaded, the browser assigns it a main thread to perform tasks (functions), the main thread will form a global execution environment, the execution environment in the stack in the last in-first-out (LIFO) order to execute the code block, To ensure that all functions can be executed in the correct order.

But in the browser, some tasks are very time-consuming, such as AJAX requests, timers, events, etc., in order to ensure that the non-time-consuming tasks are not affected, JavaScript in the execution environment to maintain an asynchronous queue (also called a worker), and put these time-consuming tasks into the queue for waiting, The timing of these tasks is uncertain, and the main thread will not check whether the tasks in the asynchronous queue need to start until the task execution of the main thread is completed.

The SetTimeout and setinterval in JS are typical asynchronous operations that are placed in an asynchronous queue, even if SetTimeout (0)
will not be executed immediately, but will not be executed until the current synchronization task is completed.

8. Asynchronous Communication Ajax Technology

Ajax is the asynchronous communication technology that the browser uses to interact with the server, and its core object is XMLHttpRequest, through which an AJAX request can be created. The AJAX request is a time-consuming asynchronous operation, and when the request is issued, AJAX provides two status bits to describe the state of the request at different stages, the two state bits are readyState and status, ReadyState by
5 Status Codes to describe the 5 phases of a request:

0-Request not sent, initialization phase

1-Request sent, the server has not received the request

2-The request was sent successfully and the server received the request

3-Server processing complete, start responding to requests, transfer data

4-The client receives the request and completes the data download, generating the Response object

The status is used to describe the server-to-request processing, 200 indicates that the request was properly responded to, 404 indicates that no resource was found, 500 represents the server internal exception, and so on.

Ajax objects can also set a timeout value, which represents the time-out, remember that timeout only affects readystate, not status, because timeouts only interrupt data transfer, but do not affect the server's processing results. If the timeout setting is unreasonable, it will cause the response code status to be 200, but there is no data in response, this is the case that the server responds to the request correctly, but the download of the data is interrupted by timeout.

To prevent XSS attacks, the browser restricts AJAX requests and does not allow Ajax to request servers across domains, allowing only the server resources of the same domain as the request and the current address. But do not restrict scripts and labels from sending cross-domain requests, such as
Script and IMG tags, so you can use scripting cross-domain capabilities to implement cross-domain requests, the JSONP principle.

JSONP Although it can solve cross-domain problems, but only get requests, and there is no effective error capture mechanism, in order to solve this problem, XMLHttpRequest Level2 proposed
The CORS model, a cross-domain resource share, is not a new API, but a standard specification that automatically adds an Origin to the header information when the browser discovers that the request requires cross-domain
field to indicate which source the request came from. Based on this value, the server decides whether to agree to this request.

With the rapid development of mobile, the application scenario of Web technology is becoming more and more complex, the principle of separation of concerns is becoming more and more important at the system design level, and XMLHttpRequest is
Ajax is one of the oldest interfaces, and therefore less in line with modern system design concepts. As a result, the browser provides a new Ajax interface, the fetch API , the Fetch
API is based on promise thought design, more in line with the principle of separation of concerns.

9. Modular

Historically, the JAVASCRIPT specification has been without a module system, that is, a large program cannot be split into interdependent small files, and then assembled together in a simple way. In ES6
Before, in order to realize the JS modular programming, the community has developed some module loading scheme, the main have CMD and AMD two kinds, respectively to COMMONJS and Requirejs as the representative. ES6
In the language standard level, realizes the Modularization programming, its design idea is, as far as possible static, causes the compile time to be able to determine the module dependence, namely compiles the load, but the cmd and the AMD is at the runtime determines the dependency, namely the runtime load.

10.node.js

node. JS is a Chrome V8 engine-based JavaScript
Running environment, it is not dependent on the browser as a hosting environment, but as a server-side program can be run independently, which makes JS programming from the client was brought to the server, node. js on the server side advantage is that it uses single-threaded and asynchronous I/O model, to achieve a high concurrency, High-performance run-time environment. node. js is simple to implement compared to traditional multithreaded models and can reduce resource overhead.

11.es6

ES6 is a shorthand for ECMAScript 6.0, the next-generation standard for JavaScript, which was officially launched in June 2015, and its goal is to make JS easy to develop enterprise-class large applications, so some of ES6 's specifications are moving toward Java, C # And so on the back end language standard near. In the ES6 specification, the more significant changes are in the following areas:

New let, const command to declare variables, and VAR, the let declaration of the variable does not have a variable promotion problem, but does not change the characteristics of JS weak type, can still accept any type of variable declaration; const
The declared variables are not allowed to change in the subsequent logic, which improves the preciseness of JS syntax.

New deconstructed assignments, rest syntax, and arrow functions are all designed to make the code look more concise, while wrapping the syntax sugar.

Added modularity, this is the JS to standardize a more important step, so that the front-end more convenient to achieve engineering.

New classes and inheritance concepts, with modularity, JS can also achieve high-reuse, high-expansion system architecture.

New template string function, efficient and concise, the end of the era of stitching strings.

Added promise object to solve the problem of multi-layered nesting of asynchronous callbacks.

Web front-End Knowledge Outline: series One JS article