不会吧不会吧,你不会还不知道这些提高JS代码质量的骚操作吧?
1 评价代码质量指标
1.1 健壮性
程序的健壮性是指程序在执行时,在局部发生错误的情况下,不影响整个系统的运行,而且我们能够很快的定位到发生错误的位置。我们通常使用以下几种方式来保证程序的健壮性。
1.1.1 参数校验
请看下面的代码:
在上边的代码中我们调用handler进行运算时没有得到正确的结果,我们的第一反应 肯定是handler中出现错误了,但是事实上是因为我们调用函数a()的时候少传了一个参数,导致的错误。这导致我们找bug很慢,所以,函数a()是不健壮的。我们可以修改代码如下:
上边是对基本类型的参数进行参数校验,那么我们如何对对象类型的参数进行校验呢?答案是选项合并,这种方式在vue,webpack,react中也经常被用到。请看下面的代码:
类的校验:
1.1.2 try, catch
try ,catch一般是在预计某段代码可能会出错(比如浏览器兼容问题,)时,就可以把这段代码放入try内,然后当出现错误时就会自动去执行catch里的代码。比如读取文件的时候可能会发生文件找不到错误,这时候我们就可以把文件读取操作,放到try ,catch中。
1.1.3 控制变量权限
有时候我们希望一个变量,只能被读,不能被修改,我们该如何做呢,答案是使用Object.defineProperty() 方法,它可以直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。请看下面的代码
1.2 可扩展性
可扩展性是指当需要为程序添加新的功能时,对其他模块的影响和添加的代价很小,可以从下面几个方面提高程序的可扩展性。
1.2.1 模块分明
请看下面的代码:
上边的代码可扩展性不好,比如我们要改需求,在a+=10;和a-=2;之间添加a%=10,就得先去找代码在哪,然后再改代码,修改之后还会影响原来的代码。所以我们可以把每个操作都变成一个模块,这样你要加入一个操作就会非常容易,而且不影响其他模块。修改代码如下:
变成上边的代码后,我们再进行添加新的模块会非常方便,而且不影响原来的模块,后期维护代码的时候也会更加轻松。虽然这种方式,没有一开始那种方式代码量少,写代码的时间也会更长,但我认为这是值得的,因为后期维护的时候会为我们节省更多的时间。如果你维护过一些老的代码,你就会明白,易于维护的代码是多么的重要。
1.2.2 高内聚低耦合
耦合就是多个模块之间的依赖关系,而低耦合指的就是多个模块之间的依赖要尽可能的低。耦合度越低,那么意味着对其他模块依赖度越低,尽量在其他模块出问题的时候,自己开发的模块不会出问题,少依赖别人。一般降低耦合度常用的方法是加层数。实例代码:
除此之外一些设计模式,也可以帮我们降低代码的耦合度,如观察者模式,命令模式等。
1.2.3 用添加代替更改
当需求改变的时候,我们最好加上一段代码去实现新加的功能,而不是去改变原来的代码。
1.3可读性
1.3.1 变量命名规范
js命名应遵循 简洁、语义化 的原则。变量命名方法: 小驼峰式命名法,前缀为形容词 (函数前缀为动词, 以此来区分函数和变量)。
类的成员命名规范:
1 公共属性和方法: 跟变量和函数命名一样。
2 私有属性和方法:前缀为下划线_, 后面跟公共属性和方法一样的命名方式。
函数 & 方法注释函数(方法)注释也是多行注释的一种,但是包含了特殊的注释要求,具体可以参照参照JSDoc。语法:
/** * 函数说明 * @关键字 */
常用注释关键字:(只列出一部分)
这里只是详细讲解了 标识符命名规范 和 代码注释规范,由于篇幅有限,还有很多其它的规范没有些,大家可以可以参考一下[Airbnb JavaScript Style Guide]。
1.3.2 代码结构清晰
清晰的代码结构,对于后期的维护非常重要,我们通常可以使用,分层和一些设计模式来使我们的代码结构更加清晰,在第二章中我将举一些设计模式的例子,来提高你的代码质量。
2 设计模式
设计模式(Design pattern)代表了最佳的实践,它是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。所以它对提高我们的代码质量真的很有用,我们要站在前人的肩膀上去写代码,设计模式我已经更新了一些,感兴趣的可以去看看。
2.1 用享元模式减少重复代码
当遇到类似的代码时,我们可以使用享元模式,提取它们不同的部分,减少代码量。享元模式基本结构:
2.2 策略模式/状态模式
策略/状态模式的目的是为了优化if-else分支,当代码if-else分支过多时,可以考虑使用策略/状态模式。策略模式基本结构:
状态模式基本结构:
2.3 装饰器模式
装饰器模式模式动态地扩展了(装饰)一个对象的行为,同时又不改变其结构。装饰器模式的目的是为了扩展对象,所以当有一个方法需要去扩展,但又不好去修改原来的方法,可以使用装饰器模式。装饰器模式结构:
eg:
在Vue数组的双向绑定中就用了这种模式。
3 总结
本文介绍了一些评价代码质量的指标:健壮性,可扩展性,可读性。同时举了一些使用设计模式(享元模式,策略、状态模式,装饰器模式)提高代码质量的例子。
源码整理完毕,加群:1136192749 获取
原作者:Albert Yang