JavaScript编码规范

JavaScript 编码规范

 

javaScript 编码规范,其中大量遵循规范来自 GoogleJs 规范、老道的蝴蝶书以及日常编码习惯。

主要有两部分组成:一:编码规范(即默认遵守写法);二:遵循原则(使代码更健壮的推荐写 法)。

 

 

以下,我将带领大家一起看看作为前端 JS 开发人员,在平日的代码书写中应如何写出更规范的 code。

 

 

JavaScript编码规范

 

JavaScript

JavaScript 程序应独立保存在后缀名为.js 的文件中。

HTML 中的 JavaScript 代码会明显增加文件大小,而且也不能对其进行缓存和压缩。 应尽量放到</body>之前。这样可以减少因为载入 script 而造成其他页面内容载入也被延迟的问 题。也没有必要使用 language 或者 type 属性,MIME 类型是由服务器而非 script 标签来决 定的。

 

 

缩进

 

缩进的单位为两个空格。禁止使用 Tab 键来缩进,因各语言没有统一 Tab 长短标准。 每行长度
– 避免超过 80 个字符。当一条语句一行写不下时,请考虑折行。
– 表达式语句在逗号后换行。可减少因复制粘贴产生的错误被分号掩盖的几率。同时下一行应该 缩进两个个空格。

 

注释

不要吝啬注释。给以后需要理解你的代码的人(或许就是你自己)留下信息是非常有用的。
– 注释应和所注释的代码一样是书写良好且清晰明了。
– 需及时更新注释。错误的注释会让程序更加难以阅读和理解。
– 让注释有意义。重点在解释那些不容易立即明白的逻辑上,不要留下无意义的注释,如: i=0;//使 i 等于 0。

