javascript代码风格指北

前言

在咱们平时工做中写代码是最频繁的事情了，但咱们的代码真的"好看"吗？

预计本文阅读时间(10分钟)

正文

1.1--语句结尾

咱们来看一段代码

//合法的代码
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>>

在平常工做中咱们应当合理使用上述方法对变量/方法/对象/数组进行管理，而不是胡乱的起名和管理，这样会对咱们项目后续的维护不利，若是你们还有什么好的习惯，能够在评论区提出哦。