Shade Presents

欢迎通过电子邮件 shade.lin 联系我

JavaScript初学者的二十四条最佳实践

code, 24 june, 2009

非常不严格地译自Jeffrey Way的《24 JavaScript Best Practices for Beginners》，下文包含本人个人之可能不准确理解，外语良好者请移步原文。

特别提醒：原文实际只有23条“最佳实践”，并非译文遗漏。

用“===”替代“==”

JavaScript提供了2对比较运算符：“=== | !==”和“== | !=”，最佳实践是总是用第一对来进行比较。

“=== | !==”是严格的比较运算，它们不仅对比值，而且对比数据类型。

var x=4; var y='4'; if (x==y){ alert('x and y are equal.'); } if (x===y){ alert('x and y are identical.'); }
绝不使用“eval”

“eval”通过执行字符串中的JavaScript代码。不仅是因为使用“eval”会导致性能的降低，更因为它带来了太多的安全隐患，所以，绝对不要使用“eval”。

替代“eval”的方法是编写作为递归的JavaScript解释器的程序，或者编写动态生成并且计算JavaScript代码的后台程序。
不要使用简写

JavaScript允许你忽略掉花括号和分号结束符，大多数浏览器会正确的执行以下代码：

if(someVariableExists) x=false

然而请考虑以下情况：

if(someVariableExists) x=false anotherFunctionCall();

您或许会认为它等同于：

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

但实际上浏览器会执行为：

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

正如你看到的那样，跨行代码省略掉花括号是一个可怕的实践。

行内花括号是可以省略的，但这仍然是一个非常有争议的行为：

if(2+2===4) return 'nicely done';

在简写代码的时候，请记住：永远为将来考虑，无论如何，你很有可能需要再次面对你曾经写过的代码。
使用JSLint

JSLint是一个Douglas Crockford开发的调试器，它可以在你的代码中发现一些常见的问题。在正式发布你的代码之前，确保它可以通过JSLint，以免出现一些意外问题。
将JavaScript代码放在页面的最后

这条实践已经不是第一次被提及，鉴于其重要程度，我愿意在这里再次重申。

切记，让用户尽快看到页面是最重要的事情，当JavaScript代码被载入完全之前，浏览器不会去加载其他的对象，这将造成不良的用户体验。

将你的代码放在body关闭之前的一行，这绝对是一个重要的最佳实践。
在“for”之外申明变量

这似乎是废话：不要让引擎执行任何多余的语句：

for(var i=0;i var container=document.getElementById('container'); container.innerHtml+='my number:'+i; console.log(i); }

以上代码无数次的遍历了DOM，无数次的申明了一个相同的对象，非常地低效。

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

你应该留意到了这段循环有点不同，延伸阅读一篇来自于Robert Nyman关于循环效率的文章《JavaScript loop performance》，高手总是能在最常见的场景中发现不寻常之处。
更快地创建字符串对象

当需要遍历一个类似数组一样的对象时，不要总是下意识的“for”，尽可能多地使用类似“join”这样的原生方法。

var arr=['item 1','item 2','item 3']; var list='<ul><li>' + arr.join('</li><li>') + '</li></ul>';
减少全局量

减少全局量，即增加兼容性。

var name='Jeffrey'; var lastName='Way'; function doSomething(){ } …… console.log(name); // Jeffrey or something surprised

与其他人的代码整合时，冲突往往是暴露的全局量造成的，良好的闭包习惯应该成为程序员的公德。

var DudeNameSpace={ name:'Jeffrey', lastName:'Way', doSomething:function(){ } } …… console.log(DudeNameSpace.name); // Jeffrey
注释代码

这似乎是废话，但请想像你需要修改几个月前的代码，或接受其他人写的代码，却不知道如何下手的场景。书写有良好阅读性的注释，同样应该成为一条重要的程序员公德。
渐退兼容

禁用浏览器的JavaScript功能，确保你的页面在此情况下也能正确地被执行。如果你重视浏览器兼容，那么更应该重视渐退兼容。
不在“setInterval”或“setTimeOut”中直接使用字符串

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

把字符串操作封装在函数中后，再置于“setInterval”或“setTimeOut”中。
不使用“with”

“with”可以方便地用来引用某个特定对象中已有的属性。

“with”可缩短特定情形下的代码并使得代码具备更好的可读性，在上个世纪一度非常流行，例如以下代码：

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

可以简写为：

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

