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

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

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

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

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

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

Fail：

 
 
 
      
  
  
  1. if (val == 2) 
    2.

Pass：

 
 
 
      
  
  
  1. if (val === 2) 
    2.

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

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

Fail：

 
 
 
      
  
  
  1. var myVar = 10; 
    2.

Pass：

 
 
 
      
  
  
  1. let myVar = 10; 
    2.

3. 使用 const 代替 let

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

Fail：

 
 
 
      
  
  
  1. let VAT_PERCENT = 20; 
    2.

Pass：

 
 
 
      
  
  
  1. const VAT_PERCENT = 20; 
    2.

4. 始终使用分号(;)

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

Fail：

 
 
 
      
  
  
  1. const VAT_PERCENT = 20; 
    2.   
  
  
  2. let amount = 10 
    3.   
  
  
  3. return addVat(amount, vatPercent) 
    4.

Pass：

 
 
 
      
  
  
  1. const vatPercent = 20; 
    2.   
  
  
  2. let amount = 10; 
    3.   
  
  
  3. return addVat(amount, vatPercent); 
    4.

5. JavaScript中的命名约定

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

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

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

Fail：

 
 
 
      
  
  
  1. let fullName = firstName + " " + lastName; 
    2.

Pass：

 
 
 
      
  
  
  1. let fullName = `${firstName} ${lastName}`; 
    2.

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

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

Fail：

 
 
 
      
  
  
  1. var multiply = function(a, b) { 
    2.   
  
  
  2.   return a* b; 
    3.   
  
  
  3. }; 
    4.

Pass：

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

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

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

Fail：

 
 
 
      
  
  
  1. if (valid) 
    2.   
  
  
  2.    doSomething(); 
    3.   
  
  
  3. if (amount > 100)  
    4.   
  
  
  4.     doSomething(); 
    5.   
  
  
  5. else if(amount > 200) 
    6.   
  
  
  6.     doSomethingElse(); 
    7.

Pass：

 
 
 
      
  
  
  1. if (valid) { 
    2.   
  
  
  2.    doSomething(); 
    3.   
  
  
  3. } 
    4.   
  
  
  4. if (amount > 100) { 
    5.   
  
  
  5.    doSomething(); 
    6.   
  
  
  6. }  
    7.   
  
  
  7. else if(amount > 200) { 
    8.   
  
  
  8.     doSomethingElse(); 
    9.   
  
  
  9. } 
    10.

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

Fail：

 
 
 
      
  
  
  1. if (myNumber === 0) 
    2.   
  
  
  2. { 
    3.   
  
  
  3.     doSomething(); 
    4.   
  
  
  4. } 
    5.

Pass：

 
 
 
      
  
  
  1. if (myNumber === 0) { 
    2.   
  
  
  2.     doSomething(); 
    3.   
  
  
  3. } 
    4.

10. 尝试减少嵌套

if 中嵌套if 会变得混乱并且很难阅读。有时你可能无法解决问题，但是可以好好查看代码，看看是否可以改进。

Fail：

 
 
 
      
  
  
  1. if (myNumber > 0) { 
    2.   
  
  
  2.   if (myNumber > 100) { 
    3.   
  
  
  3.        if (!hasDiscountAlready) { 
    4.   
  
  
  4.            return addDiscountPercent(0); 
    5.   
  
  
  5.        } else { 
    6.   
  
  
  6.            return addDiscountPercent(10); 
    7.   
  
  
  7.        } 
    8.   
  
  
  8.   } else if (myNumber > 50) { 
    9.   
  
  
  9.     if (hasDiscountAlready) { 
    10.   
  
  
  10.        return addDiscountPercent(5); 
    11.   
  
  
  11.     } 
    12.   
  
  
  12.   } else { 
    13.   
  
  
  13.     if (!hasDiscountAlready) { 
    14.   
  
  
  14.       return addDiscountPercent(0); 
    15.   
  
  
  15.     } else { 
    16.   
  
  
  16.       return addDiscountPercent(1); 
    17.   
  
  
  17.     } 
    18.   
  
  
  18.   } 
    19.   
  
  
  19. } else { 
    20.   
  
  
  20.      error(); 
    21.   
  
  
  21. } 
    22.

