论条件判断的极致优化

背景

北京的冬天还是来了，没有一丝丝防备，满腿的腿毛终究还是抵挡不住这沁人心脾的冷风，早上起来偷偷地把秋裤套上了。天气虽冷，但我的心还是热的，抽空整理了一下平时用到的优化ifelse的方法，与君分享，欢迎指正。

逻辑运算

if (jinChengWu) {
    boyFriend = jinChengWu;
} else {
    boyFriend = 'you';
}
//改写为↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
//逻辑或
boyFriend = jinChengWu || 'you';


if (high) {
    if (haveMoney) {
        if (handsome) {
            boyFriend = 'you';
        }
    }
}
//改写为↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
//逻辑与
boyFriend = high && haveMoney && handsome && 'you';

复制代码

三目运算

//三目运算
if (age < 50) {
    people = 'boy';
} else {
    people = 'man';
}

//改写为↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

people = (age < 50) ? 'boy' : 'man';
复制代码

switch

多个ifelse，换成switch可以得到更快的代码，case概率最大的放前面，概率最小的放后面，进一步优化switch

if (star === 10) {
    console.log('青铜');
} else if (star === 20) {
    console.log('白银');
} else if (star === 30) {
    console.log('黄金');
} else if (star === 40) {
    console.log('铂金');
} else if (star === 50) {
    console.log('钻石');
} else {
    console.log('星耀以上');
}

//改写为↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

switch (star) {
    case 40:
        console.log('铂金');
        break;
    case 30:
        console.log('黄金');
        break;
    case 50:
        console.log('钻石');
        break;
    case 20:
        console.log('白银');
        break;
    case 10:
        console.log('青铜');
        break;
    default:
        console.log('星耀以上');
        break;
}
复制代码

策略模式

根据ifelse封装策略类，每次去取策略。策略可以是object键值对，Map键值对，value可以是字符串，函数等等任何处理程序，可根据自身喜好结合实际需求进行配置。

//策略
const levelStrategy = new Map([
    [10, '青铜'],
    [20, '白银'],
    [30, '黄金'],
    [40, '铂金'],
    [50, '钻石'],
    ['other', '星耀以上']
]);

//环境
const getMyLevel = starNum => levelStrategy.get(starNum);
//使用
const myLevel = getMyLevel(50); // '钻石'
复制代码

职责链模式

连接成一条链，沿着链路走，谁能解决我的问题就停下来找谁解决，解决不了就交与下一个人。

//职责链模式 
const judgeQt = starNum => {
    if (starNum === 10) {
        console.log('青铜');
    } else {
        return 'nextSuccess'
    }
}
const judgeBy = starNum => {
    if (starNum === 20) {
        console.log('白银');
    } else {
        return 'nextSuccess'
    }
}
const judgeOtherLevel = starNum => {
    if (starNum >= 30) {
        console.log('黄金以上');
    } else {
        return 'nextSuccess'
    }
}
// 链路代码
Function.prototype.after = function (fn) {
    const self = this
    return function () {
        const result = self.apply(self, arguments)
        if (result === 'nextSuccess') {
            return fn.apply(self, arguments)
        }
    }
}
//用法
const getLevel = judgeQt.after(judgeBy).after(judgeOtherLevel);
getLevel(20);// '白银'
复制代码

惰性载入函数

有些方法中的ifelse，其实只需要判断一次，就不需要再判断了，无论之后什么时候再调用这个方法,和第一次调用这个方法的执行结果是一样的，此时我们就没必要再去进行条件判断，就可以使用惰性载入函数。

一个合适的场景就是浏览器的能力检测，以事件绑定为例，整个程序中，我们会调用很多次addEvent进行事件绑定，但是，其实我们不必每次都走一次ifelse进行能力判断，chrome中，必然是支持addEventListener，无论什么时候调用，都会进入第一个判断，少走一次判断，都会加快一些执行速度。

const oA = document.getElementById('a'),
    oB = document.getElementById('b');
//事件绑定
function addEvent(type, el, fn) {
    if (window.addEventListener) {
        console.log('IF执行了');
        el.addEventListener(type, fn, false);
    }
    else if (window.attachEvent) {
        el.attachEvent('on' + type, fn);
    }
}

addEvent('click', oA, () => { alert('哈哈') });
addEvent('click', oB, () => { alert('嘻嘻') });
//事件绑定成功 打印 2 次 'IF执行了' if条件执行2次

//改写为↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

//惰性载入升级
function addEvent(type, el, fn) {
    if (window.addEventListener) {
        console.log('IF执行了');
        addEvent = function (type, el, fn) {
            el.addEventListener(type, fn, false);
        }
    }
    else if (window.attachEvent) {
        addEvent = function (type, el, fn) {
            el.attachEvent('on' + type, fn);
        }
    }
    addEvent(type, el, fn);
}

addEvent('click', oA, () => { alert('哈哈') });
addEvent('click', oB, () => { alert('嘻嘻') });
//事件绑定成功 打印 1 次 'IF执行了' if条件只执行1次
复制代码

Pattern matching

模式匹配，想尝鲜的兄弟自行查看 => 传送门

总结

ok，that's all.其实每一种都有自己的适合场景，用每一种都没有任何问题，我常用的还是ifelse/switch。本文为便于快速理解，使用了比较简单的demo，但是当情况比较复杂的时候，适当的使用一些技巧或者设计模式，一定程度上可以让代码更清爽一些，更具拓展性。全凭个人习惯，以同事接手你的项目不骂你为己任，everything is ok, belive you are best, you are my hero and i love you forever, mua~