前言

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

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

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

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

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

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

代码现状

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

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

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

封装性

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

最起码有3个基础的问题

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

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

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

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

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

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

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

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

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

其他细节

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

改进后

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

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

改造后的好处

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

变量命名不规范

大量的命名不规范：

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

maigcNumber 到处使用

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

比如大量这种代码：

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

组件不具有通用性

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

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

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

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

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

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

大量相似文件

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

我该怎么办

基础原则

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

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

我做了什么

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

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

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

不应该做什么

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

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

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

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

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

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

共勉

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

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

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

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

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