本文摘自PHP中文网,作者hzc,侵删。
John Au-Yeung
来源:medium
译者:前端小智
点赞再看,养成习惯本文
GitHub
https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料。欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西。
JavaScript 是一种易于学习的编程语言,编写运行并执行某些操作的程序很容易。然而,要编写一段干净的JavaScript 代码是很困难的。
在本文中,我们将介绍一些优化条件表达式相关的重构思路。
分解条件表达式
我们可以将长的条件表达式分解成有命名的短小条件表达多,这样有利于阅读。例如我们可能会写这样的代码:
1 |
|
上面的代码太过冗长了,不利于阅读,我们可以把它分解成几个短小且有名字的条件表达式,如下所示:
1 2 3 4 |
|
合并条件表达式
与上面相反的,如果有多个简短的条件表达式,则可以将它们合并成一个。例如我们可能会写这样的代码:
1 2 3 4 |
|
我们可以这样合并:
1 2 |
|
因为表达式很短,即使把它们组合在一起也不会使表达式变长,所以我们可以这样做。
合并重复的条件片段
如果我们在条件块中有重复的表达式或语句,则可以将它们移出。例如我们可能会写这样的代码:
1 2 3 4 5 6 7 |
|
我们可以把重复的内容移到条件表达式外面,如下所示:
1 2 3 4 5 6 |
|
这样,我们不必重复不必要地调用complete
函数。
删除控制标志
如果我们在循环中使用了控制标志,那应该会这样代码:
1 2 3 4 5 6 7 |
|
在上面的代码中,done
是控制标,在condition
为true
时,将done
设置为true
停止while
循环。
相对于上面,我们可以使用break
来停止循环,如下所示:
1 2 3 4 5 6 7 |
|
用卫语句代替嵌套条件
卫语句就是把复杂的条件表达式拆分成多个条件表达式,比如一个很复杂的表达式,嵌套了好几层的if-then-else
语句,转换为多个if
语句,实现它的逻辑,这多条的if
语句就是卫语句。
嵌套条件语句很难阅读,所以我们可以使用卫语句代替它们。例如我们可能会写这样的代码:
1 2 3 4 5 6 7 8 9 |
|
我们可以这样优化:
1 2 3 4 5 6 7 8 9 10 |
|
在上面的代码中,卫语句是:
1 2 3 |
|
和
1 2 3 |
|
如果这些条件为假,它们会提前返回函数,这样,我们就不需要嵌套了。
用多态替换条件
我们可以使用switch
语句为不同种类的数据创建相同的子类,而不是使用switch
语句对不同类型的数据执行相同的操作,然后针对对象的类型使用不同的方法。
例如我们可能会写这样的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
我们可以这样重构:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
当switch
语句很长时,应该为不同类型的对象定制case
块。
采用空对象
如果我们重复检查null
或undefined
,则可以定义一个代表该类的null
或undefined
版本的子类,然后使用它。
例如我们可能会写这样的代码:
1 2 3 |
|
我们可以这样重构:
1 2 3 4 5 6 |
|
然后,我们将Person
设置为null
或undefined
的对象属性,而不是将其设置为NullPerson实例。
这样就无需使用条件检查这些值。
推荐教程:《JS教程》
以上就是JavaScript的重构技巧的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《js》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者