– 使用单行注释。块注释用于注释正式文档和无用代码。
注释规范:文档注释遵循 YUIDoc 规范(http://yui.github.io/yuidoc/syntax/),所有的文件、类、 方法和属性都应该用合适的标记和类型进行注释。

 

 

声明

所有的变量必须在使用前进行声明,标明注释。函数也应该。

– 使用多 var 模式声明变量(易维护,如删除时直接删除整行)。项目组自定。 – 减少全局变量的使用。不要让局部变量覆盖全局变量。

 

命名

变量名应由 26 个大小写字母(A..Z,a..z),10 个数字(0..9),和_(下划线)组成。 不要把_(下划线)作为变量开头,推荐(匈牙利命名法)前缀+含义单词
如:sName nPage bChecked aList rEmail fInint oDate。变量首字母为变量的数据 类型,如 string,number,boolean...。项目组自定。
– 全局变量:g 开头 gUserName。项目组自定。
– 常量:全部大写。
– 私有成员变量和方法命名以下划线开头,如:var _company。
– 函数:使用动词或动词【+名词】形式,如 getVersion(),submitForm()。
– 必须与 new 共同使用的构造函数名时应以大写字母开头。

 

语句

 

简单语句:

每行只放 1 条语句,且以分号结束。 复合语句: 复合语句是被包含在{}的语句序列。 – 被括起的语句必须多缩进两个空格; – {应在复合语句其实行的结尾处;

– }应与{的那一行的开头对齐。
– 大括号应该在所有复合语句中使用,即使只有一条语句。当它们是控制结构的一部分时,比如 一个 if 或者 for 语句。这样做可以避免以后添加语句时造成的错误。

 

return 语句:
一条有返回值的 return 语句不要使用( )来括住返回值。如返回表达式,则应与 return 在 同一行,以避免误加分号错误。

 

if 语句:

if (condition) { statements;
}else if (condition) {

statements; }else { statements; }

其中,表达式推荐常量在左(变量在右)进行判断。if('0'== a)防止缺少等号的笔误,如写 成 if(a='0')不会报错。如常量在左,写成:if('0'=a)则会抛出错误:Uncaught

ReferenceError:Invalid left-hand side in assignment

 

while 语句:

 

do-while 语句:

不像别的复合语句,do 语句总是以;(分号)结尾。

 

switch 语句:
case 或 default 后,都需有 break/return 或 throw。

 

空格

空格应在以下情况时使用:
– 跟在((左括号)后面的关键字应被一个空格隔开;
– 函数参数与((左括号)之间不应该有空格。这能帮助区分关键字和函数调用;
– 所有的二元操作符除了.、(和[应用空格将其与操作数隔开;
– 一元操作符与其操作数之间不应有空格,除非操作符是个单词,比如 typeof; – 每个在控制部分,比如 for 语句中的;后须跟一个空格;
– 每个,后应跟一个空格。

 

空行

while (condition){ statements;
}

do {
statements;
} while (condition);

用空行来将逻辑相关的代码块分割开可以提高程序的可读性。

 

for in 语句
遍历对象所有属性名。只用于 object/map/hash 的遍历。

它会遍历出所有从原型链中继承赖的成员属性(并非从 0 到 length – 1),应该用 hasOwnProperty()排除掉。如

for(name in object){ if(object.hasOwnProperty(name)){ ...//

} }

 

JavaScript遵循原则

 

禁止使用 with 语句
快捷访问对象属性,其结果可能不可预料。还严重影响 js 处理器的速度(因为它阻断了变量名的 作用域绑定)。

 

禁止使用 eval
提供了访问 js 编译器的机会,该函数传递字符串给 js 编译器且执行结果。该用法难以阅读且使性 能降低(因为它需运行编译器)。

 

禁止使用 void 运算符 接受一个运算数并返回 undefined,无意义且令人困惑。

 

禁止使用 (逗号)操作符 不含特殊场景,如 for();变量定义;参数列表

 

字符串拼接

使用“+”进行字符串多行拼接,不建议使用“\”。
因为 MCMAScript 标准不支持“\”拼接方式,并且“\”拼接方式会导致行前的空白被包含在变量中,

会产生奇怪的错误。

 

避免使用括号

对于一元操作符(如 delete,typeof 和 void),或在某些关键词(如 return,throw, case,new)之后。不要使用括号。

 

禁止用 new 来实例化基本类型,如:var bTrue=new Boolean(false)
new 创建继承其运算数的原型新对象,继而调用该运算数,且 this 被绑定到全局对象中而不 是新创建的对象。

当函数初始化新成员属性时它将会污染全局变量,没有编译与运行警告,糟糕的用法,避免使 用。

禁止使用保留字 当保留字被用做对象字面量的键值时必须被引号括起来,不能用在点表示法中。

var class; //error object={case:value} //error object={‘case’:value} //ok ...

 

不要在块内声明一个函数

if (x) { function foo() {} }

虽然很多 JS 引擎都支持块内声明函数,但它不属于 ECMAScript 规范。
ECMAScript 只允许在脚本的根语句或函数中声明函数。如果确实需要在块中定义函数,建议使 用函数表达式来初始化变量:
if (x) var foo = function() {} }
更多详情请自行谷哥:命名函数表达式揭秘。

 

{}和[]
使用{}代替 new Object()。使用[]代替 new Array()。 当成员是有序数字时使用数组,当是无规律字符串或其他时使用对象。

 

作用域

在 JavaScript 中块没有域,只有函数有域。不要使用块,除非在复合语句中。

 

===和!==操作符 使用===和!==。

避免使用==和!=操作符。该操作符会进行类型强制转换,其规则繁琐难记。特别是, 不要将==用 于与错值比较(false,null,undefined,“”,0,NaN)。
>下列值在布尔表达式中结果为 false:
null

undefined '' //空字符串 0 //数字

 

>而下面的为 true: '0'//字符串
[] //空数组
{} //空对象

 

+ +正负号
+后不应跟上+或++(-也是一样),位置不当的空格则可能将+ +变成++,这类错误不易查找,所以 避免该用法,用()圆括号避免。

 

自增/自减 自增(++)和自减(--)运算符,放在变量的前面或后面,返回的值不一样,很容易发生错

误。避免使用。用+=和-=代替。 用变量存储数组长度

for(var i=0,max=arr.length;i<max;i+=1),减少遍历次数。

 

使用单引号定义字符串;双引号用于 html 代码。 合理使用闭包
闭包容易导致内存泄露,尤其是使用闭包函数处理 DOM 事件时经常会出现 HTML 元素与闭包函 数的相互引用,从而导致无法释放 HTML 元素和闭包函数的内存(闭包保留了一个指向它封闭作 用域的指针,所以在给 DOM 元素附加闭包时,很可能会产生循环引用)。

 

异常

尽量在可能但不确定出现异常的地方(大量运算,AJAX 请求,数组操作或 DOM 操作等)用 try-catch(e)来抛出异常。代码量大情况下自定义异常抛出错误信息,更有利于错误信息阅 读,且更加通用。

 

 

为了保证代码的质量,方便日后维护。我们提交代码之前都应思考以下几点: * 所有的变量和函数名字是否合理并且易于理解?

 

* 代码是否经过了合理的组织?从头到尾都很流畅吗?
* 所有的依赖都显而易见吗?

* 在那些可能引起混淆的地方都添加了注释吗?