JavaScript -- 代码规范

2016-11-18 本文已影响1189人 ghwaphon

使用制表符进行缩进，推荐使用 4 个空格字符作为一个缩进层级。
建议每条语句以分号结尾，虽然 JavaScript 有自动分号插入(ASI) 机制，但是它的插入规则非常复杂难以记住，所以不推荐省略分号。
为了代码的可读性，建议将一行代码的长度保持在 80 字符以内。
当代码达到了单行最大字符限制时，需要将代码手动拆成两行，通常在元算符换行的时候，下一行最好增加两个层级的缩进。
```
 callFunction(elementOne, elementTwo, elementThree, elementFour,
         elementFive);
```

而且最好将一个运算符放置到行尾，这样的话，ASI 就不会自作主张的在行尾添加分号，也就避免了错误的发生。当然如果是在给变量赋值的时候换行，那么第二行的位置应当和赋值运算符的位置保持对齐。

        var result = elementOne + elementTwo + elementThree +
                     elementFive;

合理的使用空行将让你的代码更加易于阅读。在以下场景中添加空行是非常不错的主意。
- 在方法之间
- 在方法中的局部变量和第一条语句之间
- 在单行或多行注释之前
- 在方法的逻辑片段之间

下面是以上原则的实践。
if (true) {

            for (var i = 0; i < Things.length; i++) {
                var p = 1,
                    q = 2;

                if (true) {
                    
                }
            }
        }

命名是一门艺术，更是一门技术，通常来讲命名长度应当尽可能的短，并且抓住要点。为变量命名时，其前缀应该是名词。为函数命名时前缀应当是动词，比如 can, has, is, set, get 等。对于常量的命名，最好使用大写字母和下划线的组和来命名，比如说 MAX_LENGTH 。
null 是一个特殊值，但是千万不要和 undefined 搞混，在下列场景中应当使用 null。
- 用来初始化一个变量，这个变量可能赋值为一个对象。
  var person = null;
- 用来和一个已经初始化的变量比较，这个变量可以是也可以不是一个对象。
  var person = getPerson();
```
  if (person !== null) {  
      doSomething();
  }
```
- 当函数的参数期望是对象时，用作参数传入。
  function printPerson(person) {
  if (person !== null) {
```
          // print person
      }
  }

  printPerson(null);
```
- 当函数的返回值期望是对象时，用作返回值传出。
  function getPerson() {
  if (condition) {
  return new Person("Hwaphon");
  } else {
  return null;
  }
  }
我们通常将 undefined 和 null 搞混，那是因为 undefined == null 的结果是 true，然而这二者的用途却各有不同。那些没有被初始化的变量都有一个初始值，即 defined，表示这个变量等待被赋值。有一点值得注意的是，用 typeof 去检测变量，如果这个变量声明了没有初始化会返回 undefined，二如果这个变量根本就没声明也会返回 undefined。
var person;
```
     console.log(typeof person); // undefined
     console.log(typeof animal); // undefined 
```
JavaScrtipt 支持两种不同类型的注释，单行注释和多行注释。关于单行注释，有三种使用方式。
- 独占一行的注释，用来解释下一行代码。这行注释之前总是有一个空行，且缩进层级和下一行代码保持一致。
  if (condition) {
```
     // This is a single line comment
     doSomething();
 }
```
- 在代码行的尾部进行注释。代码结束到注释之间至少有一个缩进。注释（包括之前的代码部分）不应该超过但行的最大字符数( 80 ) 限制，如果超过了，就将这条注释放置于当前代码行的上方。
  if (condition) {
  doSomething(); // This is a single line comment
  }
- 被注释掉的是一大段代码。
  // if (condition) {
  // doSomething();
  // }

关于多行注释，，是通过 /* */ 来实现的，不过最好还是使用下面这样的风格实现多行注释。
/*
* First line
* Second line
* Third line
*/
至于什么时候使用注释，有一条指导原则，当代码不够清晰时添加注释，而当代码很明了时不应当添加注释。在以下情况会最好添加注释。

难于理解的代码
可能被误认为错误的代码
浏览器特性 hack

使用 if 或者 for 语句时，不论块语句包含多行代码还是单行代码，都应当使用花括号。
在 switch 语句中，尽量不要使用 case 语句的连续执行，如果非要使用的话，最好添加注释。至于 default，即使其什么都不做，最好也不腰省略，比如下面这样。
switch(condition) {
case "first":
break;
```
        case "second":
            break;

        default:
            // no logic here
    }
```
尽量不要使用 continue, 用 if 语句替代 continue 的功能。
for-in 循环是用来遍历对象属性的，可是存在一个问题，它不仅遍历对象的实例属性，同样还遍历从原型继承来的属性。所以最好使用 hasOwnProperty() 方法来为 for-in 循环过滤出实例属性。
推荐在函数顶部使用单 var 语句声明接下来可能会使用到的变量，而且没有初始值的变量应该出现在 var 语句的尾部。
推荐先声明函数再使用函数。
不推荐使用全局的严格模式，推荐使用局部的严格模式。
将 CSS 从 JavaScript 中分离，当需要通过 JavaScript 来修改元素样式的时候，最佳的方法是操作 CSS 的 className。
// original style
element.className += " className";
```
    // HTML5 style
    element.classList.add("className");
```
将 JavaScript 从 HTML 中抽离。可以自己创造一个 addListener() 函数添加行为，而不是在 HTML 结构中使用 onclick 之类的内嵌 JavaScript 代码。
function addListener(target, type, handler) {
if (target.addEventListener) {
target.addEventListener(type, handler, false);
} else if(target.attachEvent) {
target.attachEvent("on" + type, handler);
} else {
target["on" + type] = handler;
}
}
用typeof 检测原始值，用 instanceof 检测引用值。在使用这两个运算符的时候不要加括号，那样会让它们看起来像函数。检测函数最好使用 typeof，下面是检测数组的一种方法。
function isArray(value) {
if (typeof Array.isArray === "function") {
return Array.isArray(value);
} else {
return Object.prototype.toString.call(value) === "[object Array]";
}
}

对于一个对象，如果你想检测某个属性是否存在，有以下两种方式。
var person = {
name: "hwaphon",
age: 21
};

    // Example one
    if ("name" in person) {
        console.log("Exsits");
    }

    // Example two
    if (person.hasOwnProperty("name")) {
        console.log("Exsits");
    }

JavaScript -- 代码规范

猜你喜欢

热点阅读