Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "what are the common mistakes in web front-end development". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Define

First of all, what we need to know about Error is as follows:

The Error object is a built-in object in JavaScript, which means that all js engines support this object by default

When we use Error as a function, Error ('xx err') and new Error ('xx err') get the same result, so you can omit the new keyword (note that this is different from built-in objects such as String,Number, which returns different types of scenarios that use new and do not use new).

An error object can be created through the constructor of Error. When a runtime error occurs, an instance object of Error is thrown.

I am an old web front-end programmer who has been engaged in development for many years. I am currently resigning from my job to do my own private customized web front-end courses. At the beginning of this year, I spent a month sorting out a piece of practical information about web front-end learning that is most suitable for 2019. All kinds of frameworks are sorted out and sent to every front-end partner. If you want to get, you can pay attention to my headline number and privately trust me in the background: front-end, you can get it for free.

Get all Errors objects supported by the browser

Here, take chrome as an example, open chrome, copy the following code in console, and enter to get the result.

Object.getOwnPropertyNames (window) .filter (err = > err.endsWith ('Error'))

The results are as follows:

Let's go through the details of these error types.

Error

Follow index: 5

Hongmeng official Strategic Cooperation to build HarmonyOS Technology Community

Error represents an error object in js. When an error occurs at run time, the instance object of Error will be thrown. Of course, we can also use this object to construct some custom error objects.

Parameters, as can be found from caniuse, most browsers support message, filename and lineno (the number of lines of code where errors occur), so we can feel free to use ~

JavaScript error types can be extended through Error. For example, a BusinessError is defined as follows:

Class BusinessError extends Error {constructor ({message, filename, lineno,... params}) {super (message, filename, lineno); this.name = 'BusinessError'; / / set name to modify the name / / TODO that throws the error: pretend to have code. }}

Console input:

Object.getOwnPropertyNames (window) .filter (err = > err.endsWith ('Error')) .map (el = > window.prototype. _ _ proto__.constructor)

You can see the output:

Except for the first, the prototype constructors from index 1-6 log are all Error functions, indicating that these error types are inherited from Error. Let's take a look at the details of these error types.

Rank the interest index from high (5) to low (0).

ReferenceError

Follow index: 5

ReferenceError, when trying to reference an undefined variable, will throw a ReferenceError. Relatively speaking, this error type is still a relatively important error type. We all know that there is a keyword called undefined in js, but what we need to be clear is that the true meaning of undefined is not "undefined." more appropriately, a variable should be named, but the uninitialized value is undefined. If you do use an unnamed variable directly, ReferenceError will appear.

Enter eeee [an unknown variable] in the console, and enter directly to see the error message:

This error type is still quite common in the usual development process. If you encounter it next time, find out if any variable is used directly without a name.

SyntaxError

Follow index: 5

SyntaxError, literal syntax error, the official interpretation is-the object represents an error that tries to parse the code that is not valid in syntax. We know that js is an interpretive language. During the process of lexical analysis [parsing into tokens] > syntax analysis [converting to ast syntax tree] = > interpreting and executing, and in the process of converting to ast, the js engine will also verify tokens. When it finds a substandard tokens or an incorrect token, it will report an error of SyntaxError.

Enter [] {} and 1.toFixed () in the console, and enter to see the error message:

You can see that half of them have problems with which token to parse to, so when we write some code that does not conform to the js syntax specification, we should pay attention to the correctness of some basic syntax in the development process.

TypeError

Follow index: 5

TypeError, literally wrong type, official interpretation-an object is used to indicate an error that occurs when the type of the value is not the expected type, which actually means that this error occurs when an incorrect parameter is given or when an incorrect, non-existent method is called. See the example:

TypeError appears when we call a method that doesn't exist, so when we write code, we have to pay attention to the type of variable. We know that xx () will call this method, but it doesn't actually report this error when it is a real function.

RangeError

Follow index: 3

RangeError means that a numeric variable or parameter is out of its valid range. There is a very common scenario: [ERROR]: RangeError: Maximum call stack size exceeded.,. We all know that this situation usually occurs when recursion is too deep or when there is an endless loop. Another common scenario is that the wrong parameter is given in new Array, as shown below:

There are also some special circumstances that will lead to this mistake. Students who are interested can find out for themselves.

URLError

Follow index: 1

URLError is an error that occurs in a relatively fixed scenario. DecodeURI, encodeURI, encodeURIComponent, decodeURIComponent will throw this type of error when an error occurs in these methods during the processing of url, resulting in the failure of decode or encode. In this scenario, as long as you remember to see this type, it will be the problem with these api.

EvalError

Follow index: 0

EvalError represents a type of error report about eval function, but this type is no longer used in most scenarios. JavaScript will no longer throw this type of error, but it will maintain this type of compatibility, so there is no need to give too much relationship to this error type.

Some error types other than Error

Now that we know all the errors inherited from Error, let's sort out some of the remaining errors, which are not very common, but make an impression and remember them when you encounter them.

RTCError

This is not to pay attention to the index, this is in the use of rtc (web instant messaging) technology may appear in the process of an error type, it is inherited from the DOMException this type, so if you are engaged in related content development or need to pay attention to, and we usually do not involve, I think there is no problem to pay attention to it when you use it.

OverconstrainedError

This also does not give attention index, which is also an issue that needs to be paid attention to in a specific scene. Browsers provide api that allows developers to obtain audio and video permissions from users by calling MediaDevices.getUserMedia (param), in which param can be configured to decide whether to want audio permissions (recording) or video permissions (cameras). If it is a camera, you can even configure the required resolution and other configurations. This error type will be reported when the configured resolution is not available or cannot be reached on the user's machine.

DOMError

Follow index:-1

This API has already been Deprecated, so don't follow it any more.

MediaError

Attention index: 4

MediaError, used in HTMLMediaElement-based tags, such as and tags, will trigger this error type when an error is reported during the use of these media resources. it contains two parts, one is code, which represents the approximate type of error, and the other message, which indicates the details of the error. For more information, please see the introduction.

WebkitSpeechRecognitionError

This error is first based on a browser's experimental feature-speech recognition, because there is a webkit prefix in chrome. In fact, there should be no private prefix. This error will be thrown when something goes wrong in the speech recognition process. Partners in need can come here to view the relevant content.

That's all for the content of "what are the common mistakes in web front-end development?" Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.