Error Analysis: 9 JavaScript Traps and Comments_Javascript Skills

From Nine Javascript Gotchas, here are nine common JavaScript pitfalls. Although it is not a very deep technical issue, paying attention will make your programming easier, which is called make life easier. The author will have mixed comments on some traps.

1. The last comma
Like this code, pay attention to the last comma, which should be good from a linguistic point of view (python's dictionary of similar data types allows this). IE will report syntax errors, but the language is unclear. You can only scan thousands of lines of code with human eyes.

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]


2. this The reference of
will change like 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 to execute
]

Not as good as you Hopefully, the answer isn't "JavaScript rules". When executing MyObject.ClickHandler, in the red line of code, the reference of this actually points to the reference of document.getElementById("theText"). It can be solved like this: <input type="button" value="Gotcha!" id="theText">

[Ctrl A Select all Note:
If you need to introduce external Js, you need to refresh to execute
]

Essentially, this is JavaScript Scope issue. If you look, you'll see there's more than one solution.

3. Identity thieves
Do not use the same variable name as the 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 to execute
]

IE will report that the object is undefined error. I can only say: IE sucks.

4. The string only replaces the first matching

as follows:

<script> var theObj = { city : "Boston", state : "MA", } </script> <script> var MyObject = function () { this.alertMessage = "Javascript rules"; this.ClickHandler = function() { alert(this.alertMessage ); } }(); document.getElementById("theText").onclick = MyObject.ClickHandler </script>[Ctrl A select all Note: <script> var MyObject = function () { var self = this; this.alertMessage = "Javascript rules"; this.OnClick = function() { alert(self.value); } }(); document.getElementById("theText").onclick = MyObject.OnClick </script>If you need to introduce external Js, you need to refresh to execute <script> TheButton = get("TheButton"); </script>]<script> var fileName = "This is a title".replace(" ","_"); </script>
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 approach is this:


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


5. mouseout Sometimes it means mousein
in fact, this is caused by event bubbling. There are mouseenter and mouseleave in IE, but they are not standard. The author hereby recommends that you use libraries such as YUI to solve the problem.

6. parseInt is based on the base system
This is common sense, but many people ignore that parseInt has a second parameter to specify the base system. For example, parseInt("09"), if you think the answer is 9, you are wrong. Because, here, the string starts with 0, and parseInt processes it in octal. In octal, 09 is illegal and returns false. The Boolean value false is converted into a numerical value and is 0. Therefore, the correct approach is parseInt("09", 10).

7. for...in... will traverse everything
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];
}

works well, doesn’t it? ? But one day it stopped working, and the value returned to me became NaN, halo. I just introduced a library. It turns out that this library has rewritten the prototype of Array. In this way, our arr has just one more attribute (method), and for...in... will traverse it. So it is safer to do this:


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

In fact, this is also an example of the harm caused by polluting the prototype of a basic class.

8. Traps of event handlers
This is actually a problem that only exists when event handlers are used as object attributes. For example, code like window.onclick = MyOnClickMethod will overwrite the previous window.onclick event and may also cause the content of IE to leak (sucks again). Before IE did not support DOM 2 event registration, the author suggested using libraries to solve the problem, such as using YUI:


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

This should also be a matter of common sense, but novices may make mistakes easily.

9. Focus Pocus
Create a new input text element, and then move the focus to it. Logically speaking, such code should be very natural:


var newInput = document .createElement("input");
document.body.appendChild(newInput);
newInput.focus();
newInput.select();

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


var newInput = document.createElement("input");
newInput.id = "TheNewInput";
document.body.appendChild(newInput) ;
setTimeout(function(){ //I have rewritten it using closures here. If you are interested, you can compare it with the original text
document.getElementById('TheNewInput').focus();
document.getElementById(' TheNewInput').select();}, 10);

In practice, there are many more pitfalls in JavaScript, mostly caused by inadequate implementation of the parser. These things generally do not appear in textbooks and can only rely on experience sharing among developers. Thank God, we live in the Internet age, and the answers to many of the questions we encounter can usually be found on Google.