我们之道作为一个码农,不论其实现如何,功能怎样,写的一手清晰靠谱的代码是其代码功力的体现。好的、清洁的代码可以方便自己以后维护,让你的继任者马上能接手维护它,而不是给你檫屁股,被人戳脊梁骨、被骂垃圾代码。所以,写清洁地代码非常重要。
那么什么才是清洁代码的呢?不言而喻,清洁的代码就是可以让人易于人理解、易于更改、方便扩展的代码。写清洁的代码要常扪心自问:
为什么要这样写?
为什么要在这儿写?
为什么不换个写法?
Robert C. Martin在《代码整洁之道》一书中说过:
就算是的坏代码也能运行,但如果代码不干净,也能会让你的开发团队陷入困境。
在本文中,虫虫就给大家讲讲JAVAScript代码的整洁知道,全面对比下好的代码和坏的代码的写法。
类型的检查非常重要,使用强类型检查可以帮我理清程序逻辑,如果类型检查松懈了(使用==),有可能使你的逻辑"南辕北撤了",试看下面的例子:
所以从现在开始就强类型检查,"亡羊补牢,犹未晚也"!
const value = "520";
if (value === 520) {
console.log(value);
}
条件不会满足。
if (value === "520") {
console.log(value);
}
条件满足。
变量的命名要有意义,而不是随意乱起。最好是"望文生义",一看到变量名就知道是干嘛用的。
坏代码:
let daysSLV= 10;
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);
});
好代码:
const animals = ["Chongchong", "maomaochong", "bollworm"];
animals.forEach(animal => {
doSomething();
doSomethingElse();
// ...
// ...
register(animal);
});
坏代码:
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) {
const shapeType = type || "circle";
// ...
}
好代码:
function createShape(type = "circle") {
// ...
}
坏代码:
function notifyUsers(users) {
users.forEach(user => {
const userRecord = database.lookup(user);
if (userRecord.isVerified()) {
notify(user);
}
});
}
好代码:
function notifyVerifiedUsers(users) {
users.filter(isUserVerified).forEach(notify);
}
function isUserVerified(user) {
const userRecord = database.lookup(user);
return userRecord.isVerified();
}
坏代码:
const shapeConfig = {
type: "cube",
width: 200,
height: null
};
function createShape(config) {
config.type = config.type || "cube";
config.width = config.width || 250;
config.height = config.width || 250;
}
createShape(shapeConfig);
好代码:
const shapeConfig = {
type: "cube",
width: 200
};
function createShape(config) {
config = Object.assign(
{
type: "cube",
width: 250,
height: 250
},
config
);
...
}
createShape(shapeConfig);
坏代码:
function createFile(name, isPublic) {
if (isPublic) {
fs.create(`./public/${name}`);
} else {
fs.create(name);
}
}
好代码:
function createFile(name) {
fs.create(name);
}
function createPublicFile(name) {
createFile(`./public/${name}`);
}
不要让全局变量/函数污染
如果需要扩展现有对象,请使用ES类和继承,不要在对象原型链上创建函数。
坏代码:
Array.prototype.myFunc = function myFunc() {
// 代码逻辑
};
好代码:
class SuperArray extends Array {
myFunc() {
//代码逻辑
}
}
坏代码:
function isUserNotBlocked(user) {
//代码逻辑
}
if (!isUserNotBlocked(user)) {
//代码逻辑
}
好代码:
function isUserBlocked(user) {
//代码逻辑
}
if (isUserBlocked(user)) {
//代码逻辑
}
坏代码:
if (isValid === true) {
//代码逻辑
}
if (isValid === false) {
//代码逻辑
}
好代码:
if (isValid) {
//代码逻辑
}
if (!isValid) {
//代码逻辑
}
坏代码:
class Car {
// ...
getMaximumSpeed() {
switch (this.type) {
case "Ford":
return this.someFactor() + this.anotherFactor();
case "Benz":
return this.someFactor();
case "BYD":
return this.someFactor() - this.anotherFactor();
}
}
}
好代码:
class Car {
// ...
}
class Ford extends Car {
// ...
getMaximumSpeed() {
return this.someFactor() + this.anotherFactor();
}
}
class Benz extends Car {
// ...
getMaximumSpeed() {
return this.someFactor();
}
}
class BYD extends Car {
// ...
getMaximumSpeed() {
return this.someFactor() - this.anotherFactor();
}
}
类是JavaScript中的新的语法糖。除了语法不同外,其他都和prototype一样工作。使用ES类可以让你的代码更加简洁清晰。
坏代码:
好代码:
许多库如jQuery和Lodash都使用该模式。因此,该方法可以让的代码简洁。在主类中,只需在每个函数的末尾返回"this",就可以将更多的类方法链接到该方法。
坏代码:
好代码:
通常情况下,尽量不要写不要重复代码,不要写不使用的函数和死代码。
出于历史原因,可能会遇到重复的代码。例如,有两段你略有不同的代码,但是有很多共同的逻辑,为省事或者赶工期,导致你复制了大段代码,略做小改然后使用了。针对这种代码,后期一定要及早抽象出相同逻辑部分删除重复代码越早越好,不要欠死账,不然后越积越多就不好处理了。
关于死代码,码如其名。就是啥事不干,删了可能引入错误,这和上面的一样处理,及早处理,不用了就早处理,早删除。
上面只是代码整洁的部分原理,而且个别条款也可能需要商榷。这些大部分理论来源于《代码整洁之道》这本书。有什么建议意见请回复,一起学习讨论。