刚接手，我就骂娘了
我不是说Eui这个框架不它是真的稳，像Kibana那种老牌应用用的都是它。但架不住那帮刚毕业的愣头青瞎几把用。我刚接手这个新项目，一个老家伙跑路了，留下一个用Eui搭起来的屎山。
项目里头，同样的按钮样式，能写出十几种不同的代码来。有的直接用EuiButton，有的套了一层div，有的甚至把内联样式写得密密麻麻。这哪是写代码，这是在挖坑。每次PM提需求，让我改个颜色或者调整一下间距，我他妈都要去翻好几个文件，改动起来跟拆炸弹一样，生怕一不小心页面就崩了。
我一看这不行，这代码质量不提升，后面我们组的人都得累死在工位上。我就决定，必须停下来，把这个烂摊子彻底收拾一遍。
解决问题，从结构开始
要用Eui把代码质量提上去，最关键的一点就是：千万别直接用它的基础组件。Eui的基础组件功能太全，留下的口子太多，你不用点约束，新人肯定乱写。我的第一个实战技巧就是“组件二次封装，统一入口”。
我们是怎么干的？我拉着组里的人，干脆把所有的Eui组件都包了一层，把那些我们项目里根本用不到的属性全给他干掉。
- 定制化主题和样式：Eui的那套默认配色和字号，在我们项目里不一定合适。我把所有跟颜色、间距、字体相关的变量，全部在主题配置文件里统一改了。这样一来，你想在业务组件里瞎写颜色，对不起，代码规范直接给你报错。
- 创建业务专属组件：比如一个带图标的“提交”按钮，我不会让业务开发去拼EuiButton和EuiIcon。我直接封装一个叫
AppSubmitButton的组件，把类型、大小、加载状态都定死。业务代码调用这个组件，传个文本进去就完事儿，其他的参数想传都传不进去。 - 严格定义组件属性：这是提升代码质量最TM有效的一招。把Typescript用起来，给封装好的组件定义Prop接口，哪些是必传的，哪些是可选的，传进来的类型必须是什么，全部写得清清楚楚。这样业务开发写错属性，编译器直接就骂他了，都不用我来骂。
- 利用Eui的Flex和Spacer：以前那帮人布局靠自己写CSS，各种Margin和Padding飞得到处都是。我要求全组统一用EuiFlexGroup和EuiSpacer来做间距和对齐。虽然一开始他们抱怨说要多写好几层组件，但写完之后，页面布局一眼就能看明白，比看那堆CSS舒服多了。
为什么我能这么干？
你肯定好奇，项目进度那么紧，我哪来的时间干这种大动干戈的重构？说起来也挺巧合，当时我们项目的测试环境出了个大纰漏，核心服务直接宕机了三天。公司上下鸡飞狗跳，所有迭代任务都被叫停了。上面领导急得直跺脚，下面技术组的人也没法干活。
我当时一看，正这是老天爷给的机会。我跟领导说，这三天我闲着也是闲着，不如我把前端这堆屎山彻底挖一遍，把基础打扎实了，等服务恢复了，大家跑起来也快。领导当时哪有心思管我干只要我别添乱就行。
我就趁着那三天，没日没夜地把Eui的二次封装框架搭起来了。等服务恢复的时候，我们组的人一看新框架，虽然一开始别扭，但发现写组件效率是真高，不用再担心样式冲突，不用再操心间距问题。所有东西都标准化了。
现在这项目跑得飞快，维护成本降了至少一半。所以说，提升代码质量，有时候不是看你技术多牛逼，而是看你有没有魄力，在项目最乱的时候，停下来，把地基给夯实了。
