马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2019-8-30 15:12 编辑
JavaScript 很腻害这件事，咱们今天就不提了，有兴趣的鱼油出门左转：臊瑞会JS真的了不起？！
在隔壁平行宇宙中（设计模式系列：传送门），新入职的“小不二”和“玄武大神”的职场爱恨情仇还在上演着。
小不二
玄武大佬
开始前，先剧透一下用到的知识点：
- if/else
- switch
- 一元判断时：存到Object里
- 一元判断时：存到Map里
- 多元判断时：将condition拼接成字符串存到Object里
- 多元判断时：将condition拼接成字符串存到Map里
日常开发中，我们编写 js 代码时经常遇到复杂逻辑判断的情况，通常大家可以用 if/else 或者 switch 来实现多个条件判断。
但这样会有个问题，随着逻辑复杂度的增加，代码中的 if/else/switch 会变得越来越臃肿，越来越看不懂。
越是简单的事情，越能看出一个程序猿技术的高下，废话不多了，有请我们的主角登场。
平行宇宙
这不今天，无良的甲方粑粑，又有新任务了：
鱼C-IT培训学院（土掉渣系列）新学期即将开始，课程报名流程需要优化，现分为：1、开课进行中 2、开课失败 3、教材售空 4、开课成功 5、取消选课；望鱼兮科技公司，完成迭代优化。
看到这份“详细”的业务说明，玄武把小不二叫过来：“小不二，最近看你进步很多，有件事情交给你做，优先级最高，邮件抄送给你了。”
“好的”，小不二只得暂时放下手头的事情，开始处理大佬交待的事项。
看完项目需求，小不二心想：“自己果然进步了，这件事情，分分钟搞定！”
福至心灵，摘掉耳机，远离轻音乐，开启“心流”模式，撸起代码，先来个格调高的注释：/**
* 2033.1.23 鱼C-IT学院流程建档
* 按钮点击事件下，不同状态
* @program {number} status 活动状态：
* 1、开课进行中 2、开课失败 3、教材售空 4、开课成功 5、取消选课 6、其他
*/
需求中说：
当用户单击提交选课按钮后，针对不同的状态反馈相应的信息。
好吧，既然如此，用最简单的 if/else 来实现：function onButtonClick(statue){
if(status == 1){
sendLog('running');
jumpTo('indexPage');
}
else if(status == 2){
sendLog('fail');
jumpTo('failPage');
}
else if(status == 3){
sendLog('fail');
jumpTo('failPage');
}
else if(status == 4){
sendLog('success');
jumpTo('successPage');
}
else if(status == 5){
sendLog('cancel');
jumpTo('cancelPage');
}
else{
sendLog('other');
jumpTo('indexPage')
}
}
这样基本的按钮逻辑就实现了：
根据不同活动状态做两件事情，发送日志埋点和跳转到对应页面。
写完代码，小不二突然回想起之前玄武大佬因为自己写的方法不够“高级”，说给项目组蒙羞...
算了，基本业务逻辑有了，用 const 和 switch 来重写：const onButtonClick = (status)=>{
switch(status){
case 1:
sendLog('running');
jumpTo('indexPage');
break;
case 2:
case 3:
sendLog('fail');
jumpTo('failPage');
break;
case 4:
sendLog('success');
jumpTo('successPage');
break;
case 5:
sendLog('cancel');
jumpTo('cancelPage');
break;
default:
sendLog('other');
jumpTo('indexPage');
}
}
嗯，这样看起来比 if/else 清晰多了，代码量也得到优化了。
既然 status 中 2 和 3 逻辑一样，合起来处理也没问题。
写完第二个版本，小不二觉得这还不行！
上周五开组会，玄武大佬特意说了一点“江湖潜规则”：
既然如此，一定要相应领导号召，如果用数组关联一下，代码还能更直观些：const actions = {
'1':['running','indexPage'],
'2':['fail','failPage'],
'3':['fail','failPage'],
'4':['success','successPage'],
'5':['cancel','cancelPage'],
'default':['other','index']
}
const onButtonClick = (status)=>{
var action = actions[status] || actions['default'];
sendLog(action[0]);
sendLog(action[1]);
}
等小不二自己写完这段代码，突然有了那么一丝丝的小骄傲。
这个方法让代码看起来更加清爽了。
将判断条件作为对象的属性名，将处理逻辑作为对象的属性值，这样当单击按钮时，通过对象属性查找的方式就可以进行逻辑判断。
这样就可以发给玄武大佬啦！
不对，还不能提交？！
不知道怎么肥四，还是突然接收到宇宙中的神奇量子波动...
小不二突然想到上午看到的 ES6（EcmaScript 6）中有一个 Map 对象也可以用到。
（PS：程序猿的精进时刻（bug时刻），往往在于此，渴望将自己看到的新技术用到实际开发中）
Map 对象和我们现在创建的 Object 对象还是有区别滴：
一个对象通常都有自己的原型，所以一个对象总有一个"prototype"键。
一个对象的键只能是字符串或者Symbols，但一个Map的键可以是任意值。
你可以通过size属性很容易地得到一个Map的键值对个数，而对象的键值对个数只能手动确认。
这就意味上面的代码还可以写为：const actions = new Map([
[1,['running','indexPage']],
[2,['fail','failPage']],
[3,['fail','failPage']],
[4,['success','successPage']],
[5,['cancel','cancelPage']],
['default',['other','index']]
])
const onButtonClick = (status)=>{
var action = acctions.get(status) || actions.get('default')
sendLog(action[0]);
sendLog(action[1]);
}
哈哈哈，写了 3 种方案（switch、数组、Map），可以像玄武大佬交差了。
“玄武大佬，代码我提交过去了，您看一下 ”，小不二边微笑，边在通讯软件上打字。
“好的，我来看一下”
5min后...
“小不二，代码可以是可以，你没有判断用户的身份呐？！”
“阿 ，我现在加上...”，小不二有点尴尬。
"嗯，以前咱们按钮单击时候只需要判断 status，现在还需要判断用户的身份：guest 游客 ；student 学生"
“好的”，小不二赶紧回复到。
“对了，还有，基本结构就用你最后的 Map 对象”
“好的，我现在弄。”
“好，争取下班前给我。”
和玄武短暂沟通后，菜鸟小不二开始修改代码，算了明明需求中没有，估计又是金主粑粑口头交待的...
既然两种用户身份：guest 游客 ；student 学生，那岂不是就有 2*5=10+default=11 种 actions：const actions = new Map([
[guest_1,['running','indexPage']],
[guest_2,['fail','failPage']],
[guest_3,['fail','failPage']],
[guest_4,['success','successPage']],
[guest_5,['cancel','cancelPage']],
[master_1,['running','indexPage']],
[master_2,['fail','failPage']],
[master_3,['fail','failPage']],
[master_4,['success','successPage']],
[master_5,['cancel','cancelPage']],
['default',['other','index']]
])
然后单击事件中需要获取身份和状态，然后调用：const onButtonClick = (identity,status)=>{
var action = acctions.get(`${identity}_${status}`) || actions.get('default');
action.call(this)
}
把两个条件拼接成字符串，并通过以条件拼接字符串作为键，以处理函数作为值的 Map 对象进行查找并执行。
这种写法在多元条件判断时候还是很好用滴。
先这样吧，发给玄武大佬。
“嗯，不错，小不二你进步不少 ”
“谢谢大佬夸奖”
“还有，虽然目前用户没有提，但是万一哪天金主粑粑，想让 student 访客下，status 1到3逻辑一样怎么办？这个不着急，你先想想吧。”
“好的好的，我先把手头的刚才的开发完成，后续再来优化。”一看到不着急，小不二悬着的心放下了。
其实这个也好实现，只要在 Object 对象中返回一个 Map 对象就可以了。
不过，先不实现了，我的进度吖...
美好的一天就这样结束了...
（加班就这样开始了）
如果喜欢，别忘了评分 ：
这位鱼油，如果喜欢本系列Js帖子，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2019-1-23 09:53:21
置顶卡
千斤顶
显身卡
发表于 2019-1-25 16:36:16
发表于 2019-2-10 15:56:07
发表于 2019-3-12 17:44:04
