编写清晰易懂 Javascript 代码的15条规则

我猜屏幕前的你应该是 React、Vue或者 Node.js 的开发者吧。你可以编写业务代码并让他们无误的跑起来。不过你能编写出视觉美观并可被他人理解的代码么？

今天我们将了解一些使你的 JavaScript 代码干净整洁的小规则。

规则1：不要使用随机字符串作为变量名

不要用一些随机字符串来表示一个变量。

// 错误
const x = 4;

正确的命名变量，以便描述变量值。

// 正确
const numberOfChildren = 4;

规则2：使用小驼峰命名法

不要使用下划线命名法，大驼峰命名法，或者以动词开头的命名。

// 错误：以大写字母开头
var UserName = "Faisal"; 
-----
// 错误：以动词开头
var getUserName = "Faisal"; 
-----
// 错误：使用下划线
var user_name = "faisal";

应该使用代表名词的驼峰命名法。

// 正确
const userName = "Faisal";

规则3：使用正确的函数命名法

不要使用任何名词作为函数名称，避免与变量名称搞混。

// 错误：以大写字母开头
function DoSomething() {  
    // 代码
} 
----
// 错误：以名词开头
function car() {  
    // 代码
} 
----
// 错误：使用下划线
function do_something() {  
    // 代码
}

应使用动词开头并使用小驼峰命名法。

// 正确
function doSomething() {
    // 代码
}

规则4：使用大驼峰给构造函数命名

// 错误：使用小写字母开头
function myObject() {  
    // 代码
} 
----
// 错误：使用下划线
function My_Object() {  
    // 代码 
} 
----
// 错误：使用动词开头
function getMyObject() {  
    // 代码
}

同样的，构造函数应以非动词开头，因为 new 是创建对象实例的动作。

// 正确
function MyObject() {  
    // 代码
}

规则5：全局常量

全局常量值不应改变，也不应像普通变量一样命名。

// 错误
const numberOfChildren = 4;
// 错误
const number_of_children = 4;

他们应全部大写，并以下划线分割。

// 正确
const NUMBER_OF_CHILDREN = 4;

规则6：变量赋值

不要把没有括号的条件比较结果赋值给变量。

// 错误
const flag = i < count;

把表达式用括号括起来：

// 正确
const flag = (i < count);

规则7：相等操作符的使用

不要使用 “==” 或者 “!=” 来比较值。因为它们在比较前不会做类型检查。

// 错误
if (a == b){
    // 代码
}

Instead, always use “===” or “!==” to avoid type coercion errors.
反之，请始终使用 “===” 或 “!==”

// 正确
if (a === b){
    //代码
}

规则8：三元运算符的使用

不要使用三元运算符代替 if 语句：

// 错误
condition ? doSomething() : doSomethingElse();

仅用于根据某些条件给变量赋值：

// 正确
const value = condition ? value1 : value2;

规则9：使用简单语句

虽然 JavaScript 支持单行多语句，但尽量不要把多个语句写在同一行内。

// 错误
a =b; count ++;

而应该将多个语句写到多行上，并始终给行尾加上分号。

// 正确
a = b;
count++;

规则10：if 语句的使用

不要忽略 if 语句中的花括号，并永远不要将其放到一行上。

// 错误：间距不当
if(condition){  
    doSomething(); 
} 
----
// 错误：缺少花括号
if (condition)  
    doSomething(); 
----
// 错误：全放在一行
if (condition) { doSomething(); } 
----
// 错误：全放一行并且不加花括号
if (condition) doSomething();

始终记得使用花括号并保持适当间距：

// 正确
if (condition) {
    doSomething();
}

规则11：循环的使用

请不要再循环初始化中申明变量。

// 错误：在循环初始化期间声明变量
for (let i=0, len=10; i < len; i++) {  
    // 代码
}

应在循环之前对变量进行声明。

// 正确
let i = 0;
for (i=0, len=10; i < len; i++) {  
    // 代码 
}

规则12：一致的缩进长度

始终使用两个空格或四个空格。

// 正确
if (condition) {
    doSomething();
}

规则13：行的长度

每行不得超过 80 字符。如果该行确实很长，则应拆为新的一行。

// 错误：下一行代码仅缩进四个空格
doSomething(argument1, argument2, argument3, argument4,
    argument5);
// 错误：在分割符前中断行
doSomething(argument1, argument2, argument3, argument4
        ,argument5);

第二行应该缩进为 8 个空格，而不是 4 个，并且不应以分隔符开头。

// 正确
doSomething(argument1, argument2, argument3, argument4,
        argument5);

规则14：原始字符

字符串不应以单引号定义

// 错误
const description = 'this is a description';

应始终以双引号定义

// 正确
const description = "this is a description";

规则15：“undefined” 的用法

不要直接使用未定义变量的 undefined

// BAD
if (variable == "undefined") {  
    // 代码
}

如果想知道变量是否定义，请使用 typeof 操作符。

// 正确
if (typeof variable == "undefined") {  
    // 代码
}

遵循这些规则，可以时您的 JavaScript 项目更加整洁可读。

这些规则摘选自 “可维护 JavaScript” 一书，编写自 “Nicholas C. Zakas”。因此如果您不同意其中的一些观点，我想这也没啥关系。毕竟样式问题本就千人前面。不过这里的规则对您来说可能会是个好引子。

今天的内容到此结束。祝编码愉快！:D

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

---

原文地址：https://medium.com/javascript-in-plain-e...

译文地址：https://learnku.com/vuejs/t/52819