我猜屏幕前的你应该是 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){
// 代码
}Copy
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 ++;Copy
而应该将多个语句写到多行上，并始终给行尾加上分号。
// 正确
a = b;
count++;Copy
规则 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”。因此如果您不同意其中的一些观点，我想这也没啥关系。毕竟样式问题本就千人前面。不过这里的规则对您来说可能会是个好引子。
表情