乐趣区

关于前端:我是如何开发维护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,心痛中。
退出移动版