我是如何开发维护8千多行代码组件的
时间:2022-07-26
本文章向大家介绍我是如何开发维护8千多行代码组件的,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
我是如何开发维护8千多行代码组件的
背景
- 我在明源云,我们是国内最大的地产
Saas
平台 - 任何系统都会有遗留项目,越大的公司就会有越多这样的项目
- 组件行数多,原生事件多,技术栈刚从
React0.14
版本升上来,UI
组件库也是大量使用了老旧的组件库 - 业务极度复杂,极度复杂!
为什么会大量出现8K多行甚至1W行的代码
- 单个页面的业务逻辑设计太过复杂,没有拆分
- 实现业务逻辑时候没有考虑组件拆分,或者组件拆分不够细致
- 组件不够纯粹,作为一个组件,最好的状态就是一个
小孩子
,父母(父组件
)告诉它怎么做,它就应该怎么做(即具体业务逻辑由组件内部实现,但是实现哪种业务逻辑应该让父组件控制) - 存在大量计算逻辑而且纯函数封装度太低,如果纯函数封装度高,可以用
FAAS
甚至Serverless
来解决这个点
如何维护迭代
- 熟悉业务的人梳理核心业务主线,毕竟
8K
多行的代码,不可能全部梳理清楚了。但是主线要梳理清楚 - 逐渐重构,不断重构。听起来一句大话,其实大道至简,你今年用最新的技术,三年后可能看起来就是一个很老旧的技术。只有不断、逐渐、从局部到整体的重构才能赶上时代的潮流,拥有不错的开发体验
- 业务逻辑千丝万缕,像我这次一共写了
500行
代码不到,引出了50
多个BUG
,而这个组件内部只是加了十行代码(仅仅一个函数). 跟这块业务不熟悉也很有大关系,一定要梳理输出整个核心业务主线文档。 -
严格遵循单向数据流,不使用脏数据,这是底线
。老组件8K多行大量的脏数据,例如:
this.state.xxx = 'ooo'
- 组件拆分,不能超过500行。严格来说,一个组件不能超过200行代码,我在公司是做了
webhook
检测的,只要超出就会企业微信全体通知并且@对应的代码推送人
. - 剔除副作用,尽量封装无副作用的纯函数,本来业务不应该放在前端处理,这也是为了未来几年可能
FAAS
和Serverless
化做准备 -
坚信祖传的代码是稳定的
,不要试图去修改祖传的代码,存在即合理,如果写代码的人已经离职,一定不要触碰他的代码.有的代码写出来看起来很难阅读,很不合理,但是肯定有他的实现逻辑。(除非你有百分百的把握,但是谁又能说绝对呢?一次大的线上事故,特别涉及到金额的时候,不是一个普通开发能抗住的)
最后
- 这段时间没写文章,主要是公司比较忙,还有学习计划尚未完成
- 临近国庆,最近就不发文了,下个月会输出
1-2
篇 - 现在,我要去修车了,前天晚上刮到一辆奥迪A6,心痛中。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法