后来程序员们发现，在大量使用“with”时，出现了很多意外情况，原因是“with”会把参数对象加入到{}代码块执行环境（execution context）里的作用域链（scope chain）首部，从而修改了索引对象的顺序，造成混乱。可以参考文章《JavaScript Execution Context, Closure, Eval and “this” Keyword》或《JavaScript作用域链初探》。

另外，“with”不能用来给对象添加属性，要给对象创建新的属性，必须明确地引用该对象。

所以，使用“var”替代“with”：

var o=being.person.man.bodyparts; o.arms=true; o.legs=true;
用{}替代New Object()

创建一个新对象的方法有很多，最传统的莫过于：

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); } };
用[]替代New Array()

与上一条理由类似。

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

var a=['Joe','Plumber'];
用逗号减少不必要的“var”申明

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

毫无疑问，下面一句执行得更快。

var someItem='some string',anotherItem='another string',oneMoreItem='one more string';
任何时候不要省略分号结束符

尽管大多数浏览器允许省略掉每行代码最后的分号结束符，但是为了避免潜在的风险，养成每行结束前加一个分号，无疑是一条重要的最佳实践。
“For in”声明中对对象属性的检测

“For in”声明用于对数组或对象的属性进行循环操作，循环中的代码每执行一次，就会对数组的元素或对象的属性进行一次操作。

所以在用于对象的属性循环操作时，增加一个对对象属性的判断，以提高代码运算速度。

for(key in object){ if(object.hasOwnProperty(key){ …… }; }
使用Firebug的“Timer”优化你的代码

快速而简单地让你知道你的代码执行效率。
保持读书的习惯

博客无法替代书籍，尤其是在吃饭时或是在床上。

选择一本好书放在你的床头，以下几本是我最喜欢的：
- Object-Oriented JavaScript
- JavaScript: The Good Parts
- Learning jQuery 1.3
- Learning JavaScript
通读它们，反复地。
自动触发的函数

直接运行的代码应该封装在一个自动触发的函数中，除了减少全局量之外，其他的函数还可以更加方便的调用。

(function doSomething(){ …… })();
原生代码永远比框架快速

类似于jQuery之类的框架可以加快开发速度，但是记住，它们的执行效率永远不会比书写良好的原生代码更高。
使用非原生的JSON解析器

尽管JavaScript2内置了原生的JSON解析器，但是仍然建议使用由JSON发明者Crockford编写的JSON解析器。

压缩后的此解析器小于2.5K，相关文档以及下载地址可以参考《JavaScript中的JSON》。
不再声明“language”属性

去掉script对象中陈旧的language属性。

天上人间是阳朔

photograph, 4 may, 2009

晚上八点多抵达两江机场，到达市区找好住处后，桂林的夜晚仍然五光十色。

桂林米粉品种很多，诸如“酸辣米粉”“叉烧米粉”等，最正宗的桂林米粉，当属“卤菜米粉”，而在众多卤菜之中，又以卤牛肉和卤“馄肝”（猪胰腺）最有特色，米粉还分为“榨粉”和“切粉”两类，从厨房拿到米粉后，客人还需要根据自己的口味添加包括香菜、葱花、蒜蓉、干辣椒、酸白菜等在内的各种配料，最后根据个人喜好，加入骨头汤，方成一碗地道的桂林米粉。品尝桂林米粉，一半在吃，另一半也许就是在吃之前的这些门道吧。

与五年前相比，街边“特价机票”“漓江船票”“桂林特产”的霓虹招牌倒是多了不少，摩托车司机们拉皮条的广告也比过往更直白，除此之外，目之所睹变化不大，沿着两江四湖走上一圈，不过一个小时，夜游桂林的精华尽在其中。

在这里要特别赞一下桂林的中山路。白天它是一条普通的六车道城市主干道，到了晚上，其中的三个车道就会搭起棚户，成为一条比正阳路更名副其实的步行街。尽管卖的东西没有什么特别的，但手拿一杯珍珠奶茶，在刚才还车水马龙的马路中央打望各色美女，的确是别处难得的体验。

阳朔县城里出现了很多在建或在售的楼盘，忽如一夜春风来地迅速将这一方山水裹挟入实践科学发展观推进城市大建设的历史大潮中。彩色喷绘的“做强优势产业壮大县域经济”硕大招牌下，有人用黑色喷漆在裸露的山石上无力地写下“PLEASE SAVE HERE”的大写英文。旁边几台搅拌机正隆隆做响，看样子这块石头本身都已划入开发商的红线内。泱泱大流，顺之则昌逆之则亡，你我不过萍水相逢沧海两粟，谁又救得了谁呢。