编写高质量JavaScript代码的基本要点(1)(6)
左花括号的位置(Opening Brace Location)
开发人员对于左大括号的位置有着不同的偏好——在同一行或是下一行。
- if (true) {
- alert("It's TRUE!");
- }
- //或
- if (true)
- {
- alert("It's TRUE!");
- }
这个实例中,仁者见仁智者见智,但也有个案,括号位置不同会有不同的行为表现。这是因为分号插入机制(semicolon insertion mechanism)——JavaScript是不挑剔的,当你选择不使用分号结束一行代码时JavaScript会自己帮你补上。这种行为可能会导致麻 烦,如当你返回对象字面量,而左括号却在下一行的时候:
- // 警告: 意外的返回值
- function func() {
- return
- // 下面代码不执行
- {
- name : "Batman"
- }
- }
如果你希望函数返回一个含有name属性的对象,你会惊讶。由于隐含分号,函数返回undefined。前面的代码等价于:
- // 警告: 意外的返回值
- function func() {
- return undefined;
- // 下面代码不执行
- {
- name : "Batman"
- }
- }
总之,总是使用花括号,并始终把在与之前的语句放在同一行:
- function func() {
- return {
- name : "Batman"
- };
- }
关于分号注:就像使用花括号,你应该总是使用分号,即使他们可由JavaScript解析器隐式创建。这不仅促进更科学和更严格的代码,而且有助于解决存有疑惑的地方,就如前面的例子显示。
空格(White Space)
空格的使用同样有助于改善代码的可读性和一致性。在写英文句子的时候,在逗号和句号后面会使用间隔。在JavaScript中,你可以按照同样的逻辑在列表模样表达式(相当于逗号)和结束语句(相对于完成了“想法”)后面添加间隔。
适合使用空格的地方包括:
◆ for循环分号分开后的的部分:如for (var i = 0; i < 10; i += 1) {...}
◆ for循环中初始化的多变量(i和max):for (var i = 0, max = 10; i < max; i += 1) {...}
◆ 分隔数组项的逗号的后面:var a = [1, 2, 3];
◆ 对象属性逗号的后面以及分隔属性名和属性值的冒号的后面:var o = {a: 1, b: 2};
◆ 限定函数参数:myFunc(a, b, c)
◆ 函数声明的花括号的前面:function myFunc() {}
◆ 匿名函数表达式function的后面:var myFunc = function () {};
使用空格分开所有的操作符和操作对象是另一个不错的使用,这意味着在+, -, *, =, <, >, <=, >=, ===, !==, &&, ||, +=等前后都需要空格。
- // 宽松一致的间距
- // 使代码更易读
- // 使得更加“透气”
- var d = 0,
- a = b + 1;
- if (a && b && c) {
- d = a % c;
- a += d;
- }
- // 反面例子
- // 缺失或间距不一
- // 使代码变得疑惑
- var d = 0,
- a = b + 1;
- if (a&&b&&c) {
- d=a % c;
- a+= d;
- }
最后需要注意的一个空格——花括号间距。最好使用空格:
◆ 函数、if-else语句、循环、对象字面量的左花括号的前面({)
◆ else或while之间的右花括号(})
空格使用的一点不足就是增加了文件的大小,但是压缩无此问题。
有一个经常被忽略的代码可读性方面是垂直空格的使用。你可以使用空行来分隔代码单元,就像是文学作品中使用段落分隔一样。
命名规范(Naming Conventions)
另一种方法让你的代码更具可预测性和可维护性是采用命名规范。这就意味着你需要用同一种形式给你的变量和函数命名。
下面是建议的一些命名规范,你可以原样采用,也可以根据自己的喜好作调整。同样,遵循规范要比规范是什么更重要。
以大写字母写构造函数(Capitalizing Constructors)
JavaScript并没有类,但有new调用的构造函数:
- var adam = new Person();
因为构造函数仍仅仅是函数,仅看函数名就可以帮助告诉你这应该是一个构造函数还是一个正常的函数。
命名构造函数时首字母大写具有暗示作用,使用小写命名的函数和方法不应该使用new调用:
- function MyConstructor() {...}
- function myFunction() {...}






