鱼C论坛

 找回密码
 立即注册
查看: 3047|回复: 23

[庖丁解牛] 0 2 4 0 ★ 平行宇宙下的玄武和小不二 |【还不来学 JS】

[复制链接]
发表于 2019-1-23 09:53:21 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 不二如是 于 2019-8-30 15:12 编辑




                               
登录/注册后可看大图


JavaScript 很腻害这件事,咱们今天就不提了,有兴趣的鱼油出门左转:臊瑞会JS真的了不起?!


                               
登录/注册后可看大图


在隔壁平行宇宙中(设计模式系列:传送门),新入职的“小不二”和“玄武大神”的职场爱恨情仇还在上演着。

1.jpg
小不二



2.jpg
玄武大佬


开始前,先剧透一下用到的知识点:
  • if/else
  • switch
  • 一元判断时:存到Object里
  • 一元判断时:存到Map里
  • 多元判断时:将condition拼接成字符串存到Object里
  • 多元判断时:将condition拼接成字符串存到Map里


日常开发中,我们编写 js 代码时经常遇到复杂逻辑判断的情况,通常大家可以用 if/else 或者 switch 来实现多个条件判断。

但这样会有个问题,随着逻辑复杂度的增加,代码中的 if/else/switch 会变得越来越臃肿,越来越看不懂。

越是简单的事情,越能看出一个程序猿技术的高下,废话不多了,有请我们的主角登场。




平行宇宙

这不今天,无良的甲方粑粑,又有新任务了:
鱼C-IT培训学院(土掉渣系列)新学期即将开始,课程报名流程需要优化,现分为:1、开课进行中 2、开课失败 3、教材售空 4、开课成功 5、取消选课;望鱼兮科技公司,完成迭代优化。


看到这份“详细”的业务说明,玄武把小不二叫过来:“小不二,最近看你进步很多,有件事情交给你做,优先级最高,邮件抄送给你了。”

“好的”,小不二只得暂时放下手头的事情,开始处理大佬交待的事项。

看完项目需求,小不二心想:“自己果然进步了,这件事情,分分钟搞定!”

giphy-2.gif


福至心灵,摘掉耳机,远离轻音乐,开启“心流”模式,撸起代码,先来个格调高的注释:
  1. /**
  2.          * 2033.1.23 鱼C-IT学院流程建档
  3.          * 按钮点击事件下,不同状态
  4.          * @program {number} status 活动状态:
  5.          * 1、开课进行中 2、开课失败 3、教材售空 4、开课成功 5、取消选课  6、其他
  6.          */
复制代码


需求中说:
当用户单击提交选课按钮后,针对不同的状态反馈相应的信息。


好吧,既然如此,用最简单的 if/else 来实现:
  1. function onButtonClick(statue){
  2.             if(status == 1){
  3.                 sendLog('running');
  4.                 jumpTo('indexPage');
  5.             }
  6.             else if(status == 2){
  7.                 sendLog('fail');
  8.                 jumpTo('failPage');
  9.             }
  10.             else if(status == 3){
  11.                 sendLog('fail');
  12.                 jumpTo('failPage');
  13.             }
  14.             else if(status == 4){
  15.                 sendLog('success');
  16.                 jumpTo('successPage');
  17.             }
  18.             else if(status == 5){
  19.                 sendLog('cancel');
  20.                 jumpTo('cancelPage');
  21.             }
  22.             else{
  23.                 sendLog('other');
  24.                 jumpTo('indexPage')
  25.             }
  26.         }
复制代码


这样基本的按钮逻辑就实现了:
根据不同活动状态做两件事情,发送日志埋点和跳转到对应页面。


写完代码,小不二突然回想起之前玄武大佬因为自己写的方法不够“高级”,说给项目组蒙羞...

