本文主要介绍15个简单的JS编码标准,让你的代码更整洁(总结)。通过示例代码非常详细,对大家的学习或工作都有一定的参考价值。下面让我们跟随边肖一起学习。
作者|丹尼尔安德森
本文原载于Medium网站,经原作者授权翻译分享。
编码标准可以帮助以下方面:
保持代码的一致性
易于阅读和理解
易于维护
以下编码标准是我对以上几点的有益看法。
1. 比较时使用 === 代替 ==
这很重要,因为JavaScript是一种动态语言,所以使用==可能会给你带来意想不到的结果,因为它允许不同的类型。
失败:
if (val==2)
通过:
if (val===2)
2.千万不要用var,用let代替
使用let将有助于避免JavaScript中各种变量引起的范围问题。
失败:
var myVar=10
通过:
设myVar=10
3. 使用 const 代替 let
这可以防止开发人员试图更改不应该做的事情,这确实有助于提高可读性。
失败:
设VAT _ PERCENT=20
通过:
const VAT _ PERCENT=20
4.始终使用分号(;)
尽管这在JavaScript中是可选的,但它不像在其他语言中那样需要分号作为语句结束符。而是使用;帮助保持代码的一致性。
失败:
const VAT _ PERCENT=20
假设金额=10
返回增值税(金额,增值税百分比)
通过:
const vatPercent=20
设金额=10;
return addVat(金额,vat percent);
5. JavaScript中的命名约定
Let应该以驼峰命名。
Const,如果在文件顶部使用大写的snake命名。如果它不在文件的顶部,请使用驼峰名称。
类应该是Pascal命名法:MyClass
函数函数应该是驼峰命名法:myFunction。
6. 拼接字符串时使用模板字符串
模板中允许嵌入表达式。
失败:
let full name=first name ' ' last name;
通过:
let full name=` $ { first name } $ { last name } `;
7. 尽可能使用ES6箭头函数
箭头是编写函数表达式的更简洁的语法。
失败:
var multiply=function(a,b) {
返回a * b;
};
通过:
const multiply=(a,b)={ return a* b };
8. 始终在控制结构周围使用大括号
所有的控制结构都必须使用花括号(例如if、else、for、do、while等。),这样后期维护就不容易出错。
失败:
如果(有效)
do something();
如果(金额100)
do something();
else if(金额200)
doSomethingElse();
通过:
如果(有效){
do something();
}
如果(金额100) {
do something();
}
else if(金额200) {
doSomethingElse();
}
9. 确保大括号从同一行开始,中间有空格
失败:
if (myNumber===0)
{
do something();
}
通过:
if (myNumber===0) {
do something();
}
10. 尝试减少嵌套
if里面的if会变得混乱难读。有时候你可能解决不了问题,但是你可以好好看看代码结构,看看是否可以改进。
失败:
if(myNumber0){
if(myNumber100){
如果(!hasDiscountAlready){
returnaddDiscountPercent(0);
}否则{
returnaddDiscountPercent(10);
}
}elseif(myNumber50){
if(hasDiscountAlready){
returnaddDiscountPercent(5);
}
}否则{
如果(!hasDiscountAlready){
returnaddDiscountPercent(0);
}否则{
returnaddDiscountPercent(1);
}
}
}否则{
错误();
}
通过:
if(myNumber=0){
returnerror
}
如果(!hasDiscountAlready){
returnaddDiscountPercent(0);
}
if(myNumber100){
returnaddDiscountPercent(10);
}
if(myNumber50){
returnaddDiscountPercent(5);
}
returnaddDiscountPercent(1);
从上面的例子可以看出,嵌套减少后会变得更容易阅读。
11. 尽可能使用默认参数
在JavaScript中,如果调用函数时没有传递参数,那么它的值是未定义的。
失败:
我的函数(a,b) {
返回a b;
}
通过:
myFunction(a=0,b=0) {
返回a b;
}
12.“switch”语句应该使用break并具有default。
我通常尽量不使用switch语句,但是您确实想使用它。请确保每个条件都被破坏,并已写入defalut。
失败:
开关(我的号码)
{
案例10:
add discount percent(0);
案例20:
add discount percent(2);
案例30:
add discount percent(3);
}
通过:
开关(我的号码)
{
案例10:
add discount percent(0);
打破;
案例20:
add discount percent(2);
打破;
案例30:
add discount percent(3);
打破;
默认值:
add discount percent(0);
打破;
}
13. 不要使用通配符导入
失败:
从'导入*作为Foo。/Foo ';
通过:
从'导入Foo。/Foo ';
14. 使用布尔值的快捷方式
失败:
if (isValid===true)
if (isValid===false)
通过:
if (isValid)
如果(!isValid)
15. 尝试避免不必要的三元语句
失败:
const boo=a?甲:乙;
通过:
const boo=a | | b;
总结
任何语言的编码标准都能真正帮助提高应用程序的可读性和可维护性。如果你在团队中工作,执行编码标准是非常困难的。以下是一些帮助你的建议:
代码审查,逐行传递代码。
或者使用某种代码分析器。
当创建新内容时,请你的一位高级开发人员对其进行初始化,其他开发人员可以使用这些代码作为指导。
原文链接:3359 medium . com/JavaScript-in-plain-English/19-simple-JavaScript-coding-standards-to-keep-your-code-clean-7422 D6 F9 BC 0
这就是这篇关于15个简单的JS编码标准让你的代码更干净的文章(总结)。有关JS编码标准的更多信息,请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们!
郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。