编写可维护的JavaScript之编程风格

时间：2024-01-20 17:22:29

在团队中只有每个人的编程风格一致，大家才能方便的互相看懂和维护对方的代码。

1. 层级缩进

对于层级缩进目前有两种主张：
1）使用制表符
这种方法有两种好处，第一，制表符和缩进层级之间是一一对应关系，符合逻辑；第二是文本编辑器可以配置制表符的展现长度。
缺点是系统对制表符的解释不一致。
2）使用空格符
目前主要有三种具体的做法：2个空格表示一个缩进，4个空格表示一个缩进，8个空格表示一个缩进
优点：在所有的系统和编辑器中，文件的展现格式不会有任何差异；
缺点：对于单个开发者来说，使用一个没有配置好的文本编辑器创建格式化的代码的方式非常原始。

2. 语句结尾

JavaScript的语句要么独占一行， 要么以分号结尾。但是有赖于分析器的自动分号插入机制（Automatic Semicolon Insertion，ASI）会在应该有分号而实际没有的地方自动插入分号。
大多数场景不会出错，但是有写场景有可能会出现问题,导致出错：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
//原始代码
function data(){
	return 
	{
		name : "xiaoming",
		age : 18
	}
}
//分析器会理解成：
function data(){
	return;
	{
		name : "xiaoming",
		age : 18
	};
}

所以推荐在每一句代码的结束都加上分号，减少出现问题的几率。

3. 行的长度

建议将每行长度限定在80个字符

4. 换行

当单行字符达到最大值（例如80个字符）的时候要手动拆成两行。
一般规则是 ： 在运算符后换行，第二行追加两个缩进

1
2
 
doSomething ( value1, value2, document, window, 
		element );

特例：

特例1 : 在if语句中换行可以保持一个缩进，这样更容易阅读：

1
2
3
4
 
if ( isLong && isShow && number == 1 && 
		children.length > 0 ) {
	//do something...		
}

特例2 ：当给变量赋值时，第二行的位置应该和赋值运算符的位置保持对齐：

1
2
 
var result = something + anotherThing + yetAnothering + someThingElse + 
	     anotherSomethingElse;

5. 空行

有时一段代码的语义和另外一段代码不相关，这时就应该使用空行分割，确保有关联的代码展现在一起。
一般规则 ：
在每个控制流语句（if，for语句等）之前添加空行;
在方法之前；
在方法中的局部变量和第一条语句之间；
在多行或但行注释之前；
在方法内的逻辑片段之间插入空行，提高可读性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
//不实用空行
if ( wl && wl.length ) {
	for ( var i = 0;i < wl.length; i++ ) {
		p = wl[i];
		type = Y.Lang.type( r[p] );
		if ( s.hasOwnProperty(p) ){
			if ( merge && type == 'object'){
				//do something...
			}
		}
	}
}
//使用空行
if ( wl && wl.length ) {

	for ( var i = 0;i < wl.length; i++ ) {
		p = wl[i];
		type = Y.Lang.type( r[p] );

		if ( s.hasOwnProperty(p) ){

			if ( merge && type == 'object'){
				//do something...
			}
		}
	}
}

6. 命名

1
 
“计算机只存在两个难题：缓存失效和命名。”   --- Phil Karlton

JavaScript语言的核心ECMAScript是遵守驼峰式大小写命名法。

一般命名规则：
命名长度尽可能短，并要抓住重点；
避免没有任何意义的命名；
变量名遵守驼峰大小写命名法，前缀应当是名词；
函数名遵守驼峰大小写命名法，前缀应当是动词；
常量使用大写字母和下划线命名，下划线用以分割单词；
构造函数的命名遵守大驼峰（以大写字母开始）命名法，通常是名词（因为是用来创建某个类型的实例）；
字符串可以用双引号也可以使用单引号括起来（上下文要保持同一种风格）；

7. null

null的使用场景 ：
用来初始化一个变量，这个变量可能赋值为一个对象；
用来和一个已经初始化的变量比较，这个变量可以是也可以不是一个对象；
当函数的参数期望是对象时，用作参数传入；
当函数的返回值期望是对象时，用作返回值传出；

理解null最好的方式是将它当作对象的占位符

[参考资料]:
编写可维护的JavaScript，Nicholas C. Zakas 著，李晶 郭凯 张散集 译， Copyright 2012 Nicholas Zakas,978-7-115-31008-8

相关文章