编写规范的javascript

js代码，前端都会写。但细节决定成败，代码是否优雅、规范，可以看得出一个JScoder的水平来。

曾经多次被项目组长吐槽，并被授予一本秘笈，上面有关于JS编程规范的一些总结。

无奈秘笈不能长借，无奈只能用最愚蠢的办法，拍照mark下，然后今天抽空整理整理。

废话到此为止，下面言归正传。

 

1.语句结尾总是加上分号

JS的语句，要么独占一行，要么以分号结尾。

虽然绝大多数情况下独占一行的js代码缺省分号也不会产生错误（这全赖于分析器的自动分号插入机制），但依旧不推荐缺省分号。

因为自动分号插入机制的分号插入规则很复杂且难以记住，习惯性以分号结束语句，能减少意外bug的发生率。

 

2.关于命名

命名，是任何一个coder最为苦恼的问题之一...

命名不仅是一门科学，更是一门技术。但通常来讲，命名长度应该尽可能短，并抓住要点。

变量和函数的命名应当总是遵循驼峰大小写命名法。

 

变量命名

尽量在变量名中体现出值的数据类型。比如：count，length，size是数字；name，title，message是字符串；单个字符i，j，k通常在循环中使用。

避免使用没有意义的命名，要尽可能做到让其他开发者一看到变量的命名，就能理解变量的作用。

 

函数命名

对于函数和方法的命名，第一个单词应该是动词，下面是一些使用动词常见的约定：

can — 返回一个布尔值

has — 返回一个布尔值

is — 返回一个布尔值

get — 返回一个非布尔值

set — 用来保存一个值

尽管这些约定没有被归入当下流行的编程风格中，但在很多流行的库中，我们也能看到它们的影子。

 

常量命名

JS其实并没有真正的常量概念。但为了区分普通的变量（变量的值是可变的）和常量（常量的值初始化之后就不能变了），一种通用的命名约定应运而生。

这个约定源于C语言，使用大写字母和下划线来命名，下划线用以分隔单词。如：MAX_COUNT,URL。

 

构造函数命名

构造函数通常用名词来命名，因为它们是用来创建某个类型的实例的。

为了从变量和普通函数中区分出来，用大驼峰命名法。如：

function Person(name){ this.name = name; }; var me = new Person("Jack");

 

3.关于直接量

JS中包含一些类型的原始值：字符串、数字、布尔值、null、undefined。同样也包含对象直接量和数组直接量。

这其中，只有布尔值是自解释的。其他类型或多或少都要思考一下它们如何更精确的表示出来。

 

字符串

在JS中，字符串是独一无二的。字符串可以用单引号或双引号括起来。

在功能上，两种做法并无不同。除了内部出现字符串界定符时需要转义之外，两种做法在功效上完全一致。

因此，下面代码中，使用双引号括起来的字符需要对双引号进行转义，而使用单引号括起来的字符串则不必如此。

// 使用双引号括起来，里面的双引号需要转义
var msg = "Jack says, \"Hi.\""; // 使用单引号括起来，里面的双引号需要转义
var msg = 'Jack says, "Hi."';

你只需要关心你的代码是否从头到尾保持同一风格。

关于字符串还有一个问题需要注意，就是创建多行字符串。通常用字符串连接符（+）将字符串分成多份。如：

var longStr = "This is a very long String, so we " +
　　"write it like this.";

 

数字

JS中数字类型只有一种，不管整数还是浮点数，统一存储为数字数据类型。

// 整数
var count = 10; // 浮点数
var price = 10.0; var price = 10.30; // 不推荐的浮点数写法 （没小数部分）
var price = 10.; // 不推荐的浮点数写法 （没整数部分）
var price = .1; // 八进制写法不推荐使用
var num = 010;  //这里不是表示10，而是表示八进制中的8，0开头表示这个数为8进制数

// 十六进制写法
var num = 0xA2; //这里的0x开头表示此数是十六进制数，数值为A2（JS的十六进制数怎么表示小数，我搜过下，但没找到答案，知道的请告知下）

// 科学计数法
var num = 2.01e2; //这里表示2.01乘以10的2次方

 

null

null是一个特殊值，但我们常常误解它，将它和 undefined 搞混。

在下面的场景中，应当使用null：

用来初始化一个变量，这个变量可以赋值为一个对象

用来和一个已经初始化的变量比较，这个变量可以是一个对象，也可以不是

当函数的参数期望是对象时，用作参数传入

当函数的返回值期望是对象时，用作返回值传出

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

不要使用null来检测是否传入了某个参数

不要使用null来检测一个未初始化的变量

下面是一些示例代码：

// 好的用法
var person = null; // 好的用法
function getPerson(){ 　　if(condition){ 　　　　return new Person("Jack"); 　　}else{ 　　　　return null; 　　} } // 好的用法
var person = getPerson(); if(person !== null){ 　　doSomething(); } // 不好的用法：用来和未初始化的变量比较
var person; if(person !== null){ 　　doSomething(); } // 不好的用法：检测是否传入了参数
function doSomething(arg1, arg2, arg3, arg4){ 　　if(arg4 != null){ 　　　　doSomethingElse(); 　　} }

理解null最好的方式是把它当成对象的占位符。

 

undefined

undefined也是一个特殊值，我们常常将它和null搞混。其中一个最让人疑惑之处在于 null == undefined 结果是 true。

然而，这两个值的用途却各不相同。

那些没有被初始化的变量，都有一个初始值，即undefined，表示这个变量等待被赋值。如：

var person; console.log(person === undefined);  //结果为true

说到undefined，不得不顺带提一提typeof。对于typeof，不管是已经声明，但未初始化的变量，还是未声明的变量，其运算结果都是“undefined”。

尽管两者在其他场景中的行为有天壤之别（在语句中使用已声明但未初始化的变量不会报错，而使用未声明的变量会报错）。

// foo 未被声明
var person; console.log(typeof person); //结果为undefined
console.log(typeof foo); //结果为undefined

上文提到的两种不应当用null的场景，用undefined就恰到好处：

// 和未初始化的变量比较
var person; if(person !== undefined){ 　　doSomething(); } // 检测是否传入了参数
function doSomething(arg1, arg2, arg3, arg4){ 　　if(typeof arg4 !== "undefined"){ 　　　　doSomethingElse(); 　　} }

 

对象直接量

使用对象直接量创建一个对象，将对象的所有属性直接写在一对花括号中。这样的方式高效而且简单。

// 不好的写法，先显式创建一个Object实例，然后添加属性，看起来很繁琐
var book = new Object(); book.title = "Javascript"; book.anthor = "Jack"; // 好的写法
var book = { 　　title: "Javascript", 　　anthor: "Jack" };

 

数组直接量

和对象直接量类似，直接用一对方括号将数组初始元素括起来的方式创建一个数组，简单，直接。

// 不好的写法，显式的用Array构造函数来创建数组
var colors = new Array("red", "green", "blue"); // 好的写法
var colors = ["red", "green", "blue"];