JavaScript代码整洁之道


JavaScript代码整洁之道

文章插图
 
概述我们之道作为一个码农,不论其实现如何,功能怎样,写的一手清晰靠谱的代码是其代码功力的体现 。好的、清洁的代码可以方便自己以后维护,让你的继任者马上能接手维护它,而不是给你檫屁股,被人戳脊梁骨、被骂垃圾代码 。所以,写清洁地代码非常重要 。
那么什么才是清洁代码的呢?不言而喻,清洁的代码就是可以让人易于人理解、易于更改、方便扩展的代码 。写清洁的代码要常扪心自问:
为什么要这样写?
为什么要在这儿写?
为什么不换个写法?
Robert C. Martin在《代码整洁之道》一书中说过:
JavaScript代码整洁之道

文章插图
 
就算是的坏代码也能运行,但如果代码不干净,也能会让你的开发团队陷入困境 。
JavaScript代码整洁之道

文章插图
 
在本文中,虫虫就给大家讲讲JAVAScript代码的整洁知道,全面对比下好的代码和坏的代码的写法 。
强类型检查,使用"===",不用"=="类型的检查非常重要,使用强类型检查可以帮我理清程序逻辑,如果类型检查松懈了(使用==),有可能使你的逻辑"南辕北撤了",试看下面的例子:
JavaScript代码整洁之道

文章插图
 
所以从现在开始就强类型检查,"亡羊补牢,犹未晚也"!
const value = https://www.isolves.com/it/cxkf/yy/js/2020-08-10/"520";
if (value =https://www.isolves.com/it/cxkf/yy/js/2020-08-10/== 520) {
console.log(value);
}
条件不会满足 。
if (value =https://www.isolves.com/it/cxkf/yy/js/2020-08-10/== "520") {
console.log(value);
}
条件满足 。
变量命名变量的命名要有意义,而不是随意乱起 。最好是"望文生义",一看到变量名就知道是干嘛用的 。
望文生义坏代码:
let daysSLV= 10;
【JavaScript代码整洁之道】let y = new Date().getFullYear();
let ok;
if (user.age > 30) {
ok = true;
}
好代码:
const MAX_AGE = 30;
let daysSinceLastVisit = 10;
let currentYear = new Date().getFullYear();
...
const isUserOlderThanAllowed = user.age > MAX_AGE;
不要给变量添加额外不需要的单词坏代码:
let nameValue;
let theProduct;
好代码:
let name;
let product;
不要让我们需要从上下文中了解变量的意思
坏代码:
const ans = ["Chongchong", "maomaochong", "bollworm"];
ans.forEach(an => {
doSomething();
doSomethingElse();
// ...
// 等等,这个u是干嘛用的?
register(an);
});
JavaScript代码整洁之道

文章插图
 
好代码:
const animals = ["Chongchong", "maomaochong", "bollworm"];
animals.forEach(animal => {
doSomething();
doSomethingElse();
// ...
// ...
register(animal);
});
JavaScript代码整洁之道

文章插图
 
不添加多余的上下文坏代码:
const user = {
userName: "Chongchong",
userNameAbb: "CC",
userAge: "28"
};
...
user.userName;
好代码:
const user = {
Name: "Chongchong",
NameAbb: "CC",
userAge: "28"
};
...
user.userName;
函数使用长而具有描述性的函数名 。由于函数一般来说表示某种行为,函数名称应该是动词或短??语,这样可以显示功能以及参数的意义 。
坏代码:
function notif(user) {
// 代码逻辑
}
好代码:
function notifyUser(emailAddress){
//代码逻辑
}
避免使用大量参数 。理想情况下,函数应该指定两个或更少的参数 。参数越少,函数单元测试就越容易 。
坏代码:
function getUsers(fields, fromDate, toDate) {
//代码逻辑
}
好代码:
function getUsers({ fields, fromDate, toDate }) {
// 码逻辑
}
getUsers({
fields: ['name', 'surname', 'email'],
fromDate: '2019-05-22',
toDate: '2019-05-31'
});
使用默认参数,不用条件坏代码:
function createShape(type) {


推荐阅读