基于vue通用表单解决方案的思考与分析


Posted in Javascript onMarch 16, 2019

前言

“那要怎么改?”,“那得改到什么时候?”,“什么时候才能支持这些功能?”。

再一次听到了这样的话,我沉默了。到底要怎样改,这也是我所思考的,最近一直忙于其他,已经有一段时间没有处理 issue 了,趁着调休,我也要好好思考下。

半年前,接触了 el-form-renderer  ,瞬间感觉减轻了大部分表单编写的工作,一个简单的JSON配置,立刻展现出一个功能完好的表单页面。然而,随着使用的频率增加,却慢慢开始暴露各种不足,该组件的作者也不再单独对该组件进行维护了。由于项目表单场景的需要,我们 fork 了一个版本,但后来发现我们更想要的是一套属于我们自己的表单渲染规则,于是在我们的 Github 组织下建立了属于我们的代码仓库 @femessage/el-form-renderer  (以下都称为 el-form-renderer ),并开始了我们自己维护之路。

3W

el-form-renderer 是什么?为什么?怎么样?通过3W分析来看看我们做了什么。

WHAT?

基于 element-ui 封装的 表单渲染器 ,但不仅仅是 element-ui ,甚至不仅仅是表单。

基于vue通用表单解决方案的思考与分析

WHY?

这里的为什么有两层,第一层是为什么需要表单渲染器?第二次是什么是 el-form-renderer ?

借用《NoForm - 一个更好的表单解决方案》中的一句话:

做 B类业务 的同学应该深有感触,我们日常需要面对大量操作类或者表单类的场景,因此只要是能从这些重复的CRUD解放出来的方案,就是最好的方案

我们的目的也很简单,让天下没有难做的表单。

至于为什么是 el-form-renderer ,理由很简单,我们正在让没有难做的表单变成现实,至少在目前数十个项目中,解决了70%以上的表单方面的需求。

HOW?

如上文所说,如下图所见:

基于vue通用表单解决方案的思考与分析

一个好的表单需要解决的问题:

•表单的取值、赋值、校验

•表单联动

•自定义表单项

•表单项的事件、属性、slot

•对用户足够友好

所谓”下层基础决定上层建筑“,我们没有执着于从0开始,而是“让专业的人做专业的事”。基础组件, element-ui 足够专业,也正因为它的专业性,才让 el-form-renderer 最初的版本有了用武之地。然而目前远远不够的是,我们没有很好的处理表单联动和表单项的事件、slot的问题,这也正是我所要思考的地方。

基础用法

先来看看目前我们的实现(更多请参考 文档 )

<template>
 <el-form-renderer label-width="100px" :content="content" />
</template>
<script>
import UploadToAli from '@femessage/upload-to-ali'
export default {
 data () {
 return {
 content: [
 {
 $id: 'avatar',
 label: '头像',
 component: UploadToAli
 },
 {
 $id: 'username',
 label: '用户名',
 $type: 'input',
 $el: {
 placeholder: '请输入用户名'
 }
 }
 ]
 }
 }
}
</script>

效果如下:

基于vue通用表单解决方案的思考与分析

没有复杂的逻辑,只需进行简单配置 JSON 的方式就可实现常用表单功能

解决方案

因为不是从0开始,所以一开始作者的设计只服务于 element-ui 已有的组件。

之前的方案解决了什么

• 表单的取值 getValue ,赋值 updateValue

• 完整继承了 element 的 form 表单属性,包括校验

• 表单联动 $enableWhen

大部分简单的场景已经覆盖,但是局限于 element-ui 组件,没有处理好动态组件选项(如下拉选项)的问题,无法批量赋值,必须手动去空格...

现在的方案优化了什么

• 支持自定义组件,摆脱对 element-ui 的完全依赖(仍然依赖它的 el-form , el-form-item )

• 通过 setOptions 方法,动态的处理组件选项问题

• 添加批量更新数据方法 updateForm ,并添加 trim 来处理值

• 为了方便在其他组件中的集成和设置/获取值的需求,还添加了 inputFormat 、 outputFormat ( issue )

它本已完成了一个华丽的蜕变,甚至成为了我司组件的桥梁地位,然而,面对千奇百怪的需求,它确实还不够。

存在的问题

基于vue通用表单解决方案的思考与分析 

目前的7个 issue ,大致可以分为一下几类:

•表单联动

•自定义slot位置

•自定义事件

•其他优化

需求告诉我们,它还有很大的进步空间。

思考

回到开始的那些话,面对存在的问题,我们要怎么处理好它。

今天收到一个 PR ,来自公司的一位同事,处理的是 el-form-renderer 中 slot 位置的问题,默认只有 default ,显示在最后,有需求希望能显示在指定某一个表单项的前/后。该PR以表单项的 $id 为具名插槽,渲染该插槽内容到对应 $id 表单项的上方。

一个很好的思路,但是也让我思考了很多,或许它还是没有达到我的要求。

不妨再思考一个场景,表单的第一项和第三项渲染的上方需要渲染两个内容相同的 slot ,按上面的思路,我们应该写两个template,并分别定义他们要渲染到的位置的的 $id 。

