如何写一手烂代码
前言
老司机手把手教你写一手烂代码,话不多说,上代码。
1、尽量使用母语
Good 👍🏻
let mingzi = 'Allan';
Bad 👎🏻
let name = 'Allan';
2、三目运算越长越好
Good 👍🏻
const foo = maybe1 > maybe2 ? "bar" : value1 > value2 ? "baz" : null;
Bad 👎
const foo = maybe1 > maybe2 ? 'bar' : maybeNull;
3、if嵌套要深
Good 👍🏻
if(condition1) {
if(condition2) {
if(condition3) {
if(condition4) {
...
}
}
}
}
Bad 👎🏻
if(condition1 && condition2) {
...
}
4、代码能写一行尽量不写多行
Good 👍🏻
<div :class="{'not-join': status === 'allow' && !item.is_select}" v-for="(item, index) in list" :key="index" @click="check(item)" class="activity-item"></div>
Bad 👎🏻
<div
:class="{'not-join': status === 'allow' && !item.is_select}"
v-for="(item, index) in list"
:key="index"
@click="check(item)"
class="activity-item"
></div>
5、变量名要保持神秘
Good 👍🏻
const asdfgh = 18;
Bad 👎
const age = 18;
6、单词尽量要少
Good 👍🏻
let a = 18;
Bad 👎🏻
let age = 18;
7、尽量不要使用模板字符串
Good 👍
const sayHi = function (name) {
return 'How are you, ' + name + '?';
};
Bad 👎
const sayHi = function (name) {
return `How are you, ${name}?`;
};
8、布尔值不要简写
Good 👍
if (isValid === true) {
// ...
}
Bad 👎
if (isValid) {
// ...
}
9、变量类型自由“飞翔”
Good 👍
let color = '';
if(condition1) {
color = {a: 'red'};
} else {
color = ['red', 'yellow', 'blue'];
}
Bad 👎
let color = '';
if (condition1) {
color = 'red';
} else {
color = 'yellow';
}
10、回调的“形状”要优雅
Good 👍
$(".disappear").click(function(){
$("#row20").animate({ "opacity": "0" },
100,
function(){$("#row19").animate({ "opacity": "0" },
100,
function(){$("#row18").animate({ "opacity": "0" },
100,
function(){$("#row17").animate({ "opacity": "0" },
100,
function(){$("#row16").animate({ "opacity": "0" },
100,
function(){$("#row15").animate({ "opacity": "0" },
100,
function(){$("#row14").animate({ "opacity": "0" },
100,
function(){$("#row13").animate({ "opacity": "0" },
100,
function(){$("#row12").animate({ "opacity": "0" },
100,
function(){$("#row11").animate({ "opacity": "0" },
100,
function(){$("#row10").animate({ "opacity": "0" },
100,
function(){$("#row9").animate({ "opacity": "0" },
100,
function(){$("#row8").animate({ "opacity": "0" },
100,
function(){$("#row7").animate({ "opacity": "0" },
100,
function(){$("#row6").animate({ "opacity": "0" },
100,
function(){$("#row5").animate({ "opacity": "0" },
100,
function(){$("#row4").animate({ "opacity": "0" },
100,
function(){$("#row3").animate({ "opacity": "0" },
100,
function(){$("#row2").animate({ "opacity": "0" },
100,
function(){$("#row1").animate({ "opacity": "0" },
100)})})})})})})})})})})})})})})})})}
Bad 👎
fetch(url)
.then(response => {
return response.json().then(data => {
if (response.ok) {
return data;
} else {
return Promise.reject({status: response.status, data});
}
});
})
.then(result => console.log('success:', result))
.catch(error => console.log('error:', error));
11、清除缓存方式要妙
Good 👍
// 清除缓存最快的方法,没有之一
<header>
<a href="javascript:alert('清除成功!')">清除缓存</a>
</header>
11、万一没保存成功呢
Good 👍
for(let i = 0; i < 10; i++) {
this.save();
}
12、使用 TypeScript 多写 any
13、eslint 全局 ignore
14、单元测试真的没啥用
15、代码中少写注释
Tobe continue...
阅读 1.3k
0 条评论
得票时间