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 相关文章推荐
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
使用js获取地址栏中传递的值
Jul 02 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
Dec 24 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
jQuery实现的图文高亮滚动切换特效实例
Aug 10 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 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编程开发“虚拟域名”系统
2006/10/09 PHP
mac下使用brew配置环境的步骤分享
2011/05/23 PHP
学习php过程中的一些注意点的总结
2013/10/25 PHP
jQuery Ajax之load()方法
2009/10/12 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
jquery数组过滤筛选方法grep()简介
2014/06/06 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
vue项目每30秒刷新1次接口的实现方法
2018/12/04 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
nodejs脚本centos开机启动实操方法
2020/03/04 NodeJs
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
[02:32]DOTA2亚洲邀请赛 C9战队出场宣传片
2015/02/07 DOTA
python算法学习之桶排序算法实例(分块排序)
2013/12/18 Python
python发送邮件功能实现代码
2016/07/15 Python
python编写分类决策树的代码
2017/12/21 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
pycharm2020.1.2永久破解激活教程,实测有效
2020/10/29 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
英国演唱会订票网站:Ticket Selection
2018/03/27 全球购物
《两只鸟蛋》教学反思
2014/02/10 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
日元符号 ¥
2022/02/17 杂记
MongoDB使用场景总结
2022/02/24 MongoDB
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis