http://net.tutsplus.com/tutorials/javascript-ajax/the-10-javascript-mistakes-youre-making/
节选了一部分
Mistake 2 - You’re Not Using Semicolons
For example, look at this simple function:
function returnPerson (name) {
return
{
name : name
};
}
This looks like it should return a cute little object … but in reality, the JavaScript compiler assumes you meant to put a semicolon after return, and will therefore return nothing; that object will get ignored. Your solution would be to do this:
return {
name : name
};
Mistake 5 - You’re not Property-Checking when Using For-In
We’re all familiar with iterating over arrays; however, you’ll probably find yourself wanting to iterate over the properties of an object. (Digression: the items in an array are actually just numbered properties in an object.) If you’ve done this before, you’ve used a for-in loop:
view plaincopy to clipboardprint?
1. var prop, obj = { name: "Joe", job: "Coder", age: 25 };
2.
3. for (var prop in obj) {
4. console.log(prop + ": " + obj[prop]);
5. }
var prop, obj = { name: "Joe", job: "Coder", age: 25 };
for (var prop in obj) {
console.log(prop + ": " + obj[prop]);
}
If you run the above code, you should see this output:
1. name: Joe
2. job: Coder
3. age: 25
name: Joe
job: Coder
age: 25
However, browsers will include properties and methods from further up the prototype chain. Most of the time you won’t want to see these when enumerating properties. You should be using the hasOwnProperties to filter out properties that aren’t actually on the object:
view plaincopy to clipboardprint?
1. Function Dog (name) {
2. this.name = name;
3. }
4. Dog.prototype.legs = 4;
5. Dog.prototype.speak = function () {
6. return "woof!";
7. };
8.
9. var d = new Dog("Bowser");
10.
11. for (var prop in d) {
12. console.log( prop + ": " + d[prop] );
13. }
14.
15. console.log("=====");
16.
17. for (var prop in d) {
18. if (d.hasOwnProperty(prop)) {
19. console.log( prop + ": " + d[prop] );
20. }
21. }
22.
23. // Output
24.
25. // name: Bowser
26. // legs: 4
27. // speak: function () {
28. return "woof!";
29. // }
30. // =====
31. // name: Bowser
Function Dog (name) {
this.name = name;
}
Dog.prototype.legs = 4;
Dog.prototype.speak = function () {
return "woof!";
};
var d = new Dog("Bowser");
for (var prop in d) {
console.log( prop + ": " + d[prop] );
}
console.log("=====");
for (var prop in d) {
if (d.hasOwnProperty(prop)) {
console.log( prop + ": " + d[prop] );
}
}
// Output
// name: Bowser
// legs: 4
// speak: function () {
return "woof!";
// }
// =====
// name: Bowser
Mistake 9 - You’re Adding Elements to the DOM Individually
All right, all right: this isn’t really JavaScript itself. But, in 99 of 100 cases, JavaScript means using the DOM. While there’s a lot of mistakes you can make when working with the DOM, this is a big one.
I fondly remember the day when I inserted my first DOM element via JavaScript. It’s fun to do, and oh-so-useful, but it unfortunately is a strain on the page: inserting a DOM element forces the browser to completely repaint the page, so if you have a whole bunch of elements to add, adding them one by one is a bad idea:
view plaincopy to clipboardprint?
1. var list = document.getElementById("list"),
2. items = ["one", "two", "three", "four"],
3. el;
4.
5. for (var i = 0; items[i]; i++) {
6. el = document.createElement("li");
7. el.appendChild( document.createTextNode(items[i]) );
8. list.appendChild(el); // slow, bad idea
9. }
var list = document.getElementById("list"),
items = ["one", "two", "three", "four"],
el;
for (var i = 0; items[i]; i++) {
el = document.createElement("li");
el.appendChild( document.createTextNode(items[i]) );
list.appendChild(el); // slow, bad idea
}
Here’s what you should do instead: use document fragments. Document fragments are a container to hold DOM elements; then instead of inserting each element individually, you can insert them all at once. The document fragment isn’t a node in itself and there will be nothing to show for it in the DOM: it’s just an invisible net for holding DOM elements before you put them into the DOM. So, here’s how you do it:
view plaincopy to clipboardprint?
1. var list = document.getElementById("list"),
2. frag = document.createDocumentFragment(),
3. items = ["one", "two", "three", "four"],
4. el;
5.
6. for (var i = 0; items[i]; i++) {
7. el = document.createElement("li");
8. el.appendChild( document.createTextNode(items[i]) );
9. frag.appendChild(el); // better!
10. }
11.
12. list.appendChild(frag);
var list = document.getElementById("list"),
frag = document.createDocumentFragment(),
items = ["one", "two", "three", "four"],
el;
for (var i = 0; items[i]; i++) {
el = document.createElement("li");
el.appendChild( document.createTextNode(items[i]) );
frag.appendChild(el); // better!
}
list.appendChild(frag);
Faster, quicker, cleaner—what’s not to love?