15个简单的JS编码标准让你的代码更整洁(小结)


Posted in Javascript onJuly 16, 2020

作者 | Daniel Anderson
本文最初发布于 Medium 网站,经原作者授权后翻译和分享。

编码标准可以帮助以下方面:

  • 保持代码一致
  • 易于阅读和理解
  • 易于维护

下面的编码标准是我对上述几点有帮助的看法。

1. 比较时使用 === 代替 ==

这很重要,因为JavaScript是一种动态语言,因此使用==可能会给您带来意想不到的结果,因为它允许类型不同。
Fail:

if (val == 2)

Pass:

if (val === 2)

2. 永远不要使用 var,使用 let 来代替

使用 let 将有助于避免 JavaScript 中各种 var 引起的作用域问题。
Fail:

var myVar = 10;

Pass:

let myVar = 10;

3. 使用 const 代替 let

这阻止了开发人员尝试更改不应该做的事情,并且确实有助于提高可读性。
Fail:

let VAT_PERCENT = 20;

Pass:

const VAT_PERCENT = 20;

4. 始终使用分号(;)

尽管这在 JavaScript 中是可选的,并不像其它语言一样需要分号作为语句终止符。但是使用 ; 有助于使代码保持一致。

Fail:

const VAT_PERCENT = 20;
let amount = 10
return addVat(amount, vatPercent)

Pass:

const vatPercent = 20;
let amount = 10;
return addVat(amount, vatPercent);

5. JavaScript中的命名约定

  • let 应该使用驼峰命名。
  • const 如果在文件的顶部使用大写的蛇形命名法。如果不在文件顶部,请使用驼峰命名。
  • class 应该是帕斯卡命名法:MyClass
  • functions 函数应该是驼峰命名法:myFunction

6. 拼接字符串时使用模板字符串

模板字符串中允许嵌入表达式。
Fail:

let fullName = firstName + " " + lastName;

Pass:

let fullName = `${firstName} ${lastName}`;

7. 尽可能使用ES6箭头函数

箭头函数是编写函数表达式的更简洁的语法。
Fail:

var multiply = function(a, b) {
 return a* b;
};

Pass:

const multiply = (a, b) => { return a * b};

8. 始终在控制结构周围使用大括号

所有控制结构都必须使用花括号(例如,if,else,for,do,while等),这样后期维护时,不容易出错。
Fail:

if (valid)
  doSomething();
if (amount > 100) 
  doSomething();
else if(amount > 200)
  doSomethingElse();

Pass:

if (valid) {
  doSomething();
}
if (amount > 100) {
  doSomething();
} 
else if(amount > 200) {
  doSomethingElse();
}

9. 确保大括号从同一行开始,中间有空格

Fail:

if (myNumber === 0)
{
  doSomething();
}

Pass:

if (myNumber === 0) {
  doSomething();
}

10. 尝试减少嵌套

if 内的 if 会变得混乱并且很难阅读。有时你可能无法解决问题,但是可以好好卡看看代码结构,看看是否可以改进。
Fail:

if (myNumber > 0) {
  if (myNumber > 100) {
       if (!hasDiscountAlready) {
           return addDiscountPercent(0);
       } else {
           return addDiscountPercent(10);
       }
  } else if (myNumber > 50) {
    if (hasDiscountAlready) {
       return addDiscountPercent(5);
    }
  } else {
    if (!hasDiscountAlready) {
      return addDiscountPercent(0);
    } else {
      return addDiscountPercent(1);
    }
  }
} else {
     error();
}

Pass:

if (myNumber <= 0) {
   return error;
}
if (!hasDiscountAlready) {
    return addDiscountPercent(0);
}
if (myNumber > 100) { 
    return addDiscountPercent(10);
}
if (myNumber > 50) { 
    return addDiscountPercent(5);
}
return addDiscountPercent(1);

