如何区分基础组件和业务组件

@GuoYongfeng 2017-03-26 02:10:11发表于 iuap-design/blog

郭永峰,2017-03-26

前端在组件化的实现道路上一直都是前仆后继的,各种框架的解决思路层出不穷。时至今日,伴随着类似 React 、Vue 等优秀的前端框架出现,组件化的解决方案几乎成为 webapp 开发的标准,尽管实现的方式不同,但理念都趋同。

我们需要从设计时就从组件化角度的思考,我们作为开发者,需要从这些众多组件中提取出哪些是基础组件,哪些是业务组件,哪些组件可被复用等。

基础组件

基础组件主要指那些本身不包含任何业务逻辑、可以被轻松复用的组件,例如 picker、timepicker、toast、dialog、tree 等等。

基于 React 或是 Vue 实现一套通用的基础组件库,打包所有基础组件,可以让开发使用非常方便。而对于基础组件的通讯,基本就是往组件传入 prop 即可,组件内部的状态操作和事件监听在组件内部完成。

业务组件

业务组件主要指那些包含业务逻辑,也包括一些与后端接口通讯的逻辑。业务组件会包含若干个基础组件,通常我们会把一些业务逻辑的数据通过 类似 Redux 和 Vuex 等统一的状态管理库管理起来,然后组件内部读取数据和提交对数据修改的动作。

小结

基础组件通常都是可复用的,部分业务组件同样可复用,它们的 UI 和业务逻辑相似。我们可以把单个可复用的业务组件单独发布到 npm 私服上(或者内部 Gitlab 维护),需要使用的业务线依赖即可(不包含业务机密的业务组件也可直接放到 Github )。