首页 专题 H5案例 前端导航 UI框架

推荐的JavaScript编码规范

阅读 1065 评论 0
作为前端开发人员,我相信每一个人都或多或少的用到原生的JavaScript,也正是因为用的人多,导致编码风格也是多种多样的,而不规范的编码风格,不仅会导致一些奇怪的问题出现,而且不利于后期维护和提高执行效率。

基于本人也在开发中因为规范而出现各种问题,我特意的整理了一下JavaScript编码规范(并不强制,只是推荐)。

1、变量
声明变量必须加上var关键字,而且每个var只声明一个变量,增加可读写。
推荐:

var name = 'TG';

var sex = 'man';

不推荐:

var name = 'TG', sex = 'man';


原因:当声明变量没有加上var时,变量就会暴露在全局上下文中,不仅很容易造成变量冲突,而且造成全局污染。

2、常量
常量的命名方式:用大写字符,并用下划线分隔。永远不要使用const关键词。

var MY_NAME = 'TG';


原因:IE并不支持const

3、分号
总是使用分号

在《JavaScript学习笔记整理(1):词法结构》一文有提到缺少分号的坏处

4、嵌套函数
可以使用,可以减少重复代码,隐藏帮助函数等好处

5、块内函数声明
不要在块内声明一个函数

不推荐:

if(a){

  function foo(){}

}

推荐:

if(a){

  var foo = function(){}

}


6、异常处理
可以使用

try{}catch(e){}


throw exception


7、eval()
只用于解析序列化串

原因:eval()会让程序执行的比较混乱。

8、with(){}
尽量少用。

9、缩进

用4个空格作为一缩进,而不是使用tab


原因:因为在不同浏览器上,tab的长度不一。


10、字符串过长截取

每行代码不超过80个字符。如代码过长,可使用+运算符拼接。


原因:过长会导致需要拖动横向滚动条才看得到后面的代码,降低开发效率,而且在复制黏贴时有可能错漏。


11、大括号

区块起首的大括号,不要另起一行


推荐:

if (true) {


}

不推荐:

if (true)

{

}


原因:JavaScript会自动添加句末的分号,容易导致一些奇怪的错误。


12、构造函数

对于构造函数,命名采用首字母大写,其他函数一律小写。


原因:可读性,区分构造函数和普通函数


13、注释

合理的加上注释,有利于后期维护,提高可读性。


14、{}和[]

使用{}代替new Object(),使用[]代替new Array()


15、单引号(')

尽量使用单引号('),只在JSON文件中使用双引号。


16、变量和函数声明

变量名和函数名在JavaScript机制下会发生声明提升(也就是会提前到顶部声明),所以建议变量和函数应该在使用前声明。


在《JavaScript学习笔记整理(2):类型、值和变量》一文中有提到声明提升


17、使用===和!==代替==和!=

在JavaScript中,比较运算符进行计算时会进行强制转换,==和!=会产生一些意想不到的结果,所以应该用“严格相等”===。


18、换行

在语句块和下一个语句之间留一个空行,提高可读性。


19、命名

构造函数或类名使用驼峰式命名


20、嵌入规则

JavaScript程序应该尽量放在.js的文件中。


21、命名规则

JavaScript 中的标识符的命名规则:  

  • 以字母、下划线'_'或美元符号'$'开头  
  • 允许名称中包含字母,数字,下划线'_'和美元符号'$'  
  • 区分大小写


变量、属性和函数名应该用驼峰式:

var isLogin = false;

私有函数用下划线开头:

function getFirstName(){

  function _getName(){}

}

构造函数和类名应该首字母大写。

对象中私有变量和函数以下划线开头。


22、语句

对于复合语句,if, for, while, do, switch, try … catch 等代码体,函数定义的函数体,对象的定义等都需要放在花括号'{}'里面。  

  • '{' 应在行末,标志代码块的开始。  
  • '}' 应在一行开头,标志代码块的结束,同时需要和'{'所在行的开始对齐,以表明一个完整的复合语句段。这样可以极大地提高代码的可阅读性,控制逻辑能清晰地表现出来。  
  • 被包含的代码段应该再缩进 4 个空格。  
  • 即使被包含的代码段只有一句,也应该用花括号'{}'包含。尽管不用花括号代码也不会错,但如若需要增加语句的话,则较容易因花括号遗漏而引起的编译错误或逻辑错误。


return语句在使用时也需注意,如果用表达式的执行作为返回值,应该把表达式和 return 放在同一行中,以免换行符被误解析为语句的结束而引起返回错误。return 关键字后若没有返回表达式,则返回 undefined。构造器的默认返回值为 this。

return a + b;


23、方法链(调用链)

如果使用方法链,应该每行只调用一个方法:

Animal

  .getName()

  .getFirstName()


24、使用三元运算符

三元运算符不应该用在一行,应该分割成多行替代。

推荐:

var foo = (a === b)

  ? 1

  : 2;

不推荐:

var foo = (a === b) ?1 : 2;


25、逗号

对于数组和对象不要使用多余的“,”

不推荐:

var arr = [1,2,]

var person = {

  name: 'TG'

};


原因:IE不兼容


26、for-in

对于数组,尽量避免使用for-in


关注”全栈技术杂货铺“

全栈技术杂货铺