近期重构前端代码,记录下走过的坑
重构代码一般有两种方式--减法和加法
顾名思义“减法”一般是在原有项目的基础上删除修改文件,但是存在的问题是,分支管理的问题,一旦在重构代码时原有系统又更新了,就要把原有系统的代码更新,但是分支合并或者切换的时候回出现问题(推测删除文件造成)并且删除后的代码需做回归测试,risk较大
“加法”--搭建一个全新的项目,在这个新的项目上,将原有项目的代码加在新的项目上面,时间周期较长,risk较小
代码结构要简洁明了
将一些组件的配置用一个config文件封装在一起,使用时import即可。优化项目目录结构,切记不可使用相同的文件名字(不同文件夹下均使用index.vue),文件多的时候就不容易了解这个属于是哪个组件,不利于后续开发
将使用的常量或是一些配置的api域名统一处理
api的封装(必须),一般都是封装好的,不做概述
封装组件
vue component的封装可以使用slot语法,将一些用户自定义的内容显示在对应的位置
在配置默认的props时要注重props的写法:
export const props = {
addName: {
type: String,
default: ''
},
isShow: {
type: Object, // 若props为复杂数据类型需用function返回对应的类型
default: function(){
return {
aa: true
}
}
}
}