9 pitfalls and comments about JavaScript

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

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.

<script> var theObj = { city : "Boston", state : "MA", }</script> The reference of this will change

such as this code:

<script>var MyObject = function () { this.alertMessage = "Javascript rules"; this.ClickHandler = function() { alert(this.alertMessage ); }} ();document.getElementById("theText").onclick = MyObject.ClickHandler</script>

is not what you want, the answer is not "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:

<script>var MyObject = function () { var self = this; this.alertMessage = “Javascript rules "; this.OnClick = function() { alert(self.value); }}();document.getElementById("theText").onclick = MyObject.OnClick</script>

Essentially, this is JavaScript scope The problem. If you look, you'll see there's more than one solution.

Identity Thief

Don’t use variable names in JavaScript that are the same as HTML ids. The following code:

<script> TheButton = get("TheButton");</script>

IE will report an object undefined error. All I can say is: IE sucks.

The string only replaces the first match

The following code:

<script> var fileName = "This is a title".replace(" ","_");&lt ;/script></script>

In fact, the result is "This_is a title". In JavaScript, the first parameter of String.replace should be a regular expression. So, the correct approach is this:

var fileName = "This is a title".replace(/ /g,"_"); mouseout 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.

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).

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

In fact, this is also a prototype that pollutes basic classes An example of the harm done.

Traps of event handlers

This is actually a problem that only exists when event handlers are used as object properties. For example, code such as 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 common sense Question, but newbies can make mistakes easily.

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 is not yet available. 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 the original document.getElementById('TheNewInput').focus();document.getElementById('TheNewInput').select();}, 10);

In practice, there are many more pitfalls in JavaScript, mostly due to 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.

For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!