JavaScript最佳实践20则

摘要：本文总结了则的最佳实践，希望对各位爪哇国编剧有用。使用有两种等值运算符，分别是和，以及和。比较两个值的时候，请使用前者，避免讨厌的强制类型转换带来预料之外的结果。下只提供无强制类型转换的别名和别名，不用头疼选哪种。

本文总结了20则JavaScript的最佳实践，希望对各位爪哇国编剧有用。（顺带推销下CoffeeScript）

。

JavaScript有两种等值运算符，分别是===和==，以及！==和！=。比较两个值的时候，请使用前者，避免JavaScript讨厌的强制类型转换带来预料之外的结果。

CoffeeScript下只提供无强制类型转换的==（别名is）和!=（别名isnt），不用头疼选哪种。

eval让我们将字符串作为参数执行，这是非常强大的特性。然而，eval会大幅降低脚本的性能，也会引起安全问题。除非你打算用JavaScript写一个编译器，还是对eval敬而远之的好。

省掉一些花括号，大多数浏览器仍然能理解，例如：

if(someVariableExists)  
   x = false

然而，复杂一点的代码就可能带来问题：

if(someVariableExists)  
   x = false  
   anotherFunctionCall();

你想表达的也许是：

if(someVariableExists) {  
   x = false;  
   anotherFunctionCall();  
}

然而实际上等价于：

if(someVariableExists) {  
   x = false;  
}  
anotherFunctionCall();

所以，还是乖乖地写花括号吧，这能为你省去无数麻烦。

如果你真那么讨厌花括号，还是投入CoffeeScript的怀抱吧：

if someVariable?
  x = false

if someVariable?
  x = false
  anotherFunctionCall()

同理，大多数浏览器允许你省略分号：

var someItem = "some string"  
function doSomething() {  
  return "something"  
}

这和省略花括号一样糟糕，还是老实一点好：

var someItem = "some string";  
function doSomething() {  
  return "something";  
}

或者，投奔CoffeeScript吧，不用分号了：

someItem = "some string"
doSomething = -> "something"

函数的写法是不是也很帅？直接定义一个匿名函数，然后把它赋给一个变量即可。

JSLint是一款非常棒的调试器，它会迅速找出代码中的问题，包括语法错误、编码风格和程序结构问题。

脚本加载是阻塞的，脚本加载并执行完之后，浏览器不能继续渲染下面的内容。因此，用户被迫等待更长时间。如果你的JavaScript脚本只是用来增强效果，那么请将它放在页面的最后：

And now you know my favorite kinds of corn. 
  
  
  
  

糟糕的例子：

for(var i = 0; i < someArray.length; i++) {  
   var container = document.getElementById("container");  
   container.innerHtml += "my number: " + i;  
   console.log(i);  
}

每次循环都要计算数组的长度，每次都要遍历DOM查询“container”元素，效率低下！

改成这样就好一些：

var container = document.getElementById("container");  
for(var i = 0, len = someArray.length; i < len;  i++) {  
   container.innerHtml += "my number: " + i;  
   console.log(i);  
}

遍历数组或对象的时候不一定要用for，使用原生函数往往是更好的选择：

var arr = ["item 1", "item 2", "item 3", ...];  
var list = "
" + arr.join("
") + "
";

避免模块和类库互相干扰。

var name = "Jeffrey";  
var lastName = "Way";  

function doSomething() {...}  

console.log(name);

更好：

var DudeNameSpace = {  
   name : "Jeffrey",  
   lastName : "Way",  
   doSomething : function() {...}  
}  
console.log(DudeNameSpace.name)

CoffeeScipt下变量默认非全局，不需要加var，而且编译的时候，整个.coffee文件处于一个函数之中，也就是说，一个独立的命名空间。使用CoffeeScript，不用再操心全局变量问题。

良好的注释，帮助别人或者几个月之后的你理解你的代码。

“大多数访问者启用了JavaScript，不必担心”这是很大的误区。

花费一点时间查看下你漂亮的页面在javascript被关闭时是什么样的吧。设计网站时，首先假定 JavaScript 是被禁用的，在此基础上，渐进增强网站。

setInterval(  
"document.getElementById("container").innerHTML += "My new number: " + i", 3000  
);

上面的代码和eval如出一辙，效率低下。我们应该传递函数：

setInterval(someFunction, 3000);

看起来，使用with语句的代码很清晰，例如：

with (being.person.man.bodyparts) {  
   arms = true;  
   legs = true;  
}

这比下面的要清爽得多：

being.person.man.bodyparts.arms = true;  
being.person.man.bodyparts.legs= true;

很不幸，使用with语句导致添加新成员时性能低下，我们还是用变量吧：

var o = being.person.man.bodyparts;  
o.arms = true;  
o.legs = true;

new加构造函数可以创建对象：

var o = new Object();  
o.name = "Jeffrey";  
o.lastName = "Way";  
o.someFunction = function() {  
   console.log(this.name);  
}

这种方法多受诟病，更好的做法是：

var o = {  
   name: "Jeffrey",  
   lastName = "Way",  
   someFunction : function() {  
      console.log(this.name);  
   }  
};

这样我们就不需要直接调用构造函数，也不需要为传递给函数的参数的正确顺序而提心吊胆。

创建数组也是一样的道理。

var a = new Array();  
a[0] = "Joe";  
a[1] = "Plumber";

不如

var a = ["Joe","Plumber"];

var someItem = "some string";  
var anotherItem = "another string";  
var oneMoreItem = "one more string";

不如这样：

var someItem = "some string",  
    anotherItem = "another string",  
    oneMoreItem = "one more string";

这样代码更清晰。

CoffeeScript？正如我们前面提到的，变量默认非全局，所以我们根本不需要var。

遍历对象的属性的时候，还会遍历方法函数，真浪费。加上一个if语句过滤下：

for(key in object) {  
   if(object.hasOwnProperty(key) {  
      ...then do something...  
   }  
}

Firebug timer 可以简单地确定操作消耗的时间：

function TimeTracker(){  
 console.time("MyTimer");  
 for(x=5000; x > 0; x--){}  
 console.timeEnd("MyTimer");  
}

午餐之余或上床睡觉之前，读点书吧。床头常发一本web开发方面的书。我喜欢读的一些书包括：

Object-Oriented JavaScript

JavaScript: The Good Parts

Learning jQuery 1.3

Learning JavaScript

读下吧。多读几遍。我常读。

用括号包裹函数定义，然后应用函数：

(function doSomething() {  
   return {  
      name: "jeff",  
      lastName: "way"  
   };  
})();

CoffeeScript版本更简洁：

(-> { name: "jeff", lastName: "way" })()

用do的话更清楚：

do -> { name: "jeff", lastName: "way" }

jQuery和Mootools可以节约你大量的开发时间——特别是处理AJAX。但是别忘了，使用库永远不会比原生代码快（假定你编码正确）。

本文为24 JavaScript Best Practices for Beginners的衍生作品，在其基础上进行了归并调整，并加入了 CoffeeScript 的内容。