组件开发和设计

Question

前端开发已经几年了，对于业务场景中的组件开发也有自己的一些心得。平时开发中遇到的痛点和疑惑之处也常常令我烦躁。因此下文将谈谈我对组件开发和设计的理解。

1. What？Why？

组件化就是将业务逻辑进行抽离，将不同的业务逻辑抽离成不同的文件，避免代码的耦合，方便复用和维护。

1.1 抽离，降低耦合

平时开发中接手和维护旧代码，遇到上千行的组件，整个人都快要昏厥了。

举个例子，常见的表格数据展示页面会伴随着相关的数据操作。不同的操作往往会有不同的数据和接口处理，这个时候将对应操作的弹窗抽离为单个组件，将相关的数据隔离在组件中，对主组件的影响尽量降低是比较好的做法。

反例则是将数据的新增，编辑等弹窗操作，状态都维护在主页面中。后期的需求变更和数据更迭会让当前页面的逻辑越来越混乱。

1.2 复用，DRY

复用其实大家都很能理解，平时使用的 UI 库都是复用的组件。对于平时开发的组件，我习惯分为业务组件和通用组件。

通用组件就是基本的组成元素，例如表单，按钮等。对于我们的业务系统，沉淀出自己的通用组件库，对于业务设计系统的一致性有很大的用处。如果一个 app 的各种按钮和输入都不一致的话，可能没什么用户想去使用。

业务组件就是针对当前业务的组件，例如开发时需要付款码弹窗，好的方法是抽离为一个独立的组件，在不同需要调用支付的地方进行使用，而不是在每个支付的地方都重写相关的逻辑。这样后续更改付款码的逻辑，例如接口调用或者校验之类的都十分方便。

整个世界都是熵增的，再基础的业务随着不断的的迭代，都会变得越来越复杂。作为开发人员，应该严格要求自己。对于新开发的功能，要想如果移除这个功能所需的时间和代码改动是否合理，当前的结构是否满足新的需求，这些都是需要去好好思考的。开发时间和开发质量很多时候并不是取舍的问题，在屎山上拉屎是避免不了的，但是在前期可以避免但是为了省事而挖更多的坑简直就是垃圾。

2. How？

开发人员如何去拆分组件呢？我的方法是找 关系

1. 以页面作为基本单位，如果几个页面都有相同的部分，那么可以考虑抽离公用；
2. 如果某个部分的业务逻辑相对独立，只需要当前页面提供很少的信息，那么请抽离。
3. 细化组件的功能，不要负责太多的逻辑。不同场景对应不同的组件，比拥有不同场景的组件要好的多，UI 要公用，逻辑要少混用。

其实组件拆分并不麻烦，不同的开发人员有不同的理解。最好的准则就是 好读，好改 。

3. 在框架上的体现

前端的框架有很多，都支持组件化的开发。由于框架本身的实现原理和设计风格不一样，我们在用不同的框架进行开发时也会有对应的开发心得。

每个框架都有自己的特点，组件中的通信，数据传递都有差异。后面我会有对应框架的文章来介绍它们各自的优缺点。