前端接手 “💩山” 项目后,我做的一点小优化

·  阅读 10594

前言

最近接手了公司前端Taro的的多端项目。搞了2-3个星期。开发过程中一直很激荡。

客观上说,这是我接手的最乱的项目之一。组件和封装都没做好。导致我接了需求以后。对着代码看了1-2天还没真正敲第一行有用的代码。

其实开发过程中,很多事情是无法避免的。

因为每个人的代码风格和代码实现思路不一样。你不可能让别人写出符合你阅读的代码。

所以,代码如果没有维护措施,就会一直越来越难以维护。

但是,无论你的代码风格如何,无论你的代码思路是什么样的。总归是要遵守一些编程的基本素养,和一些共识的。

代码现状

这个项目,有好的地方,也有不好的地方。

好的地方在于,代码里面用了typescript。对各种参数的控制比较好。

差的地方,最大的缺点,就在于组件的封装性。

封装性

代码封装性很差。例如接收的一个页面是这样的:

image.png

最起码有3个基础的问题

组件内部api请求。暴露在父组件

父组件里出现了大量的子组件的细节。比如api请求,是不需要在父组件里出现的。这个细节应该隐藏在子组件里。

大量子组件的css,暴露在父组件

至于每个子组件的样式细节,是完全不需要在父组件里看到的。而且多个子组件的样式细节也容易混淆,代码无法分割,我想删除一部分代码的时候,发现都不知道哪些可以删,哪些不能删。

子组件的显示和隐藏的逻辑,保留在父组件

这样看,如果是引用了多个子组件,每个儿子组件都有显示和隐藏的话,那么父组件里就要有5个visible变量。

这个对于业务开发是非常不友好的。

子组件的数据组装转换细节,保留在父组件

子组件里拿到了什么数据,怎么格式转化和处理,是子组件自己的事,完全不需要保留在外面。

其他细节

  • 大量引入基础细节,导致import那部分代码非常庞大。
  • 大量的数据子组件的逻辑处理,保留在父组件,但是我真的要进行迭代的时候,每个细节都不敢放过,就怕错改或者错删一些东西。

改进后

最后,经过一些处理,父组件里就剩下这么点代码:

image.png

可以说代码简洁,每个子组件的细节都放到自己内部处理。

改造后的好处

我想复用一个组件的时候,不需要再把visibe,api,css等一大堆的东西再引入一遍。正如我改进后的代码,非常简洁,可维护性大大提高。

变量命名不规范

大量的命名不规范:

比如: 4-5个字的中文,直接用了4-5个首字母进行拼装。最后就导致变量是什么意思完全不明白。

maigcNumber 到处使用

大量使用了magicNumber。magicNumber,这个命名本身就很魔幻。用的时候知道是什么意思,过几个月再来看,完全不知道了。

比如大量这种代码:

image.png

这个对后续维护来说,非常耗时,还需要花一遍时间去整理每个变量的对应关系。

组件不具有通用性

每个组件内部,带有大量的不通用的业务细节。

比如,一个选择框。里面出现了order、compay等相关的逻辑判断。

这样做的直接后果,就是这个select,以后就只能给这一个业务使用。其他地方如果还有一个长得差不多的select,你只能再复制一份,把自己的不通用的业务逻辑再写在里面了。

然后就发现,代码里出现了大量的,看似一模一样的select。每个select都有进行了一些业务逻辑判断。

所以,初学前端的同学,最好有机会自己实现一些基础的,可复用的组件。

可以模仿antd或者element来编写。

大量相似文件

很多组件都懒得封装,很多文件看着结构是一样的,仅仅是少数变量不同。

我该怎么办

基础原则

其实想做的内容很多,因为我心里有一套自己的基础代码规范:

  • 我写的代码,别人可以很轻松的删除,不用担心影响其他部分的业务逻辑
  • 我写的代码,别人只需修改少数几行,就可以达到代码的复用性,极致丝滑。
  • 我写的代码,别人只需要很少的时间,就可以完全读懂每个模块如何划分,后续修改的时候,应该该哪几行就行。

我做了什么

简单来说,就是做了一件事情:代码的封装。

封装了2个最通用的组件,节省了本次迭代大量的时间。

每个组件的细节都缩到自己的文件里,不需要让其他人看到组件的具体细节。

不应该做什么

样式你可以自己优化,自己修改。封装细节,可以逐步调整。

但是有2点,不建议修改。

  • 数据的传递过程。保持其数据的格式。

现在前端都是数据驱动的,数据格式更改以后,会引发大量的修改。如果现有项目的格式很奇怪,看着不舒服,没关系,能保持就保持。顺着毛发的生长方向去摸,就不容易扎手。

  • 本次迭代不涉及的地方,不要去修改。

别想着一次性把代码变成你完美的类型。我觉得大部分项目都是工期紧张的,你能把本次迭代的内容写的够完整,够整洁,对后面的人来说,已经是尽了最大的责任了。

共勉

不要图省事,代码不整理,每次迭代都在代码上留下一大堆烂摊子。

看似需求都开发完了,验收也通过了。

但是后面要改一点小东西,你自己又要花大量的时间,别人更是要花成倍的时间去整理你的代码。

项目工期紧,也不是不规范写代码的理由啊。

项目工期紧,更要注重代码的可复用性。

收藏成功!
已添加到「」, 点击更改