如何编写高质量的Javascript代码

优秀的StoyanStefanov在他的新书中（《JavascriptPatterns》）介绍了很多编写高质量代码的技巧，比如避免使用全局变量，使用单一的var关键字，循环式预存长度等等。这篇文章不仅仅从代码本身来考虑如何优化编码，也从代码的设计阶段来考虑，包括书写API文档，同事的review，使用JSLint。这些习惯都能帮助你编写更加高质量的、更易于理解的、可维护的代码（让你的代码在多年之后仍使你引以为傲）。编写可维护的代码软件的BUG修复需要花费大量的精力。尤其当代码已经发布之后，随着时间的增长，维护的成本愈发的高。当你一发现BUG的时候，就立即去修复，这时候你的代码还是热乎的，你也不需要回忆，因为就是刚刚写好的。但是当你做了其他任务，几乎完全忘记了这份代码，这时候就需要：重新学习和理解问题理解代码是如何解决问题的另外一个问题是，在大项目或者大公司里面，经常是解决BUG的人不是产生BUG的人，而且也不是发现BUG的人。所以减少理解代码的时间就是最重要的问题，无论这个代码是你自己以前写的还是团队中的其他成员写的，因为我们都想去搞搞新的有意思的东西，而不是去维护那些个陈旧的代码。还有一个开发中的普遍问题就是，往往读代码的时间比写代码的时间还要多。有时候你钻研一个问题，可以花整整一个下午的时间来考虑代码的编写。这个代码当时是可以工作的，但是随着开发的进行，其他东西发生了很大的变化，这时候也就需要你自己来重新审查修改编写代码。比如：还有BUG没有解决添加了新的功能程序需要在新的环境中运行（比如一个新上市的浏览器）代码有问题代码需要重写因为修改了架构甚至要使用另一个语言因为这些原因，也许你当时一个下午写好的代码，后面需要花费几周的时间来阅读。所以编写可维护的代码对于软件的成功至关重要。可维护的代码包括：可读性连续性预见性看起来是一个人写的有文档最少化全局变量Javascript使用函数来约定作用域。一个在函数内部声明的变量在外部是不可见的。所以，全局变量也就是声明在任何函数之外的或者没有被声明的变量。Javascript中，在任何函数之外有个可访问的全局对象，每一个你创建的全局变量都是这个对象的一个属性。在浏览器中，为了方便，通常用window来指代这个全局变量。下面的代码就是说明如何创建一个全局变量：myglobal=hello;//antipatternconsole.log(myglobal);//helloconsole.log(window.myglobal);//helloconsole.log(window[myglobal]);//helloconsole.log(this.myglobal);//hello全局变量的问题全局变量的问题在于，他在你的所有代码或者一个页面中都共享。他们在同一个命名空间下面，这通常会造成变量名冲突–两个同名的变量，但是确实不同的用处。通常在一些页面中需要引入一些其他人的代码，比如：第三方的JS库广告伙伴的脚本第三方的用户行为分析或者统计脚本不同的组件、按钮等等加入其中一个第三方组件定义了一个全局变量：result。然后在你的程序中，也定义了一个全局变量result。最后的这个result会覆盖点之前的result，这样第三方的脚本就会停止工作。所以，为了对其他的脚本友好，在一个页面中使用越少的全局变量越好。在后面会有一些方法来告诉你如何减少全局变量，比如使用命名空间，或者自执行的匿名函数，但是最好的避免全局变量的方法就是使用var关键字来声明变量。因为javascript的两个特性，创建一个全局变量非常的简单。第一，你可以使用一个甚至没有声明的变量，第二，在javascript中，所有未声明的变量都会成为全局对象的一个属性（就像一个声明了的全局变量一样）。看看这个例子：functionsum(x,y){result=x+y;returnresult;}在这个代码中，result在没有被声明的情况下就被使用了，这个代码也能很好的工作，但是在调用了这个函数之后，就会多一个名为result的全局变量，这是所有问题的根源了。解决这个问题的办法就是使用var：functionsum(x,y){varresult=x+y;returnresult;}两外一个不好的习惯就是在声明变量的时候使用链式的方法来赋值，这时候，a是局部变量，但是b就成为了全局变量。functionfoo(){vara=b=0;....}这是因为，b=0这个表达式先执行，执行的时候b并没有被声明，所以b就成为了全局变量，然后返回这个表达式的值0，给声明了的变量a，换句话说，就好像你输入的是：vara=(b=0);如果你已经声明变量，那么这种链式的赋值没有问题：functionfoo(){vara,b;...}另外一个避免使用全局变量的原因是考虑到程序的可移植性。如果你想让你的代码在不同的环境中都可以工作，那么使用全局变量就很可能会与新的系统中的全局变量冲突（或许在之前的系统中没有问题）。忘记var的影响使用var声明的全局变量和没有使用var生成的全局变量还有一个区别在于删除：使用var声明创建的全局变量不能被删除没有使用var声明的全局变量可以被删除这说明没有使用var声明生成的全局变量不是真正的变量，他们只是全局对象的属性。属性可以通过delete删除，但是变量不行：//definethreeglobalsvarglobal_var=1;global_novar=2;//antipattern(function(){global_fromfunc=3;//antipattern}());//attempttodeletedeleteglobal_var;//falsedeleteglobal_novar;//truedeleteglobal_fromfunc;//true//testthedeletiontypeofglobal_var;//numbertypeofglobal_novar;//undefinedtypeofglobal_fromfunc;//undefined在ES5的严格模式下，给一个为声明的变量赋值会报错。读取全局对象在浏览器中，你可以通过window变量来读取全局对象（除非你在函数内部重新定义了window对象）。但在有的环境中，可能不叫window，那么你可以使用下面的代码来获取全局对象：varglobal=(function(){returnthis;})();这样可以获取到全局对象的原因是在function的内部，this指向全局对象。但是这在ES5的严格模式下会不起作用，你需要适配一些其他模式。当你开发自己的库的时候，你可以把你的代码封装在一个立即函数中，然后将this作为一个参数传进来。单个var模式在你的代码的顶部只是用一个var关键字，会有以下的好处：对于所有需要的变量，在一个地方就可以全部看到避免使用一个未定义的变量帮助你记忆声明的变量，减少全局变量更精简的代码书写很简单：functionfunc(){vara=1,b=2,sum=a+b,myobject={},i,j;//functionbody...}通过一个var和逗号来声明多个变量。在声明的时候给变量赋默认值也是不错的做法，可以避免一些逻辑错误，提高代码的可读性。而后你阅读的代码的时候也可以根据变量的默认值来方便的猜测变量的用途。你也可以在声明变量的时候做一些实际的工作，比如sum=a+b;另外，在操作DOM元素的时候，你也可以把DOM元素的引用保存在一个变量中：functionupdateElement(){varel=document.getElementById(result),style=el.style;//dosomethingwithelandstyle...}滥用了的varJavaScript允许你在函数内部有多个var语句，但是却都表现的如同在函数的顶部声明一样。这个特性在你使用一个变量然后在后面又声明了这个变量时会导致一些奇怪的逻辑问题。对于JavaScript来说，只要变量在同一个作用域，那么就认为是声明了的，就算是在var语句之前使用也一样。看看这个例子：myname=global;//globalvariablefunctionfunc(){alert(myname);//undefinedvarmyname=local;alert(myname);//local}func();在这个例子中，或许你期望第一次会弹出global，第二次弹出local。因为第一次的时候没有还没有使用var声明myname，这是应该是全局变量的myname，第二次声明了，然后alert之后应该是local的值。而事实上不是这样的，只要你在函数中出现了varmyname，那么js就认为你在这个函数中声明了这个变量，但是在读取这个变量的值的时候，因为var语句还没有执行，所以是undefined，很奇怪的逻辑吧。上面的代码相当于：myname=global;//globalvariablefunctionfunc(){varmyname;//sameas-varmyname=undefined;alert(myname);//undefinedmyname=local;alert(myname);//local}func();我们来解释一下这个现象，在代码的解析中，分两个步骤，第一步先处理变量函数的声明，这一步处理整个代码的上下文。第二步就是代码的运行时，创建函数表达式以及未定义的变量。实际上，我们只是假设了这个概念，这并不在ECMAScript的规范中，但是这个行为常常就是这样解释的。for循环在for循环中你会去迭代一些数组元素或者一些HTML元素。for循环常常如此：for(vari=0;imyarray.length;i++){//dosomethingwithmyarray[i]}这样写的问题在于，每一次迭代的时候都会计算数组的长度，尤其在这个参数不是一个数组而是一组HTML元素的时候会降低你的程序的性能。HTML元素的集合在页面上，这样每次都会去再页面上查找相应的元素，这是非常耗时的。所以对于for循环，你需要预先保存数组的长度，这样写：for(vari=0,max=myarray.length;imax;i++){//dosomethingwithmyarray[i]}这样缓存了参数的长度，在每次迭代的时候就不用再去查找计算了。在查找HTML元素集合的时候，缓存参数长度可以带来可观的性能提升，Safari下面提高两倍的速度，在IE7下面提高190倍的速度。需要注意的是，当你需要操作修改DOM元素的数量的时候，你肯定希望这个值是随时更新的而不是一个常量。使用下面的单一var模式，你也可以把var提到循环之外：functionlooper(){vari=0,max,myarray=[];//...for(i=0,max=myarray.length;imax;i++){//dosomethingwithmyarray[i]}}这个模式可以增强整个代码的连续性，但是不好的一点是当你重构代码的时候复制粘贴就没那么容易了。例如：如果你想在其他函数中也使用这个循环，那你需要确定在新的函数中处理好了i和max（或许还需要删掉这个）。这个函数还有两个点可以优化的：可以少一个变量（不需要max）递减到0，一个数字与0比较比这个数字与另外一个数字比较更快所以就可以写为：vari,myarray=[];for(i=myarray.length;i--;){//dosomethingwithmyarray[i]}针对第二点：varmyarray=[],i=myarray.length;while(i--){//dosomethingwithmyarray[i]}这是两个比较微小的点的优化。另外，JSLint可能对于i–会有意见。for-in循环for-in循环用来迭代非数组的对象。使用for-in循环通常也