js 优化

提炼函数
把条件分支语句提炼成函数
合理使用循环
提前让函数退出代替嵌套条件分支
传递对象参数代替过长的参数列表
少用三目运算符
合理使用链式调用
分解大型类
活用位操作符
纯函数

(1). 提炼函数:

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

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');
}
async function main() {
    const list = await getData(); // 获取数据
    showList(list); // 显示页面
    ...
}

(2). 把条件分支语句提炼成函数:

①. 复杂的条件分支语句难以阅读和理解
②. 将条件分支语句提炼成语义化的函数,使代码更加直观、逻辑清晰.

// 是否是夏天
function isSummer() {
    var date = new Date();
    return date.getMonth() >= 6 && date.getMonth() <= 9;
}
// 提炼条件后
function getPrice(price) {
    if (isSummer()){
        return price * 0.8;
    }
    return price;
}

(3). 提前让函数退出代替嵌套条件分支:

function del(obj){
    var ret;
    if (!obj.isReadOnly){ // 不为只读的才能被删除
        if (obj.isFolder){ // 如果是文件夹
            ret = deleteFolder(obj);
        }else if (obj.isFile) { // 如果是文件
            ret = deleteFile(obj);
        }
    }
    return ret;
};

function del(obj){
    if (obj.isReadOnly) { // 反转if表达式
        return;
    }
    if (obj.isFolder) {
        return deleteFolder(obj);
    }
    if (obj.isFile) {
        return deleteFile(obj);
    }
}

(4). 传递对象参数代替过长的参数列表:

①. 函数参数过长,需要保证传递的顺序正确,代码可读性也会变差.

②. 一般函数参数最好不要超过3个,超过使用对象.

setUserInfo({
    id: 1314,
    name: 'sven',
    address: 'shenzhen',
    sex: 'male',
    mobile: '137********',
    qq: 377876679
})

(5). 纯函数:

①. 定义:
    a. 纯函数是指不依赖于且不改变它作用域之外的变量状态的函数.
    b. 纯函数的返回值只由它调用时的参数决定,它的执行不依赖于系统的状态(执行上下文).
    c. 相同的输入参数,一定会得到相同的输出,也就是内部不含有会影响输出的随机变量.

var a = 1;
// 非纯函数
function sum(b) {
    return a + b;
}
// 非纯函数
function sum(b) {
    a = 2;
    return b;
}
// 非纯函数
function sum(b) {
    return b + Math.random();
}
// 纯函数
function sum (b, c) {
    return b + c;
}