上面的问题并不难解决,定义一个字符串匹配规则,或者在某一项的配置项中添加要渲染的slot,名字匹配则渲染,以达到复用的目的。

问题似乎是解决了, issue 可以关闭了,但是我们回过头来想想,我们为什么要自定义 slot 位置?

因为有issue,有用户有这个需求。

那他为什么会有这个需求?

我们不得而知,场景很多,但我们可以大胆的猜测,缺乏一个组件可以满足他的渲染需求,他需要 slot 来自定义展示内容。

所以,似乎我们需要的并不是 slot ,而是我们缺乏了那些组件,或者我们需要一个更通用的渲染方式来渲染我们的内容。很容易,我们想到了 render ,如果我们返回的是一个 render ,那似乎大部分 issue 可以关闭了。然而事实是,我们从开始就不希望出现 render ,因为它一点都不友好,甚至对部分人来说,它不简单,这不是我们的目的。 我们的目的是为了更好用,更好理解,就向我们的文档一样,它很简单,但很实用 。

许多PR,或者打算提PR的人忽略了一个问题,我们的组件没有支持事件,它很难实现?不,至少已经实现了绑定属性,绑定事件并不会多难,但是没有去支持它,因为我们 思考的是它的必要性 ,表单项是否真的需要绑定事件。

从一开始就说过,不只是 element-ui ,甚至不只是表单。我们的目的不纯粹,我们寻找的是通用的方案,如果支持了事件,表单项与业务代码的关联性绝对会更强,这不是我们希望看到的,至少在我们目前可以看得到的通过可视化的界面生成表单的前提下,我们不希望出现自定义事件的需求,它让我们通过可视化的界面生成表单变得不那么通用了。

那么,在目前的情况下,真的没办法解决这些问题了吗?答案是否定的。

已知我们可以通过自定义组件的方式拓展我们的表单项,那么我们也可以通过自定义组件解决我们遇到的 issue

import CustomComponent from './custom-component'

export default {
 data () {
 return {
 content: [
 {
 label: '用户名',
 component: CustomComponent,
 $id: 'username',
 $el: {
 placeholder: '请设置您的登陆用户名'
 }
 }
 ]
 }
 }
}

或者在一些更简单的场景

import UploadToAli from './UploadToAli'

export default {
 data () {
 return {
 content: [
 {
  $id: 'avatar',
  label: '图片',
  component: {
  data () {
  return {
  imgUrl: ''
  }
  },
  render: function (h) {
  return h(UploadToAli, {
  props: {
   value: this.imgUrl
  },
  on: {
   input: (val) => {
   this.imgUrl = val
   this.$emit('input', val)
   }
  }
  }, [
  h('p', {
   slot: 'spinner'
  }, '开始上传中...')
  ])
  }
  }
 }
 ]
 }
 }
}

如果从这个层面来说,我们早已经解决问题了,但是那些 issue 依然在那儿。还记得之前提过的对用户足够友好和 render 的事吗,目前来看,它能解决问题,但不是一个好的方案,解决问题并没有那么难,难的是解决了还能足够友好,足够简单,这也是我们一直在努力的方向。

结语

不知不觉写了好长...

通过配置的方式实现一个表单似乎是一个不错的思路,目前已经在公司中后台有过数十个页面的尝试。然而业务场景千变万化,我们没有办法解决100%的需求,但希望我们的方式为配置性表单能带来更多的思考。

抛砖引玉,最后贴一次仓库地址: https://github.com/FEMessage/el-form-renderer ,希望更多的方案和实现浮出水面,解放生产力。再次感谢 原作者

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
Apr 01 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
koa2的中间件功能及应用示例
Mar 05 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
Jun 25 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue+php实现的微博留言功能示例
Mar 16 #Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 #Javascript
使用element-ui table expand展开行实现手风琴效果
Mar 15 #Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 #Javascript
vue过滤器用法实例分析
Mar 15 #Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
Mar 15 #Javascript
详解vue移动端项目代码拆分记录
Mar 15 #Javascript
You might like
基于mysql的论坛(2)
2006/10/09 PHP
PHP语法速查表
2007/01/02 PHP
php常用的安全过滤函数集锦
2014/10/09 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
BootStrap 弹出层代码
2017/02/09 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
JS 数组和对象的深拷贝操作示例
2020/06/06 Javascript
Vue切换div显示隐藏,多选,单选代码解析
2020/07/14 Javascript
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
用Python的Django框架来制作一个RSS阅读器
2015/07/22 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
如何在django中运行scrapy框架
2020/04/22 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
CSS3的颜色渐变效果的示例代码
2017/09/29 HTML / CSS
惠普香港官方商店:HP香港
2019/04/30 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
大二自我鉴定范文
2013/10/05 职场文书
高中校园广播稿
2014/01/11 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
服装设计师求职信
2014/06/04 职场文书
优秀应届本科生求职信
2014/07/19 职场文书
119消防日活动总结
2014/08/29 职场文书
信用卡结清证明怎么写
2014/09/13 职场文书
在职证明范本
2015/06/15 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android