代码质量提升措施
最近学习了一下代码质量提升相关知识，在这里总结记录一下
一、代码质量提升
代码质量提升主要从三个单面去考虑：代码健壮性、可读性、可复用性；
1、代码健壮性： 代码出现bug时，bug不至于让整个程序崩溃，同时bug是能快速定位到的；
加强代码健壮性的措施：
（1）参数层面
//a、直接简单的参数
function add(a, b) {
return a + b;
}
add(2);//因漏传参数，出现bug
// 优化：
function add(a, b) {
if (typeof a === 'number' && typeof b === 'number') {
return a + b;
} else {
throw new Erroe('a or b is not a number')
}
}
//b、配置参数-我怎么确保必传的都传了 ->选项合并
new Vue({
el: 'app'
})
function vue(config) {
var _default = {
el: document,
template: "<div></div>"
}
for (var item in config) {
_default[item] = config[item] || _default[item];
}
}
//c、参数是某个类的实例化对象
function class1() {}
function a(obj) {
if (obj instanceof class1) {
} else {
}
}
// d、 js特有的一个健壮性问题 - 区分类和方法
//这可能是一个构造函数 也可能是一个类
function f1() {
if (this instanceof f1) {
this.a = '正确使用new操作符实例化'
} else {
return new f1();
}
}
（2）易错代码层面
从前端的角度看，有些代码易错，并不是前端能控制的，主控在后端，但前端可以采取一些措施来应对这些易错代码块，比如 使用try catch
try {
//易错代码
} catch (error) {
//写入错误日志
}
//例子以下是后端正常返回数组
var a = {
b: [{ c: 123 }]
}
a.b[0].c; //前端收到后调用数据
//当后端返回的 b为空数组时，前端的a.b[0].c 就会出现bug了（3）变量权限层面
this.$router = {} //不生效但也不报错 有权限，不能修改
//解决：设置get方法
Object.defineProperty(this, '$router', {
get: function () {
return _router;
},
})
//解决：设置权限标签 writable -是否可被重写 enmuerable -是否可被枚举； configurable -是否可被遍历
Object.defineProperty(this, 'a', {
writable: false,
enmuerable: false,
configurable: false
})2、代码可读性
（1）语义化：先想想这个变量的作用 ，然后用中文描述这个变量的作用，然后中文翻译成英文；
（2）命名规范：
a、常量-全大写 eg：const PIE=3.1415926
b、类 -首字母大写 ,-驼峰写法
c、一般变量和方法-小驼峰写法
d、临时变量 -下划线开头 eg： let _name =res.data.name
（3）结构清晰：善用promise解决回调地狱问题 ，使用 async/awit整体结构会更清晰；
async function a() {
await ajax1;
await ajax2;
await ajax3;
}
3、代码可复用性
（1）遵守DRY原则（Don't repeat yourself），即不要写重复的代码；
（2）实现逻辑复用，提取公共代码，比如：功能方法提取为全局方法等；
（3）创建公用模板，在vue项目中，公共组件的提取，就充分体现了这一点；
4、代码可扩展性-解耦
正所谓再牛的程序猿也会写bug，再牛的产品也会改需求，我们在写代码时要考虑到这个产品可能的需求修改方向，不能单纯的满足当前功能需求，就写一些 扩展性比较差的代码，尽量避免产品改一点小的内容，代码就要全部推翻重来的情况
（1）模块分明：划分模块，保证模块职责单一；
（2）耦合度低：模块之间彼此了解的很少，彼此更改不会影响；
（3）合适的扩展技巧
ps：学习过程的简单记录，若有不恰当之处，欢迎指正！
本文地址：https://blog.csdn.net/weixin_40297452/article/details/109238144