背景
北京的冬天还是来了，没有一丝丝防备，满腿的腿毛终究还是抵挡不住这沁人心脾的冷风，早上起来偷偷地把秋裤套上了。天气虽冷，但我的心还是热的，抽空整理了一下平时用到的优化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~