9 traps and comments of Error Analysis in JavaScript

From Nine Javascript Gotchas, the following are Nine traps that JavaScript is prone to mistakes. Although it is not a very profound technical problem, please note that it will make your programming easier, that is, make life easier. I will give some comments on some traps.

1. last comma
For example, in this Code Section, note that the last comma should be good in terms of Linguistics (this is acceptable for a dictionary similar to the data type in python ). Internet Explorer reports syntax errors, but it is not detailed. You can only scan thousands of lines of code.


[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

2. the reference of this will change.
Such as this Code:
<Input type = "button" value = "Gotcha! "Id =" MyButton ">
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

The answer is not "JavaScript rules", as you wish ". When executing MyObject. ClickHandler, this row is red in the Code. The reference of this actually points to the reference of document. getElementById ("theText. It can be solved as follows:
<Input type = "button" value = "Gotcha! "Id =" theText ">
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
Essentially, this is the JavaScript scope issue. If you see it, you will find that there are more than one solution.

3. Identify thieves
Do not use variable names with the same HTML id in JavaScript. The following code:


<Input type = "button" id = "TheButton">
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
IE will report an undefined object error. I can only say: IE sucks.

4. Replace the string with the first match
The following code:



[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
In fact, the result is "This_is a title". In JavaScript, the first parameter of String. replace should be a regular expression. Therefore, the correct method is as follows:


Var fileName = "This is a title". replace (// g ,"_");


5. mouseout sometimes means mousein
In fact, this is caused by event bubbling. In IE, there are mouseenter and mouseleave, but they are not standard. The author suggests that you use library, such as YUI, to solve the problem.

6. parseInt is based on the hexadecimal system.
This is common sense, but many people ignore parseInt and have a second parameter to indicate the hexadecimal notation. For example, parseInt ("09"), if you think the answer is 9, it is wrong. Because, here, the string starts with 0 and parseInt processes it in octal. In octal, 09 is invalid, false is returned, and Boolean value false is converted to a value of 0. therefore, the correct method is parseInt ("09", 10 ).

7. for... in... will traverse all things
There is a piece of code like this:


Var arr = [5, 10, 15]
Var total = 1;
For (var x in arr ){
Total = total * arr [x];
}

Running well, isn't it? But one day it quit, and the returned value is NaN, dizzy. I just introduced a library. It turns out that this library has rewritten the prototype of Array. In this way, our arr has no more attribute (method) than that of... in... it will be traversed. Therefore, this is safer:


For (var x = 0; x <arr. length; x ++ ){
Total = total * arr [x];
}

In fact, this is also an example of the damage caused by prototype of the pollution basic class.

8. Event processor traps
In fact, only the event processor used as the object property will exist. For example, the code window. onclick = MyOnClickMethod will re-write the previous window. onclick event and cause IE content leakage (sucks again ). Before IE supports DOM 2 event registration, we recommend that you use libraries to solve the problem, such as using YUI:


YAHOO. util. Event. addListener (window, "click", MyOnClickMethod );

This should also be a common sense problem, but it may be easy for new users to make mistakes.

9. Focus Pocus
Create an input text element and move the focus to it. It is reasonable to say that such code should be natural:


Var newInput = document. createElement ("input ");
Document. body. appendChild (newInput );
NewInput. focus ();
NewInput. select ();

However, IE will report an error (sucks again and again ). The reason may be that the element does not exist when you execute focus. Therefore, we can delay the execution:


Var newInput = document. createElement ("input ");
NewInput. id = "TheNewInput ";
Document. body. appendChild (newInput );
SetTimeout (function () {// here I used closure to rewrite it. If you are interested, you can compare it with the original article.
Document. getElementById ('thenewinput'). focus ();
Document. getElementById ('thenewinput'). select () ;}, 10 );

In practice, there are many more JavaScript traps, mostly because the parser implementation is not in place. These things generally do not appear in textbooks. They can only be shared by developers. Thank God, we live in the Internet era. We can find answers to many problems in Google.