http://www.thinkful.com/learn/javascript-best-practices-1/

 

让命名简单易懂

为变量和方法命名时,要选择浅显易懂,简短明了的名字。

不好的变量名:

x1 fe2 xbqne

同样不好的变量名:

incrementerForMainLoopWhichSpansFromTenToTwenty

createNewMemberIfAgeOverTwentyOneAndMoonIsFull

避免用一个具体值来描述一个变量或是方法的名字。

在某些国家也许会没有意义:

isOverEighteen() //译注:因为各个国家的法律或者其他制度对年龄的限制不一

通用:

isLegalAge()

你的代码就像是一个故事,所以你的故事情节要让人容易理解。

避免全局变量

全局变量是个非常糟糕的主意。

原因: 你的代码会运行在一个非常危险的环境中,因为当前页面极有可能在你的JavaScript文件之后加载任何其他的JavaScript文件, 那么你的代码就有被覆盖的可能。

解决办法: 使用闭包或是组件模式。

问题: 所有的全局变量都可以不加限制的访问,所以页面中的任何代码都有可能覆盖你的劳动成果。

var current = null;

var labels = {

   'home':'home',

   'articles':'articles',

   'contact':'contact'           

};

function init(){

};

function show(){

   current = 1;

};

function hide(){

   show();

};

对象字面量: 除非通过对象名,否则所有的东西都被限制访问。

问题:每次访问都要重复书写对象名会导致代码增多同时也是一件令人生厌的事情。

demo = {

   current:null,

   labels:{

      'home':'home',

      'articles':'articles',

      'contact':'contact'

   },

   init:function(){

   },

   show:function(){

      demo.current = 1;

   },

   hide:function(){

      demo.show();

   }

}

组件模式:你需要明确指定什么是全局的,什么不是全局的,下面是具体语法代码。

问题: 重复组件名,方法中有不同的语法。

module = function(){

   var labels = {

      'home':'home',

      'articles':'articles',

      'contact':'contact'

   };

   return {

      current:null,

      init:function(){

      },

      show:function(){

         module.current = 1;

      },

      hide:function(){

         module.show();

      }

   }

}();

建议的组件模式: 保持一致的语法并且先混合再匹配那些要作用全局的变量。

module = function(){

   var current = null;

   var labels = {

      'home':'home',

      'articles':'articles',

      'contact':'contact'

   };

   var init = function(){

   };

   var show = function(){

      current = 1;

   };

   var hide = function(){

      show();

   }

   return{init:init, show:show, current:current}

}();

module.init();

坚持严格的编码风格

浏览器对JavaScript的解析很宽容。然而,松懈有编码风格迟早会让你自食其果,这种事情通常发生在你切换到其他开发环境或者是你把代码移交给其他开发人员的时候。有效的代码就是安全的代码。

验证你的代码: http://www.jslint.com/

添加必要的注释,但要适可而止

不要听信“好的代码是不需要注释的”(“Good code explains itself”) ,那只是个传说。

只在你认为需要的地方添加注释,但别在这里长篇大论地写你的人生故事。

避免使用单行注释//。 相比起来/* */会更加安全,因为它不会在换行符被删除的时候造成错误。

如果你用注释来进行调试,下面是个小技巧:

module = function(){

   var current = null;

/*

   var init = function(){

   };

   var show = function(){

      current = 1;

   };

   var hide = function(){

      show();

   }

// */

   return{init:init, show:show, current:current}

}();

注释永远不应该被最终用户看到,无论在HTML里还是在JavaScript里。开发代码并非线上代码。

 

避免和其他技术混合使用

JavaScript 擅长做计算,转换,访问外部资源(Ajax)和定义一个接口声明(如事件处理)。其他的工作应该让其他的技术去实现。

例如:

当所有类名为“mandatory”的表单输入域为空时给它们加一个红色的边框。

var f = document.getElementById('mainform');

var inputs = f.getElementsByTagName('input');

for(var i=0,j=inputs.length;i<j;i++){

   if(inputs[i].className === 'mandatory' && inputs.value === ''){

      inputs[i].style.borderColor = '#f00';

      inputs[i].style.borderStyle = 'solid';

      inputs[i].style.borderWidth = '1px';

   }

}

两个月后: 所有的样式得遵循公司新的样式指南,不要加边框而是要在元素旁边显示一个警告图标来标明错误。

人们并不需要修改你的JavaScript代码来改变显示效果。

var f = document.getElementById('mainform');

var inputs = f.getElementsByTagName('input');

for(var i=0,j=inputs.length;i<j;i++){

   if(inputs[i].className === 'mandatory' && inputs.value === ''){

      inputs[i].className+=' error';

   }

}

你可以使用CSS避免对大量的元素进行循环操作。

使用简写语法

习惯使用简写语法可以保持你的代码精简易懂。

这段代码

var lunch = new Array();

lunch[0]='Dosa';

lunch[1]='Roti';

lunch[2]='Rice';

lunch[3]='what the heck is this?';

等同于

var lunch = [

   'Dosa',

   'Roti',

   'Rice',

   'what the heck is this?'

];

这段代码

if(v){

   var x = v;

} else {

   var x =10;

}

等同于

var x = v || 10;

这段代码

var direction;

if(x > 100){

   direction = 1;

} else {

   direction = -1;

}

等同于

var direction = (x > 100) ? 1 : -1;

模块化

保持你的代码模块化和专业化。

写一个能处理一切事情的方法看上去充满诱惑。但是,当你要扩展功能的时候你会发现你在好几个方法中做过同样的事情。

为了避免这样的事情发生,确保你的代码尽可能少,只实现某一特定任务的通用助手方法要胜过那些包罗万象的方法。

接下来,可以把这些方法暴露给其他开发者,你可以使用之前我们建议的组件模式创建一个API,来扩展主要的功能。

好的代码应该是不用重写核心就可以轻松建立的。

渐进增强

避免过分依赖JavaScript代码。

DOM的生成是相当缓慢和“昂贵的”。

那些依赖JavaScript的元素,当JavaScript被禁用时用户体验会变得很糟糕。

允许配置和转换

不要让你代码中有可能被改变那部分到处散乱。

包括标签(labels),CSS类,ID 和重置代码(presets)。

把它们放到一个配置对象里,然后再公开它,我们就可以轻松维护这个对象,并且允许用户对它自定义。

例如:

carousel = function(){

   var config = {

      CSS:{

         classes:{

            current:'current',

            scrollContainer:'scroll'

         },

         IDs:{

            maincontainer:'carousel'

         }

      },

      labels:{

         previous:'back',

         next:'next',

         auto:'play'

      },

      settings:{

         amount:5,

         skin:'blue',

         autoplay:false

      },

   };

   function init(){

   };

   function scroll(){

   };

   function highlight(){

   };

   return {config:config,init:init}

}();

总结

本节内容涵盖了最佳实践中的变量命名,注释和一些组织代码的技巧。第二节我们会了解到更多有效处理循环,嵌套以及其他的最佳实践。前往JavaScript最佳实践 2

 


翻译仅供学习所用,如有不妥之处还请不鄙指正。

转载请注明英文原文出处:http://www.thinkful.com/learn/javascript-best-practices-1/

转载请注明中文译文出处:http://www.codingserf.com/index.php/2013/09/javascript-best-practices-part-1/