JavaScript最佳实践一

变量和函数名有意义

选择易理解和简短的名字作为变量和方法。

糟糕的命名

x1 fe2 xbqne

同样糟糕的命名

incrementerForMainLoopWhichSpansFromTenToTwenty
}
createNewMemberIfAgeOverTwentyOneAndMoonIsFull

尽量避免使用变量和方法的名字去解释值。

或许在其他一些国家是没有意义

isOverEighteen()

通用

isLegalAge()

你的代码就是一个故事,请保持故事情节深入人心(容易阅读)。

避免全局

全局变量是一个相当可怕的。

原因:你代码中的全局变量即有可能被覆盖。

变通:使用闭包和模块模式。

问题:所有的全局变量在其他地方都可以访问,这是不可避免的。

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/

代码注释适中为好

好的代码不需解释

这是一个夸张的迷信。

注释那些你认为需要解释的地方,但是记住不要讲解你的人生故事(不要太长)。

避免使用单行注释//,使用/ /更安全,当换行时不会产生错误。

如果你使用注释来调试代码,这是一个很好的技巧:

module = function(){
   var current = null;
/*
   var init = function(){
   };
   var show = function(){
      current = 1;
   };
   var hide = function(){
      show();
   }
// */
   return{init:init, show:show, current:current}
}();

注释不能出现在用户面前。开发代码不是活的代码(开发代码不是面向用户的代码)

避免技术混用

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';
   }
}

使用短路符号

你一旦习惯使用短路符号,就会发现你的代码简洁并且容易阅读。

原代码:

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;

模块化

保持代码模块化和职责单一性。

很容易写出一个方法来处理好多事情,可是当你要扩展功能时,你应该拆分多个方法去实现相应的功能。

为了防止出现类似的情况,你应该保证代码的简单和通用去完成功能,而不是大而全的方法去实现。

在另一个功能时,你可以使用揭示模式暴露方法以此来扩展方法。

好的代码应该容易扩展而不需要重写核心代码。

渐进增强

避免JavaScript代码的高度耦合。

DOM的生成耗费时间并且代价昂贵。

有些元素的生成依赖JavaScript,但当JavaScript代码被禁用时,用户看到的页面就不会那么友好。

允许配置和转移

你的代码会随时被改变。

包括标签,类名和IDs以及外观。

把这些放到可配置项中,使你的代码易维护并可定制。

例如:

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-best-practices-1

分享到: