javascript代码风格指北

我们来看一段代码

//合法的代码
var name = "Dreams";
function sayName() {
    alert(name);
}
//合法的代码，但不推荐这样写
var name = "Dreams"
function sayName() {
    alert(name)
}
复制代码

这里我们可以看到上面两段代码的区别就是在于一段加了分号，一段没有加，那么问题来了，我们到底该不该加分号？

解释

这里其实有赖于分析的自动分号插入(Automatic Semicolon Insertion, ASI)机制，Javascript代码省略分号也是可以正常工作的。ASI会自动寻找代码中应当使用分号但实际没有分号额位置，并插入分号。大多数场景下ASI都会正确插入分号，不会产生错误。但ASI的分号插入规则非常复杂且很难记住，因此推荐大家不要省略分号。看一下这段代码：

// 原始代码
function getData() {
    return
    {
        title: "Dreams",
        author: "Dreams"
    }
}
//分析器会将它理解成
function getData() {
    return;
    {
        title: "Dreams",
        author: "Dreams"  
    };
}
复制代码

在这段代码中，函数getData()的本意是返回一个包含一些数据的对象。然而，return之后新起了一行，导致return后被插入了一个分号，这会导致函数返回值是undefined. 可以通过将左花括号移至与return同一行的位置来修复这个问题。

//这段代码工作正常，尽管没有用分号
function getData() {
    return {
        title: "Dreams",
        author: "Dreams"  
    }
}
复制代码

ASI在某些场景下是很管用的，特别是，有时候ASI可以帮助减少代码错误。当某个场景我们认为不需要插入分号而ASI认为需要插入时，常常会产生错误。所以我们尽量养成加分号的习惯， 在某种意义上加上分号还提高程序的性能哦！

1.2--换行

当一行长度达到了单行最大字符数限制时，就需要手动将一行拆成两行。通常我们会在运算符后换行，下一行会增加两个层级的缩进。比如这样。

在这个例子中，逗号时一个运算符，应当作为前一行的行尾。这个换行位置非常重要，因为ASI机制会在某些场景下在行结束的位置插入分号。总是将一个运算符置为行尾，ASI就不会自作主张地插入分号，也就避免了错误的发生。

1.3--命名

我们只要是代码，都会涉及变量和函数，因此变量和函数命名对于增强代码可读性至关重要。那么在js中，ECMAScript推荐我们遵循**驼峰式大小写(Camel Case)**的命名方式.这种命名方式是小写字母开始的，后续每个单词首字母都大写，比如：

var thisMyName;
var anotherVariable;
var aVeryLongVariableName;
复制代码

函数的命名

我们推荐函数函数前用动词开头

//好的写法
var count = 10;
var myName = "Dreams"
var found = true
//不好的写法:变量看起来像函数
var getCount = 10;
var isFound = true;
//好的写法
function getName() {
    return myName;
}
//不好的写法:函数看起来像变量
function theName() {
    return myName;
}
复制代码

命名是一种学问，更是一门技术！，通常我们应尽量保持尽可能的简短，抓重点的命名方式。通过函数命就大概可以看出这个是干什么的函数。 记住写代码永远不是在给自己写，而是在给你下一个接手的人写，所以代码写的规范对大家都有好处 我们推荐的函数有：can has is get set 例如：canDo hasClass isBlack getData setData

1.4--null

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

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

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

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

示例代码：

//好的用法
var person = null;
function getPerson() {
    if (condition) {
        return new Person("Dreams");
    } else {
        return null;
    }
}
var person = getPerson();
if (person !== null) {
    doSomething();
}

//不好的写法：用来和未初始化的变量比较
var person;
if (person != null) {
   doSomething() 
}
//不好的写法:用来和未初始化的变量比较
var person;
if (person != null) {
    doSomething();
}
//不好的写法：检测是否传入了参数
function doSomething(arg1,arg2,arg3,arg4) {
    if (arg4 != null) {
        doSomethingElse();
    }
}
复制代码

1.5--undefined

undefined是一个特殊值，我们常常把它和null搞混。其中一个让人颇感困惑的就是null == undefined结果是true。然而，这两个值的用途却各不相同。那些没有被初始化的变量都有一个初始值，即undefined,表示这个变量等待被赋值。比如：

//不好的写法
var person;
console.log(person === undefined);//true
复制代码

尽管这段代码能正常工作，但代码中我们应尽量避免使用undefined。这个值常常和返回"undefined"的typeof运算符混淆。事实上，typeof的行为也很让人费解，因为不管值是undefined的变量还是未声明的变量，typeof运算结果都是"undefined"，比如：

//foo未被声明
var person;
console.log(typeof person);//"undefined"
console.log(typeof foo)//"undefined"
复制代码

在这段代码中，person和foo都会导致tpyeof返回"undefined" 当变量未声明时，如果你使用了一个可能(或可能不会)赋值为一个对象的变量时，则将其赋值为null

//好的做法
var person = null;
console.log(person === null);//true
复制代码

将变量初始值赋值为null表明了这个变量的意图，他最终很可能赋值为对象。typeof运算符运算null的类型时返回"object"，这样就可以和undefined区分开了

1.6--对象字面量

声明数组和对象时推荐下面的做法

//好的写法
var book = {}
var numbers = [1,2,3,4]
//不好的写法
var book = new Object();
var numbers = new Array(1,2,3,4)
复制代码

结语

本文内容参考至 <<编写可维护的javascript>>

在日常工作中我们应当合理使用上述方法对变量/方法/对象/数组进行管理，而不是胡乱的起名和管理，这样会对我们项目后续的维护不利，如果大家还有什么好的习惯，可以在评论区提出哦。