JavaScript编码风格

最近在看前端大牛Nicbolas C.Zakas的《编写可维护的JavaScript代码》一书。觉得里面的很多知识点都写的很好，所以，就写篇博文，总结一下吧！编码规范对于程序设计来说是很重要的，因为如果编码风格不一致的话，代码看上去就会很乱，是很难维护的。当然，不同的开发团队有着不同的编码规范，比较著名的有，Google编码规范，jQuery编码规范，dojo编码规范以及Yahoo！编码规范，等等。

第一，Indentation Levels（缩进）。目前比较流行的是2空格缩进和4空格缩进，比如谷歌的是2空格的，但是jQuery和Yahoo！是4空格的。而Nicbola建议使用4个空格的tab键缩进，他的理由是：

    1.大多数编辑器默认是4个空格的

    2.此外，两个空格缩进不够明显；

不管采用哪种方法哪种缩进方法，团队开发一定要采用相同的缩进，切忌同一个项目里面，有些采用两空格缩进，有些采用4空格缩进。

 

 

第二，line length and line breaking（行的长度和换行），不少开发者喜欢把一行代码写的很长很长，要拖动水平滚动条才可以看全一行的代码，事实上，这是不好的做法，在很多的编码规范里面，都对行长度做了限制的。一般的，一行代码的长度不要超过80个字符。当字母超过限制的长度时，（一般为80个字母），一定要换行。换行需要缩进，而且还是二级缩进（所谓二级缩进就是缩进再缩进，也即按下两个tab键）。比如下面的代码：

 

// 推荐写法，在运算符结尾处断行（逗号也是运算符），而且缩进也正确，用了二级缩进
callAFunction(document, element, window, "some string value", true, 123,
        navigator);

// 不推荐写法，因为只用了一级缩进
callAFunction(document, element, window, "some string value", true, 123,
    navigator);

// Bad: 不推荐写法，不是以运算符结尾处断行
callAFunction(document, element, window, "some string value", true, 123
        , navigator);

断行需要注意的是，为了避免JavaScript引擎自动在末尾添加分号导致出错，往往都是在运算符结尾处断行的；在这种断行规则在块级语句里同样适用的，如下是if语句的断行：

if (isLeapYear && isFebruary && day == 29 && itsYourBirthday &&
        noPlans) {
    waitAnotherFourYears();
}

不过有一个例外，就是为变量赋值的时候，第二行的起始位置要跟第一行的等号的右部的首个字符对齐，这样说有点儿拗口，直接来个例子说明吧，如下所示：

var result = something + anotherThing + yetAnotherThing + somethingElse +
             anotherSomethingElse;

我们为变量result赋值，第二行的anotherSomethingElse与第一行的等号右边的第一个字符（即something的第一个字符s）对齐的；

 

第三.naming(命名规则)

一般的，建议使用小写的字母开头的驼峰命名规则，如下

var schoolName;

变量的命名最好是以名词开头，如下：

var schoolName;

 

函数命名最好以动词开头，常用的有can, has, is, get, set，如下：

function getSchoolName() {

}

变量类型最好可以猜出变量的类型，比如：count, length, size等可以知道是Number类型的，而schoolName, title, color, type等都是字符String类型的，此外，循环的趟数常用i, j, k等；

 

但是有一类函数建议使用大写字母开头的，那就是construtor(构造函数)。构造函数是用来创建对象的，通常采用pascal的命名规则，即首字母大写的驼峰命名，以便跟普通函数可以区分开，如下：

// 推荐写法
function Person(name) {
    this.name = name;
}
Person.prototype.sayName = function() {
    alert(this.name);
};
var me = new Person("Nicholas");

 

第四，String(字符串)

javascript的字符串既可以使用单引号包起来，也可以使用双引号。如下面都是允许的：

var name = "Nicholas says, \"Hi.\"";
var name = 'Nicholas says, "Hi"';  

但是为了统一，不要有时使用双引号，有时使用单引号。如下面代码就不好的了：

var p1, p2;
p1 = "Tom";
p2 = "Jane"

关于字符串的使用还有一个问题，尽量不要使用multiline strings（多行字符串），而是应该把他们拆成多个字符串，然后是用“+”进行拼接，如下：

//不推荐写法
var longString = "Here's the story, of a man \
named Brady.";

//推荐写法
var longString = "Here's the story, of a man " +
                 "named Brady.";

作者建议使用双引号，因为，其他很多语言都是用双引号的。比如你既写JavaScript代码，又写Java言代码，如果你一直都用双引号的话，那就不用老是去想“我现在是在写JavaScript还是Java呢”！

 

第五，statement（块级语句）

块级语句主要包括下面这些：    • if     • for    • while    • do...while    • try...catch...finally等等，很多时候，当块级语句只有一条语句时，很多人都喜欢省略花括号，如下：

if (condition)
doSomething();

现在这个代码是没问题的，如果一段时间之后，我们想要为这个块级语句扩展代码，比如，在if里面添加多一个语句，如下：

if (condition)
doSomething();
doSomethingElse();

这时候，doSomethingElse();无论如何都是会执行的，因为他不是在if里面的，但这不是我们想要的。所以，为了避免扩展时出现类似的问题，应该养成无论何时都要添加花括号，哪怕只有一条语句，上面的例子推荐写法，应该如下：

if (condition) {
    doSomething();
}

此外，对于块级元素的左花括号（“{”）的位置一般建议写在块级语句开始行的后面，Google JavaScript Style Guides，以及jQuery都是推荐这种写法的，如下：

if (condition) {
    doSomething();
} else {
    doSomethingElse();
}

而不要写在另起一行的开头，如下：

if (condition)
{
    doSomething();
}
else
{
    doSomethingElse();
}

还有就是，左花括号前面要添加一个空格，如下所示

if (condition) {
    doSomething();
}

 

第六，函数调用时，函数名和左括号之间不要有空格

// 推荐写法
doSomething(item);
// 不推荐写法，这看起来像块级语句了
doSomething (item);

第七，等式（ equality）

 一般的，在比较两个不同类型的数值是否相等时，建议使用“===”和“！==”，而不要使用“==”和"!="。因为，如果比较两个不同类型的数值时，"=="和"!="会发生强制类型转换的，所以这样的比较结果有时候是不太准确的。比如，数字跟字符串的比较，会自动把字符串转换成数字的：

// The number 5 and string 5
console.log(5 == "5"); // true
// The number 25 and hexadecimal string 25
console.log(25 == "0x19"); // true