这是我参与8月更文挑战的第11天,活动详情查看:8月更文挑战
编写干净的代码是每个开发人员都需要做的事情,本篇文章我们将介绍命名、使用变量和函数等的干净编码原则,以及一些特定于JavaScript 的干净编码最佳实践。
干净的编码是什么意思?
干净的编码意味着首先你是为以后的自己和你的同事而不是机器编写代码,你的代码必须易于人类理解。
JS干净编码最佳实践
关于变量
- 使用能见名知其意的名称,避免单字母命名。如果你遵循这种做法,你的名字在搜索的时候就会变得很方便。
如以下示例,如果你把你的变量名命名为,d、i这种,当你想搜索的时候.....😑
关于函数
使用Object.assign
设置对象默认值
//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'
})
查询或修改
函数应该做某事(修改)或回答某事(查询),但不能两者兼而有之。
函数尽量简单化
一个函数应该只做一件事,不要在一个函数中执行多个操作。
不推荐的写法
推荐的写法
模块化
你可以将多个函数在一个文件中声明,然后导出它们使用
示例
//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))
函数的命名应当具有描述性
函数名应该是动词或动词短语,它需要传达其意图,以及参数的顺序和意图。
不要污染全局变量
如果需要扩展现有对象,建议使用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
判断属性是否存在的推荐用法
不推荐写法
推荐写法
// Good
const object = {
name: 'Axjy'
};
if ('name' in object) {
// ...
}
关于判断的一些推荐用法
推荐使用Array.includes
判断参数是否存在于数组中
推荐使用Array.every
如以下示例
- 想判断所有人都是好心情
不推荐写法
推荐写法
//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
如果有收获的话就随手留个赞吧!😘