10个Javascript 小技巧帮你提升代码质量

简介

• 提炼函数
• 合并重复的条件片段
• 把条件分支语句提炼成函数
• 合理使用循环
• 提前让函数退出代替嵌套条件分支
• 传递对象参数代替过长的参数列表
• 少用三目运算符
• 合理使用链式调用
• 分解大型类
• 本文会不断更新，不足之处欢迎评论区补充。

好处：

• 避免出现超大函数。
• 独立出来的函数有助于代码复用。
• 独立出来的函数更容易被覆写。
• 独立出来的函数如果拥有一个良好的命名，它本身就起到了注释的作用。
• 语义化将多段分离的逻辑放在不同的函数中实现，可以使代码逻辑清晰，清楚的看到每一步在做什么。

代码举例：

• 实现获取数据，然后操作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.getElementsByClassName('li');
    for (let i = 0; i < list.length; i ++) {
        list[i].addEventListener('focus', () => {
            // do something
        });
    }
}

明天继续，。。。。