算了,基本业务逻辑有了,用 const 和 switch 来重写:
  1. const onButtonClick = (status)=>{
  2.             switch(status){
  3.                 case 1:
  4.                     sendLog('running');
  5.                     jumpTo('indexPage');
  6.                     break;
  7.                 case 2:
  8.                 case 3:
  9.                     sendLog('fail');
  10.                     jumpTo('failPage');
  11.                     break;
  12.                 case 4:
  13.                     sendLog('success');
  14.                     jumpTo('successPage');
  15.                     break;
  16.                 case 5:
  17.                     sendLog('cancel');
  18.                     jumpTo('cancelPage');
  19.                     break;
  20.                 default:
  21.                     sendLog('other');
  22.                     jumpTo('indexPage');
  23.             }
  24.         }
复制代码


嗯,这样看起来比 if/else 清晰多了,代码量也得到优化了。

既然 status 中 2 和 3 逻辑一样,合起来处理也没问题。

写完第二个版本,小不二觉得这还不行!

giphy.gif


上周五开组会,玄武大佬特意说了一点“江湖潜规则”
游客,如果您要查看本帖隐藏内容请回复


既然如此,一定要相应领导号召,如果用数组关联一下,代码还能更直观些:
  1. const actions = {
  2.             '1':['running','indexPage'],
  3.             '2':['fail','failPage'],
  4.             '3':['fail','failPage'],
  5.             '4':['success','successPage'],
  6.             '5':['cancel','cancelPage'],
  7.             'default':['other','index']
  8.         }
  9.         
  10.         const onButtonClick = (status)=>{
  11.             var action = actions[status] || actions['default'];
  12.                 sendLog(action[0]);
  13.                 sendLog(action[1]);
  14.         }
复制代码


等小不二自己写完这段代码,突然有了那么一丝丝的小骄傲。

这个方法让代码看起来更加清爽了。

将判断条件作为对象的属性名,将处理逻辑作为对象的属性值,这样当单击按钮时,通过对象属性查找的方式就可以进行逻辑判断。

这样就可以发给玄武大佬啦!

不对,还不能提交?!

giphy.gif


不知道怎么肥四,还是突然接收到宇宙中的神奇量子波动...

小不二突然想到上午看到的 ES6(EcmaScript 6)中有一个 Map 对象也可以用到。
(PS:程序猿的精进时刻(bug时刻),往往在于此,渴望将自己看到的新技术用到实际开发中)

Map 对象和我们现在创建的 Object 对象还是有区别滴:
一个对象通常都有自己的原型,所以一个对象总有一个"prototype"键。
一个对象的键只能是字符串或者Symbols,但一个Map的键可以是任意值。
你可以通过size属性很容易地得到一个Map的键值对个数,而对象的键值对个数只能手动确认。


这就意味上面的代码还可以写为:
  1. const actions = new Map([
  2.             [1,['running','indexPage']],
  3.             [2,['fail','failPage']],
  4.             [3,['fail','failPage']],
  5.             [4,['success','successPage']],
  6.             [5,['cancel','cancelPage']],
  7.             ['default',['other','index']]
  8.         ])
  9.         
  10.         const onButtonClick = (status)=>{
  11.             var action = acctions.get(status) || actions.get('default')
  12.             sendLog(action[0]);
  13.             sendLog(action[1]);
  14.         }
复制代码


哈哈哈,写了 3 种方案(switch、数组、Map),可以像玄武大佬交差了。

“玄武大佬,代码我提交过去了,您看一下 ”,小不二边微笑,边在通讯软件上打字。

“好的,我来看一下”

giphy.gif


5min后...

“小不二,代码可以是可以,你没有判断用户的身份呐?!

“阿 ,我现在加上...”,小不二有点尴尬。

"嗯,以前咱们按钮单击时候只需要判断 status,现在还需要判断用户的身份:guest 游客 ;student 学生"

“好的”,小不二赶紧回复到。

“对了,还有,基本结构就用你最后的 Map 对象”

“好的,我现在弄。”

“好,争取下班前给我。”

和玄武短暂沟通后,菜鸟小不二开始修改代码,算了明明需求中没有,估计又是金主粑粑口头交待的...

