主要介绍以下几点:
- 提炼函数
- 合并重复的条件片段
- 把条件分支语句提炼成函数
- 合理使用循环
- 提前让函数退出代替嵌套条件分支
- 传递对象参数代替过长的参数列表
- 少用三目运算符
- 合理使用链式调用
- 分解大型类
本文会不断更新,不足之处欢迎评论区补充。
1. 提炼函数
好处:
- 避免出现超大函数。
- 独立出来的函数有助于代码复用。
- 独立出来的函数更容易被覆写。
- 独立出来的函数如果拥有一个良好的命名,它本身就起到了注释的作用。
- 语义化将多段分离的逻辑放在不同的函数中实现,可以使代码逻辑清晰,清楚的看到每一步在做什么。
代码举例:
实现获取数据,然后操作dom显示数据,最后添加事件
// 逻辑都写在一起,需要将所有逻辑看完才知道这段代码是干嘛的,局部逻辑无法复用
function main() {
$.ajax.get('/getData').then((res) => {
const ul = document.getElementById('ul');
ul.innerHTML = res.list.map(text => `<li class="li">${text}</li>`).join('\n');
const list = document.getElementsByClassName('li');
for (let i = 0; i < list.length; i ++) {
list[i].addEventListener('focus', () => {
// do something
});
}
});
}
复制代码
function getData() {
return $.ajax.get('/getData').then((res) => res.data.list);
}
function showList(list) {
const ul = document.getElementById('ul');
ul.innerHTML = list.map(text => `<li class="li">${text}</li>`).join('\n');
}
function addEvent() {
const list = document.getElementsByClass