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 offsetX与layerX区别
Mar 12 Javascript
增强用户体验友好性之jquery easyui window 窗口关闭时的提示
Jun 22 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
Angular4 中内置指令的基本用法
Jul 31 Javascript
VUE2.0中Jsonp的使用方法
May 22 Javascript
JavaScript 正则命名分组【推荐】
Jun 07 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
ElementUI之Message功能拓展详解
Oct 18 Javascript
Threejs实现滴滴官网首页地球动画功能
Jul 13 Javascript
cypress测试本地web应用
Jun 01 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 显示指定路径下的图片
2009/10/29 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
基于JavaScript实现继承机制之构造函数方法对象冒充的使用详解
2013/05/07 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
解决bootstrap中modal遇到Esc键无法关闭页面
2015/03/09 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
2015/08/18 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
JS图片定时翻滚效果实现方法
2016/06/21 Javascript
JavaScript 函数模式详解及示例
2016/09/07 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
实例讲解JavaScript预编译流程
2019/01/24 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
python调试神器PySnooper的使用
2019/07/03 Python
基于python的Paxos算法实现
2019/07/03 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
html5教程画矩形代码分享
2013/12/04 HTML / CSS
《毛主席在花山》教学反思
2014/04/20 职场文书
局火灾防控工作方案
2014/05/25 职场文书
校车安全责任书
2014/08/25 职场文书
民主评议党员工作总结
2014/10/20 职场文书
皇城相府导游词
2015/02/06 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