未加星标

论条件判断的极致优化

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

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


论条件判断的极致优化

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:论条件判断的极致优化
本站链接:https://www.codesec.net/view/620880.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(10)