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
posted on 2015-11-19 21:36 ChessZhang 阅读(1481) 评论(0) 编辑 收藏 举报