持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

前言

该篇文章，源于在开发中，在页面中新增一个提示条，可却牵一发而动全身，导致页面布局错乱，因此记录下问题及解决方案。 原布局图例如下：

新改动图例如下：需要在按钮上方新增一个提示条。

糟糕的现状

在原有的布局中，如果增加这个按钮提示条，会导致上方的黄色提示条被覆盖，然后查看对应的代码，发现提示条的定位位置是写死的。

看上图的代码结构。提示条和底部btn分别是两个组件，但是这两个组件在页面中的布局都是在组件内设定的，

问题

• 组件无法进行很好复用。由于组件内存在fixed相关的定位，因此无论从何处引用该组件，其位置都是固定死的，除非项目中其他页面对该组件的使用也是固定的位置
• 扩展性差，例如在中间新增一条提示栏，这个时候就影响到黄色提示条的布局，需要对其进行改造。

优雅的优化

像上面的问题，我们要改造的原则就是，布局由页面来控制，组件只包含功能及内部布局，不涉及页面中的位置布局。

重新布局

理由

• 首先我们将组件内的fixed的定位布局删除掉，组件只具备内部布局及相应功能，所有布局都有页面中的结构来控制。
• 然后，我们在页面中对使用的组件，新增一层布局的dom结构，也就是图例中的1，这样布局跟组件分离，使组件有了很强的扩展性。

思考

• 大多数情况，作为开发人员很少有机会参与从0到1的项目，大多数都是在前人代码的基础上进行开发，这种项目很少有机会说完全重构，一是成本高，而是风险大。因此，假如我们是一个有追求的coder，那当我们遇到一些不合理的，或实现不太优雅的代码时，我们就做到在风险可控的情况，进行渐进式的重构，一点点的将代码设计的更健壮更具扩展性，而不是屎山上加屎，让项目越来越难维护。
• 组件设计上，我们有意抽离一些通用的组件为了复用或为了功能解耦，因此抽离的组件一个核心点是可复用，另一个核心点是功能逻辑内聚。基于本篇文章来说，抽离组件是为了复用，可抽离的组件天生具备了样式的固定性，也就是无论哪里引用它都固定在一个位置，而这样也就不具备了复用的可能。想要使用还需要传递属性进行差异化控制，这就更不太优雅。因此，我们在抽离组件上，尽量的不要将外部的布局样式内化到组件内，而是在在使用页面进行布局的控制，组件仅仅具备这个组件该有的功能与样式。
• 发现问题，尝试去解决问题，而不是绕过去，或者在原有糟糕的基础上进行迭代，而是应该充分考虑，将问题从根本上解决，而不是一个劲的打补丁，只有这样我们才能成长。

总结

虽然本篇记录的问题是很小的一点，但有些思想还是很有价值的，就是我们不要写什么都是一把梭，只是写出来是不够，怎么写的健壮与可扩展性好才是我们的追求。高内聚，低耦合说起来觉的是一个很大或者复杂性强的项目或逻辑才能使用，其实这里这个布局问题也是一个高内聚，低耦合的实践。 这样一点点的提升与积累，我们编码水平才能不断提高，而不是一年经验3年重复使用。

希望本篇文章对阅读的你有所帮助。