JavaScript

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

特别声明:如果您喜欢小站的内容,可以点击 终身VIP¥188.00元 包年VIP¥88.00元 包季VIP¥28.00 包月VIP¥10.00元 进行全站阅读。 如果您对付费阅读有任何建议或想法,欢迎发送邮件至: 864479410@qq.com,或添加QQ:864479410(^_^)

我猜屏幕前的你应该是 ReactVue 或者 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”。因此如果您不同意其中的一些观点,我想这也没啥关系。毕竟样式问题本就千人前面。不过这里的规则对您来说可能会是个好引子。

(3)

本文由 Web秀 作者:Javan 发表,转载请注明来源!

关键词:, , ,

热评文章

发表评论

邮箱地址不会被公开。 必填项已用*标注