Yard


前端组件化-模块化-模板化

最近实践了一些在React基础上的代码封装方式,在此做个记录

我分了三个层次来封装我们的React代码

  1. 组件化
  2. 模块化
  3. 模板化

1. 组件化

这在React里面是最基础一部分。对于组件化,大家应该都不陌生,但是组件化应该封装到什么地步呢?该不该和数据耦合?该不该和业务耦合?我想大部分人还是有所疑惑的。

我给出我的答案,我认为最基础的组件化里应该封装成最小粒度,也就是说它和数据以及业务是需要解耦的,基本上就是stateless的组件,只做基础样式和基础行为。这个时候可以单独将这一部分的组件抽离至业务之外,形成团队内部的组件库,发布至私有npm仓库,所有其他项目都可以使用这个仓库。

2. 模块化

模块化做的事情就是耦合数据,这一类的 class 大部分都存在自己的 state,基于上面的组件,嵌入数据,形成这里的模块。

我举个例子,比如要写一个省市区的三级联动组件,那么联动组件就是一个最底层的“组件”(它可以是二级联动、三级联动甚至更多),而省市区的三级联动组件是一个基于“组件”之上和省市区数据耦合的“模块”。

“模块”具有自己的状态,可以让使用者不去留意内部的实现,只需要关注自己的功能。

3. 模板化

有了上面的“模块”内容,我们就可以耦合我们的业务,构建我们的统一模板。众所周知,在后台系统里面,最多的就是对于各类数据表的crud了,那么如何最快的写这个crud呢?

我们将列表系统分为五个区块:

  1. 页面名称区域
  2. 新建数据按钮区域
  3. 筛选区域(由“模块”搭建)
  4. 列表区域(由“模块”搭建)
  5. 其他冗余数据展示区域

将详情修改系统分成三个区块:

  1. 页面名称区域
  2. 数据展示以及修改区域(由“模块”搭建)
  3. 数据保存或其他操作区域

并且通过和后端约束接口规范,我们可以将整个的前后端数据交互也封装至当前模板。

这样一来,最后我们只需要将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,
  },