衡量代码的清晰和可理解的最佳方法是什么？简单 - 计算“ WTF/MINUNE”。在阅读混乱，混乱的代码时，您不禁会想“这在做什么？”更经常。这些WTF时刻加起来很快，浪费时间和精力试图理解不良代码。
那么，是什么原因导致了那些WTF的头抓手呢？通常是忽略干净编码原理的代码：
-
命名较差的变量/函数
-
过度复杂的条件和循环
-
深嵌套和庞大的功能
-
没有解释意图的评论
-
格式不一致
这样的代码需要更长的时间才能理解。更新或修复错误是很痛苦的。您团队中的其他开发人员也会挣扎。
编写干净的代码最小化“ WTFS”并加快开发加速。您的未来自我会在重新访问旧代码时感谢您。修复错误并在干净的代码中添加功能要容易得多。
让我们开始写javascript，这会带来清晰，而不是混乱！越少的“每分钟WTFS”，越好！
可变命名101
可变命名是编程中最重要的技能之一。我们为变量选择的名称可以使我们的代码非常可读，可维护或极其混乱。以下是JavaScript中命名变量的一些最佳实践：
使用有意义且明显的名称
可变名称应清楚地传达其所包含的数据或使用什么目的。避免使用像x或缩写的名称这样的单字母变量，这些变量可能不清楚nmd。
坏：
const yyyymmdstr = moment().format('YYYY/MM/DD');
好：
const currentDate = moment().format('YYYY/MM/DD');
变量名称也应发音以帮助代码审查和讨论。例如，currDate比crDt更明显。
避免模棱两可的名称迫使读者在心理上映射数据代表的内容。
坏示例：
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(l => {
// do stuff
// do more stuff
// what was l again?
dispatch(l);
});
很好的例子：
const locations = ["Austin", "New York", "San Francisco"];
locations.forEach(location => {
// do stuff
// do more stuff
dispatch(location);
});
第二个示例在传达时更加清晰，我们正在通过一系列位置进行迭代。
使用诸如location之类的变量名称，而不是像l这样的简短名称来避免心理映射。您的同事会感谢您！
使用相同类型的相同词汇
尝试在代码库上使用一致的词汇来代表代表相似数据类型或概念的可变名称。例如，始终将用户对象称为user，而不是有时使用user，userInfo，client等。
坏：
getUserInfo();
getClientData();
getCustomerRecord();
好：
getUser();
这可以提高可读性，并避免在代码库的不同部分工作时混淆。
使用可搜索的名称
我们读取代码远远超过了编写代码。确保可以轻松搜索您的变量名称，以帮助以后了解代码。避免像data或object这样的通用名称，几乎没有透露其中的内容。
诸如buddy.js和ESLint之类的工具可以帮助识别未命名的常数。
坏：
// What is 86400000 milliseconds for?
setTimeout(blastOff, 86400000);
好：
// Declare as a capitalized named constant
const MILLISECONDS_PER_DAY = 60 * 60 * 24 * 1000;
setTimeout(blastOff, MILLISECONDS_PER_DAY);
使用解释变量
对于复杂的操作，请使用中间变量来帮助可读性。避免强迫读者在精神上绘制代码块正在做什么。
坏：
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^,([^, \]+) ([^, \]+)(?: ([^,\s]{5}))?$/;
saveCityZipCode(
address.match(cityZipCodeRegex)[1],
address.match(cityZipCodeRegex)[2]
);
好：
const address = 'One Infinite Loop, Cupertino 95014';
const cityZipCodeRegex = /^,([^, \]+) ([^, \]+)(?: ([^,\s]{5}))?$/;
const [, city, zipCode] = address.match(cityZipCodeRegex) || [];
saveCityZipCode(city, zipCode);
避免不需要的环境
不要在变量中重复类或对象名称。上下文通常从附近的代码中很明显。
坏：
const Car = {
carMake: 'Honda',
carModel: 'Accord',
carColor: 'Blue'
};
function paintCar(car, color) {
car.carColor = color;
}
好：
const Car = {
make: 'Honda',
model: 'Accord',
color: 'Blue'
};
function paintCar(car, color) {
car.color = color;
}
使用默认参数而不是条件参数
在ES6中，默认函数参数可以替换有条件的逻辑。请注意，这仅适用于undefined值 - 其他虚假值（例如''或0）将无法更换。
坏：
function createMicrobrewery(name) {
const breweryName = name || 'Hipster Brew Co.';
// ...
}
好：
function createMicrobrewery(name = 'Hipster Brew Co.') {
// ...
}
遵循这些可变命名最佳实践将使您的代码更清晰，更维护您自己和其他开发人员。照顾您选择的名字！
结局注：)
遵循这些通用准则将帮助您减少“ WTF”并提高代码的清晰度。
但是，我们还可以做更多的事情来升级我们的清洁编码技能。在本系列的下一部分中，我们将解决以下主题：
-
常见代码闻起来避免
-
重构技术
-
清洁体系结构模式
-
编写强大的测试
-
自动代码linting
请参阅编写干净的代码是一段旅程。但是，通过逐步采用当今所涵盖的原则，我们将自己置于掌握这一关键技能的道路上。
我们越重视可读，可维护的代码，我们为用户，队友和未来自我创造的体验越好。宣誓就可以用干净的代码开始！
快乐的编码â€