前端代码规范

一、格式化

1、缩进层级###

4个空格表示一个缩进

2、语句结尾

行的结尾推荐不省略分号，否则分析器的自动分号插入有可能会引起逻辑错误

// 原始代码
function getData() {

    return 
    {
        title: "javascript",
        author: "4399"
    }
}

// 分析器解析后
function getData() {

    return;
    {
        title: "javascript",
        author: "4399"
    };
}

// 正确写法
function getData() {

    return {
        title: "javascript",
        author: "4399"
    };
}

3、行的长度

推荐80个字符，超过则需换行。通常我们会在运算符后换行，下一行会增加两个层级的缩进。如：

callFunction(param1, param2, param3, param4, param5, param6,
        param7)

4、空行

合理地使用空行，可更好地提升代码的可读性，常见的场景有如下：

• 在方法之间
• 在多行或单行注释之前
• 在方法的局部变量和第一条语句之前
• 在方法内的逻辑片段之间插入空行，提高可读性

5、命名

使用小驼峰。例外的是，构造函数用来创建对象，为了区别，遵照大驼峰。

// 好的做法
function Person(userName) {
    this.userName = userName;
}

var myPerson = new Person("4399");

6、引号

和Java、PHP这些语言不同，使用单引号和双引号括起字符串在javascript中功能并无不同。所以你需要关心的是，你的代码应该从头到尾只保持一种风格。推荐使用单引号，因为html属性中习惯是使用双引号，在js中使用单引号，更有利于html片段的拼接。

7、null

null是一个特殊值，但我们常常误解它，将它和undefined搞混。在下列场景应当使用null。

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

还有下面一些场景不应当使用null。

• 不要使用null来检测是否传入了某个参数。
• 不要用null来检测一个未初始化的变量。

8、undefined

没有被初始化的变量都有一个初始值，即undefined。
除了类型判断之外，建议避免在代码中使用undefined。

9、空格

适当地使用空格，将可以美化你的代码，令其可读性更高。

（1）变量定义

var person = {
    userName: "4399",
    userSex: "男",
    children:[ { domain: "web4399" }, { domain: "sy4399" } ] 
}

var personArr = [ "1", "2", "3", "4" ];

（2）运算符号

var person = "4399";
var sex = "男";

if (person == "4399" && sex == "男") {

} 
else {

}

var person = (sex == "男") ? "4399" : (4399 + 1);

（3）函数定义

function addPerson(param1, param2) {
    
}

var addPerson = function(param1, param2) {

}

（5）逻辑语句

if (needAddTbody) {
    for (i = start; i < n; i++) {
        
    }
} 
else {

}

（6）注释

// 这是正确的用法

/* 这也是正确的用法 */

/*
 * 多行注释
 * 这也是正确的用法
 */

10、for循环

• for循环用于遍历数组。

• for-in循环用于遍历对象，一个常见的错误用法是使用for-in循环来遍历数组成员。另外推荐在for-in循环中使用hasOwnProperty()，除非你想查找原型链，这时就应当补充注释。（ps：数据显示，for循环中，for-in的效率是最慢的，因为要查找原型链，速度只有普通for循环的1/7）

  var prop;
  
  for (porp in object) {
      if (object.hasOwnPerproty(prop)) {
          // do something
      }
  }
  

11、待续