JavaScript干净编码的最佳实践

Axjy
698 阅读4分钟

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

编写干净的代码是每个开发人员都需要做的事情，本篇文章我们将介绍命名、使用变量和函数等的干净编码原则，以及一些特定于JavaScript 的干净编码最佳实践。

干净的编码是什么意思？

干净的编码意味着首先你是为以后的自己和你的同事而不是机器编写代码，你的代码必须易于人类理解。

image-20210811211438593

JS干净编码最佳实践

关于变量

  • 使用能见名知其意的名称，避免单字母命名。如果你遵循这种做法，你的名字在搜索的时候就会变得很方便。

如以下示例，如果你把你的变量名命名为，d、i这种，当你想搜索的时候.....😑

image-20210811212241466

关于函数

使用Object.assign设置对象默认值

image-20210811215212346

//Good
function setStyle(config){
    config = Object.assign(
        {
          color:"black",bg:"#333333"
        },
        config
    );
   //do something
}

避免长参数列表

改为使用【单个对象参数】或【解构赋值】。它还使处理可选参数变得更加容易。

// DON'T
function getRegisteredUsers (fields, include, fromDate, toDate) { /* implementation */ }
getRegisteredUsers(['firstName', 'lastName', 'email'], ['invitedUsers'], '2016-09-26', '2016-12-13')

// DO
function getRegisteredUsers ({ fields, include, fromDate, toDate }) { /* implementation */ }
getRegisteredUsers({
  fields: ['firstName', 'lastName', 'email'],
  include: ['invitedUsers'],
  fromDate: '2016-09-26',
  toDate: '2016-12-13'
})

查询或修改

函数应该做某事（修改）或回答某事（查询），但不能两者兼而有之。

函数尽量简单化

一个函数应该只做一件事，不要在一个函数中执行多个操作。

不推荐的写法

image-20210811212803130

推荐的写法

image-20210811212836577

模块化

你可以将多个函数在一个文件中声明，然后导出它们使用

示例

//js文件
function add(a, b) {
    return a + b   
}

function subtract(a, b) {
    return a - b   
}

module.exports = {
    add,
    subtract
}

//引入调用
const { add, subtract } = require('./calculations')
console.log(subtract(5, add(3, 2))

函数的命名应当具有描述性

函数名应该是动词或动词短语，它需要传达其意图，以及参数的顺序和意图。

image-20210811212950473

不要污染全局变量

如果需要扩展现有对象，建议使用ES6的类和继承，而不是在原生对象的原型链上创建函数

关于命名约定

  • let推荐使用【驼峰命名】
  • const在文件顶部推荐使用大写的【蛇形命名法】，不在顶部，推荐使用【驼峰命名】
  • class推荐使用【帕斯卡命名法】
  • function函数推荐使用【驼峰命名法】
  • Boolean推荐名字前加上一个is，如const isTeacher = true // OR false

驼峰法

【骆驼式命名法】就是当变量名或函式名是由一个或多个单词连结在一起，而构成的唯一识别字时，

第一个单词以小写字母开始；第二个单词的首字母大写或每一个单词的首字母都采用大写字母，

例如：firstName、lastName

蛇形命名法

【蛇形命名法】是全由小写字母和下划线组成，在两个单词之间用下滑线连接即可，

例如：first_name、last_name

上面推荐大写的则应该是这样

FIRST_NAME   LAST_NAME

帕斯卡(pascal)命名法

与骆驼命名法类似只不过骆驼命名法是首字母小写，而帕斯卡命名法是首字母大写; 【pascal命名规则：大驼峰式命名规则】

例如：MyClass

判断属性是否存在的推荐用法

不推荐写法

image-20210811224240243

推荐写法

// Good
const object = {
  name: 'Axjy'
};
if ('name' in object) {
  // ...
}

关于判断的一些推荐用法

推荐使用Array.includes

判断参数是否存在于数组中

image-20210811225130648

推荐使用Array.every

如以下示例

  • 想判断所有人都是好心情

不推荐写法

image-20210811230207089

推荐写法

//Good
function demo2() {
  const isAllGood = peoples.every(item => item.mood == 'good');
  console.log(isAllGood);
}

推荐使用Array.some

如以下示例

  • 想判断是否存在坏心情

推荐写法

//Good
function demo() {
  const isAnyBad = peoples.some(item => item.mood == 'bad');
  console.log(isAnyBad);
}

使用prettier

在团队中工作需要清晰的样式指南和格式。ESLint提供了一个巨大的规则集，你可以根据自己的需求进行自定义。还有 eslint--fix，它可以纠正一些错误，但不是全部。

相反，建议使用Prettier格式化代码。这样，开发人员不必担心代码格式化，而只需编写高质量的代码。

结语

以上只是提供一些启发和思考，并不是任何标准，也不代表一定需要这样做。

参考

JavaScript Clean Coding Best Practices

12 tips for writing clean and scalable JavaScript

如果有收获的话就随手留个赞吧！😘

avatar
文章
阅读
粉丝