专栏首页跨平台全栈俱乐部我是如何开发维护8千多行代码组件的

我是如何开发维护8千多行代码组件的

我是如何开发维护8千多行代码组件的

背景

  • 我在明源云,我们是国内最大的地产Saas平台
  • 任何系统都会有遗留项目,越大的公司就会有越多这样的项目
  • 组件行数多,原生事件多,技术栈刚从React0.14版本升上来,UI组件库也是大量使用了老旧的组件库
  • 业务极度复杂,极度复杂!

为什么会大量出现8K多行甚至1W行的代码

  • 单个页面的业务逻辑设计太过复杂,没有拆分
  • 实现业务逻辑时候没有考虑组件拆分,或者组件拆分不够细致
  • 组件不够纯粹,作为一个组件,最好的状态就是一个小孩子,父母(父组件)告诉它怎么做,它就应该怎么做(即具体业务逻辑由组件内部实现,但是实现哪种业务逻辑应该让父组件控制)
  • 存在大量计算逻辑而且纯函数封装度太低,如果纯函数封装度高,可以用FAAS甚至Serverless来解决这个点

如何维护迭代

  • 熟悉业务的人梳理核心业务主线,毕竟8K多行的代码,不可能全部梳理清楚了。但是主线要梳理清楚
  • 逐渐重构,不断重构。听起来一句大话,其实大道至简,你今年用最新的技术,三年后可能看起来就是一个很老旧的技术。只有不断、逐渐、从局部到整体的重构才能赶上时代的潮流,拥有不错的开发体验
  • 业务逻辑千丝万缕,像我这次一共写了500行代码不到,引出了50多个BUG,而这个组件内部只是加了十行代码(仅仅一个函数). 跟这块业务不熟悉也很有大关系,一定要梳理输出整个核心业务主线文档。
  • 严格遵循单向数据流,不使用脏数据,这是底线。老组件8K多行大量的脏数据,例如:
this.state.xxx = 'ooo'
  • 组件拆分,不能超过500行。严格来说,一个组件不能超过200行代码,我在公司是做了webhook检测的,只要超出就会企业微信全体通知并且@对应的代码推送人.
  • 剔除副作用,尽量封装无副作用的纯函数,本来业务不应该放在前端处理,这也是为了未来几年可能FAASServerless化做准备
  • 坚信祖传的代码是稳定的,不要试图去修改祖传的代码,存在即合理,如果写代码的人已经离职,一定不要触碰他的代码.有的代码写出来看起来很难阅读,很不合理,但是肯定有他的实现逻辑。(除非你有百分百的把握,但是谁又能说绝对呢?一次大的线上事故,特别涉及到金额的时候,不是一个普通开发能抗住的)

最后

  • 这段时间没写文章,主要是公司比较忙,还有学习计划尚未完成
  • 临近国庆,最近就不发文了,下个月会输出1-2
  • 现在,我要去修车了,前天晚上刮到一辆奥迪A6,心痛中。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用React和Node.js制作音乐类App的一次总结

    Peter谭金杰
  • 1500行TypeScript代码在React中实现组件keep-alive

    例如后端用到的Kafka , redis , sql事务写入 ,Nginx负载均衡算法,diff算法,GRPC,Pb 协议的序列化和反序列化,锁等等,都可以在前...

    Peter谭金杰
  • Codeup ,一个全新的适用于企业级代码管理的平台

    源自阿里巴巴自研代码平台,支撑百万级代码库和数万工程师协作。自适应容量分配,让你的业务增长不再受代码库数量限制。同时为了保障企业代码安全,提供企业间数据隔离及企...

    Peter谭金杰
  • [译] React 中的 dumb 组件和 smart 组件

    原文:https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a6...

    江米小枣
  • react-02

    用户2337871
  • Vue 3 提供与注入

    通常,当我们需要将数据从父组件传递到子组件时,我们使用 props。想象一下这样的结构:你有一些深嵌套的组件,而你只需要来自深嵌套子组件中父组件的某些内容。在这...

    公众号---志学Python
  • Vue 与 React 父子组件之间的家长里短

    FinGet
  • react的一些思考

    在做好第一个需求之后,我接到了一个react写的产品,这让我异常的兴奋,终于能写react了

    windseek
  • 高级 Angular 组件模式 (1)

    Angular到现在已经到5.x的版本了,对于MVVM框架我首先接触的是angularjs后来又转为react,之后换了工作因项目技术栈的原因又转换到之前的an...

    littlelyon
  • vue父组件中获取子组件中的数据

    <FormItem label="上传头像" prop="image"> <uploadImg :width="150"...

    蓓蕾心晴

扫码关注云+社区

领取腾讯云代金券