通过上面的示例可以看出,减少嵌套之后,会变得容易阅读。

11. 尽可能使用默认参数

在 JavaScript 中,如果你在调用函数时没有传递参数,则它的值就是 undefined
Fail:

myFunction(a, b) {
 return a + b;
}

Pass:

myFunction(a = 0, b = 0) { 
 return a + b;
}

12. `Switch` 语句应使用 `break` 并具有 `default`

我通常会尝试不使用 switch 语句,但是你确实想使用它,请确保每个条件都 break ,并写了 defalut。

Fail:

switch (myNumber)
{
 case 10: 
 addDiscountPercent(0);
 case 20: 
 addDiscountPercent(2);
 case 30:
 addDiscountPercent(3);
}

Pass:

switch (myNumber)
{
  case 10: 
    addDiscountPercent(0);
    break;
  case 20: 
    addDiscountPercent(2);
    break;
  case 30:
    addDiscountPercent(3);
    break;
  default: 
    addDiscountPercent(0);
    break;
}

13. 不要使用通配符导入

Fail:

import * as Foo from './Foo';

Pass:

import Foo from './Foo';

14. 使用布尔值的快捷方式
Fail:

if (isValid === true)
if (isValid === false)

Pass:

if (isValid)
if (!isValid)

15. 尝试避免不必要的三元语句

Fail:

const boo = a ? a : b;

Pass:

const boo = a || b;

总结

任何语言的编码标准都可以真正帮助提高应用程序的可读性和可维护性。如果你在团队中工作,那么一件很难的事情就是强制执行编码标准。这里有一些建议可以帮助你:

  • 代码审查,逐行Pass代码。
  • 整理或使用某种代码分析器
  • 创建新内容时,让你们的一位高级开发人员初始化,其他开发人员可以使用该代码作为指导。

原文链接: https://medium.com/javascript-in-plain-english/19-simple-javascript-coding-standards-to-keep-your-code-clean-7422d6f9bc0

 到此这篇关于15个简单的JS编码标准让你的代码更整洁(小结)的文章就介绍到这了,更多相关JS编码标准内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
Jun 29 Javascript
JS应用正则表达式转换大小写示例
Sep 18 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
Vue.js每天必学之Class与样式绑定
Sep 05 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
JS中精巧的自动柯里化实现方法
Dec 12 Javascript
JavaScript判断日期时间差的实例代码
Mar 01 Javascript
深入理解js A*寻路算法原理与具体实现过程
Dec 13 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
Nov 13 Javascript
通过实例解析vuejs如何实现调试代码
Jul 16 #Javascript
详解js中的几种常用设计模式
Jul 16 #Javascript
JS寄快递地址智能解析的实现代码
Jul 16 #Javascript
详解js中的原型,原型对象,原型链
Jul 16 #Javascript
详解Webpack4多页应用打包方案
Jul 16 #Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
Jul 15 #Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 #Javascript
You might like
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
返回页面顶部top按钮通过锚点实现(自写)
2013/08/30 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
JavaScript中setFullYear()方法的使用详解
2015/06/11 Javascript
javascript文件加载管理简单实现方法
2015/07/25 Javascript
体验jQuery和AngularJS的不同点及AngularJS的迷人之处
2016/02/02 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
jQuery 动画与停止动画效果实例详解
2020/05/19 jQuery
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
python的socket编程入门
2018/01/29 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
python递归下载文件夹下所有文件
2019/08/31 Python
python实现多进程通信实例分析
2019/09/01 Python
Python matplotlib绘制饼状图功能示例
2019/09/10 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
巴西化妆品商店:Lojas Rede
2019/07/26 全球购物
仓管员岗位职责范文
2013/11/08 职场文书
新学期教师寄语
2014/04/02 职场文书
内乡县衙导游词
2015/02/05 职场文书
单位提档介绍信
2015/10/22 职场文书
python实现A*寻路算法
2021/06/13 Python