前端组件化-模块化-模板化
最近实践了一些在React基础上的代码封装方式,在此做个记录
我分了三个层次来封装我们的React代码
- 组件化
- 模块化
- 模板化
1. 组件化
这在React里面是最基础一部分。对于组件化,大家应该都不陌生,但是组件化应该封装到什么地步呢?该不该和数据耦合?该不该和业务耦合?我想大部分人还是有所疑惑的。
我给出我的答案,我认为最基础的组件化里应该封装成最小粒度,也就是说它和数据以及业务是需要解耦的,基本上就是stateless的组件,只做基础样式和基础行为。这个时候可以单独将这一部分的组件抽离至业务之外,形成团队内部的组件库,发布至私有npm仓库,所有其他项目都可以使用这个仓库。
2. 模块化
模块化做的事情就是耦合数据,这一类的 class 大部分都存在自己的 state,基于上面的组件,嵌入数据,形成这里的模块。
我举个例子,比如要写一个省市区的三级联动组件,那么联动组件就是一个最底层的“组件”(它可以是二级联动、三级联动甚至更多),而省市区的三级联动组件是一个基于“组件”之上和省市区数据耦合的“模块”。
“模块”具有自己的状态,可以让使用者不去留意内部的实现,只需要关注自己的功能。
3. 模板化
有了上面的“模块”内容,我们就可以耦合我们的业务,构建我们的统一模板。众所周知,在后台系统里面,最多的就是对于各类数据表的crud了,那么如何最快的写这个crud呢?
我们将列表系统分为五个区块:
- 页面名称区域
- 新建数据按钮区域
- 筛选区域(由“模块”搭建)
- 列表区域(由“模块”搭建)
- 其他冗余数据展示区域
将详情修改系统分成三个区块:
- 页面名称区域
- 数据展示以及修改区域(由“模块”搭建)
- 数据保存或其他操作区域
并且通过和后端约束接口规范,我们可以将整个的前后端数据交互也封装至当前模板。
这样一来,最后我们只需要将curd的配置项写入,通过路由名称识别配置项,再由配置项生成我们想要的页面,大大提高crud效率。 一下是一个配置项demo:
{
pageName: '买手上升榜',
api: 'XXX',
dataName: 'config',
data: {
title: '',
count: 0,
enable: true,
},
config: () => [
{
name: 1,
container: [
{ type: 'input', title: '榜单名称', target: ['title'], test: value => !!value },
{ type: 'number', title: '买手数量', target: ['displayCount'], test: value => value > 0 },
{ type: 'switch', title: '是否启用', target: ['enable'] },
],
},
],
handleData: data => data,
},