乐趣区

Vue-表单读写分发器-编辑详情-的合并解决方案

jiezi

最近我对我公司前端开发过程中的一个痛点，写了一个开源项目，分别对 element-ui 和 iview 的表单组件做了一层扩展，想介绍给大家，望多多支持。

我们公司做的是 to B 的项目，框架选定的 Vue。与互联网 to C 项目比，to B 以管理后台为主，没有太多复杂的交互，基本都是页面的增删改查，唯有一点就是量大！量大！量大！我们遇到了大量的编辑页和详情页。

很明显，上面的编辑页和详情页，除了一个用来编辑，一个用来展示，其他都是一样的。编辑页可以用 element-ui 的表单组件完成，详情页我们还需再开发一套，那么就会有这些问题：

问题

  • 编码问题

编辑页需要写一遍，详情页也需要写一遍，即两遍。

  • 样式问题

编辑页是现成的表单组件，不需要写样式，详情页需要重新写一遍，而且风格要和表单组件保持一致。

  • 维护问题

呵呵，大家都懂的，需求会改动，设计也会改动。当表单项增一项或减一项，编辑页要改一遍，详情页也要改一遍；当表单布局从一行两列改为一行三列，编辑页要改一遍，详情页也要改一遍。

一两个页面还好，但是 to B 项目量大！量大！量大！维护起来非常痛苦。

解决方案

如果把它们写成一个文件会不会更好呢，有同事开始动手，将编辑页和详情页合并成一个文件，通过 v-if 来实现编辑和详情的判断，结果这个文件的代码量剧增，可读性和维护性大大降低。

于是我针对表单组件写了一个扩展，暂时命名为 组件分发器(传送门)，直接上代码。

以 element-ui 为例，表单（编辑页）我们是这样写的：

<template>
  <el-form ref="form" :model="form">
    <el-form-item label="活动名称">
      <el-input v-model="form.name" />
    </el-form-item>
    ...
  </el-form>
</template>

换成分发器可以这样写：

<template>
  <el-form ref="form" :model="form">
    <el-form-item label="活动名称">
      <el-input-dispatcher v-model="form.name" />
    </el-form-item>
    ...
  </el-form>
</template>

<script>
export default {provide () {
    return {rwDispatcherProvider: this}
  },
  data () {
    return {
      rwDispatcherState: 'write',
      ...
    }
  }
}
</script>

使用分发器比较使用表单只多了三步：

  1. 添加 provide 属性，其中 rwDispatcherProvider 的值指向自身
  2. data 属性中添加 rwDispatcherState 做状态管理（read or write）
  3. 原来表单元素的标签加一个 -dispatcher 后缀，其它配置保持不变

这样就完成了表单到分发器的代码迁移，我们这样理解它：

编辑页用表单组件实现，是 写状态；

详情页不能编辑，所以是 读状态。

那么，将表单组件替换成分发器，用状态参数管理读和写。如果是写状态，分发器将组件渲染成表单组件，如果读状态，分发器将组件渲染成详情组件。这样就实现了 一套代码维护编辑和详情两个页面。

王婆卖瓜，自卖自夸。为什么要推荐分发器，主要它有以下几个特点：

  • 支持多个组件库

element-ui、iview 都有对应的分发器。

  • 使用简单

只多了三步。

  • 完全定制化

提供多种配置，根据项目的实际需要自由定制渲染函数。

实现原理

分发器的实现原理是 vue 的 provide/inject 和 渲染函数。

各分发器根据 provide 的状态参数，进入对应的渲染函数，实现对应的渲染逻辑。有兴趣的同学可以去 github 上看看源码，如果觉得对自己有帮助的，欢迎 start（*^-^*），有什么意见看法也请及时指出，谢谢！

以下是其他相关链接：

文档

element-ui 分发器示例

iview 分发器示例

不足与思考

渲染函数有两个参数 (h, context)，以 el-input-dispatcher 为例，它要传给 el-input 的数据对象 (class、style、attrs、props、on、directives、slot、ref 等等)，实现代码非常简单：

  ...
  render (h, context) {const { data, children} = context
    return h('el-input', data, children)
  },
  ...

很顺滑，所以我选择了渲染函数，但随着项目的深入，发现渲染函数有些问题，最大的问题是它没有生命周期，渲染的时候没有办法和其他组件通信，比如表单元素的 size 属性，可以设置在表单组件本身，如果本身没有设置会向上找 el-form-item 上的 size 属性，el-form-item 也没有会继续向上找 el-form。这个在 render 函数里是没有办法通过 context.parent 实现的。

或许实例属性可以尝试一下吧，vue 3.0 马上就要来了，到时再写一版吧，哈哈。

退出移动版