Pass：

 
 
 
      
  
  
  1. if (myNumber <= 0) { 
    2.   
  
  
  2.    return error; 
    3.   
  
  
  3. } 
    4.   
  
  
  4. if (!hasDiscountAlready) { 
    5.   
  
  
  5.     return addDiscountPercent(0); 
    6.   
  
  
  6. } 
    7.   
  
  
  7. if (myNumber > 100) {  
    8.   
  
  
  8.     return addDiscountPercent(10); 
    9.   
  
  
  9. } 
    10.   
  
  
  10. if (myNumber > 50) {  
    11.   
  
  
  11.     return addDiscountPercent(5); 
    12.   
  
  
  12. } 
    13.   
  
  
  13. return addDiscountPercent(1); 
    14.

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

11. 尽可能使用默认参数

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

Fail：

 
 
 
      
  
  
  1. myFunction(a, b) { 
    2.   
  
  
  2.   return a + b; 
    3.   
  
  
  3. } 
    4.

Pass：

 
 
 
      
  
  
  1. myFunction(a = 0, b = 0) {  
    2.   
  
  
  2.    return a + b; 
    3.   
  
  
  3. } 
    4.

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

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

Fail：

 
 
 
      
  
  
  1. switch (myNumber) 
    2.   
  
  
  2. { 
    3.   
  
  
  3.   case 10:  
    4.   
  
  
  4.    addDiscountPercent(0); 
    5.   
  
  
  5.   case 20:  
    6.   
  
  
  6.    addDiscountPercent(2); 
    7.   
  
  
  7.   case 30: 
    8.   
  
  
  8.    addDiscountPercent(3); 
    9.   
  
  
  9. } 
    10.

Pass：

 
 
 
      
  
  
  1. switch (myNumber) 
    2.   
  
  
  2. { 
    3.   
  
  
  3.   case 10:  
    4.   
  
  
  4.     addDiscountPercent(0); 
    5.   
  
  
  5.     break; 
    6.   
  
  
  6.   case 20:  
    7.   
  
  
  7.     addDiscountPercent(2); 
    8.   
  
  
  8.     break; 
    9.   
  
  
  9.   case 30: 
    10.   
  
  
  10.     addDiscountPercent(3); 
    11.   
  
  
  11.     break; 
    12.   
  
  
  12.   default:  
    13.   
  
  
  13.     addDiscountPercent(0); 
    14.   
  
  
  14.     break; 
    15.   
  
  
  15. } 
    16.

13. 不要使用通配符导入

Fail：

 
 
 
      
  
  
  1. import * as Foo from './Foo'; 
    2.

Pass：

 
 
 
      
  
  
  1. import Foo from './Foo'; 
    2.

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

Fail：

 
 
 
      
  
  
  1. if (isValid === true) 
    2.   
  
  
  2. if (isValid === false) 
    3.

Pass：

 
 
 
      
  
  
  1. if (isValid) 
    2.   
  
  
  2. if (!isValid) 
    3.

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

Fail：

 
 
 
      
  
  
  1. const boo = a ? a : b; 
    2.

Pass：

 
 
 
      
  
  
  1. const boo = a || b; 
    2.

总结

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

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

新闻标题：15个简单的JS编码标准让你的代码更整洁
新闻来源：http://www.hantingmc.com/qtweb/news47/325847.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

静态网站知识

同城分类信息

成都小程序开发　　 　泸州做网站　　 　软文营销　　 　成都网创优客　　 　网创优客　　 　成都虚拟主机　　 　温江网站制作　　 　成都网站设计　　 　免备案空间　　 　重庆花箱　　 　网站建设公司　　 　江安网站建设　　 　温江网站建设　　 　移动手机网站制作　　 　成都做网站　　 　升施印刷　　 　网站建设　　 　做移动网站　　 　成都橡塑保温管　　 　王君美油画