前言：

其实很早很早我刚入行前端时就听当前的前端负责人说页面组件化时每个组件不能超过500行代码，这样更好维护。但从业几年后做的项目足够多之后，慢慢觉得事实并不绝对。根据不同的业务需求对页面进行合理的设计才是最重要的，所以我一直习惯对某个模块整体交互设计理清楚后才进行组件化设计，而不是一上来就照着ui写页面根本不管逻辑，写完后再慢慢调逻辑，这其实就是相当不合理的。

过度组件化案例：

最近业务需要被临时安排去接手某个其它同事负责的项目，并且上去添加一些小功能，我对整个大模块进行分析代码之后发现，因为页面逻辑有一点点的复杂所以分了很多很多组件出来，因为有些有逻辑互动的组件不是兄弟组件、不是父子组件也不是爷孙组件，这样根本不知道怎么传参，然后他模块里面所有组件用vuex传参，也就是组件一把数据存放到vuex然后组件二监听vuex的某个属性。我是第一次看到这样写的，这明显就是过度组件化过度的案例。

他是这样放到vuex

然后需要的地方这样拿 这样处理数据一个两个参数还好，参数多的时候就会很乱，这仅仅是一个小模块而已就过于复杂了。

以下图为例：我理清大概逻辑方向是

• 区域1能tab切换，任意点击区域1能联动区域2的数据展示

• 并且区域2有一堆弹窗用来处理逻辑

• 并且区域2搜索能联动区域3的数据展示

怎么样，很简单的页面吧？但它的设计思路明显就是按原型做没考虑逻辑交互，联调时才发现不好传参最后只能用vuex传，小小一个页面一堆参数（大概二十个）全写vuex里面传来传去看的人头大，组件化是方便维护却起了反作用。

我个人的页面设计思路：

按这个页面为例：

个人推荐方案：区域1为父组件，区域2为子组件，区域3也是区域1的子组件，然后各种独立的弹窗依赖在各个组件上面，哪怕弹窗和顶层区域1有关联也可以爷孙传递相当好处理。

小结：

其实这真的是非常基础的东西，但接手过很多项目，发现往往简单的页面设计很多人都做不好，例如不适配业务逻辑组件化和为了组件化强行过度拆分。

主要想表达的是，项目动工前一定要做好规划做好设计才动手能事半功倍。就像是从零开始的一个项目，需要去搭框架的时候就应该根据业务场景考虑以后所有可能的情况了，要不然可能会是一个大坑。

以上都是个人刚好在工作中遇到然后突然而来的一些想法，就顺手写出来分享一下了，也不知道对不对，大佬们有好想法也可以分享一下。