既然两种用户身份:guest 游客 ;student 学生,那岂不是就有 2*5=10+default=11 种 actions:
  1. const actions = new Map([
  2.             [guest_1,['running','indexPage']],
  3.             [guest_2,['fail','failPage']],
  4.             [guest_3,['fail','failPage']],
  5.             [guest_4,['success','successPage']],
  6.             [guest_5,['cancel','cancelPage']],
  7.             [master_1,['running','indexPage']],
  8.             [master_2,['fail','failPage']],
  9.             [master_3,['fail','failPage']],
  10.             [master_4,['success','successPage']],
  11.             [master_5,['cancel','cancelPage']],
  12.             ['default',['other','index']]
  13.         ])
复制代码


然后单击事件中需要获取身份和状态,然后调用:
  1. const onButtonClick = (identity,status)=>{
  2.             var action = acctions.get(`${identity}_${status}`) || actions.get('default');
  3.             action.call(this)
  4.         }
复制代码


把两个条件拼接成字符串,并通过以条件拼接字符串作为键,以处理函数作为值的 Map 对象进行查找并执行。

这种写法在多元条件判断时候还是很好用滴。

先这样吧,发给玄武大佬。

“嗯,不错,小不二你进步不少

“谢谢大佬夸奖”

“还有,虽然目前用户没有提,但是万一哪天金主粑粑,想让 student 访客下,status 1到3逻辑一样怎么办?这个不着急,你先想想吧。”

“好的好的,我先把手头的刚才的开发完成,后续再来优化。”一看到不着急,小不二悬着的心放下了。

其实这个也好实现,只要在 Object 对象中返回一个 Map 对象就可以了。

不过,先不实现了,我的进度吖...

giphy.gif


美好的一天就这样结束了...
(加班就这样开始了)




                               
登录/注册后可看大图








如果喜欢,别忘了评分


                               
登录/注册后可看大图


这位鱼油,如果喜欢本系列Js帖子,请订阅 专辑☞传送门)(不喜欢更要订阅

评分

参与人数 1荣誉 +4 鱼币 +4 贡献 +3 收起 理由
睦ちゃん她爹 + 4 + 4 + 3

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-1-25 16:36:16 | 显示全部楼层
我还没有学到那个地步呢。你们太厉害了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-1-25 21:25:36 | 显示全部楼层
龟速学习中
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-1-30 19:28:49 | 显示全部楼层
666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-2-10 15:56:07 | 显示全部楼层
11
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-2-16 11:40:07 | 显示全部楼层
本帖最后由 TCY 于 2019-2-16 11:42 编辑

你还是加到设计模式中吧……好久没更新了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-2-28 19:10:20 | 显示全部楼层
0
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-3-8 14:58:41 | 显示全部楼层
看看内容
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-12 17:44:04 | 显示全部楼层
朕想知道
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-3-15 15:15:10 | 显示全部楼层
打卡打卡,从0000到0240利用上班空闲时间看完了一遍不二大神写的JavaScript庖丁解牛,虽然真正记住的可能还不到百分之一,不过还是有很多启发。等后面小甲鱼老师的视频出来再深入了解,。,
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-4-8 09:57:00 | 显示全部楼层
嘤嘤嘤
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2019-5-26 16:58:17 | 显示全部楼层
666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-7-3 12:13:23 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2019-7-11 16:20:50 | 显示全部楼层
看看潜规则,hhh
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-1-17 22:03:48 | 显示全部楼层
hahaha
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2020-2-29 22:45:06 | 显示全部楼层
?
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

头像被屏蔽
发表于 2020-4-2 23:20:31 | 显示全部楼层
提示: 作者被禁止或删除 内容自动屏蔽
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-5-8 10:16:42 | 显示全部楼层
6666
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-5-12 11:04:44 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2020-5-22 13:58:06 | 显示全部楼层
1
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-3-29 20:35

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表