通过json配置页面优势在哪？

[baidu]

通过json配置页面优势在哪？

[realeve]

@2betop @Leedorado QCon期间很遗憾没听到这次分享，去听头条的消息队列分享去了。

先说结论：

使用JSON配置的方式减少了前端的重复代码开发，新增表单页面可以通过更轻量级的json配置文件来实施，不需要额外重新部署。

一、基于MVVM的表单页面的开发流程

假设前端需要写一个页面，提交用户名、邮箱、部门信息至后台，通常我们可能这样来做：

1. 初始化数据

• 从外部API载入组件初始化所需数据
  如selector、radio、checkbox等组件，需要从api接口载入相应组件的初始化数据。

• 当前视图中需要提交至后台的字段
  在初始化state中，如Vue的data字段，React的state字段中设置好向后端需要提交的字段。

这时你的代码可能长这样子：

<script>
export default {
  data(){
    return{
      email:'',
      username:'',
      department:[]
    }
  },
  methods: {
    async init(){
      let data = await db.fetchDepartment();
      this.department=data;
    }
  },
  mounted() {
    this.init()
  },
}
</script>

或者这样子：

import React,{useState,useEffect} from 'react'
export default function YourComponent(){
  let [state,setState] = useState({
    email:'',
    username:'',
    department:[]
  });
  useEffect(async ()=>{
    let department = await db.fetchDepartment();
    setState({department});
  })

  // ...
}

2. 写好视图

根据上面的数据，结合选用的UI库写好UI层，这时可能需要写好字段的说明如邮箱、姓名、部门，input框还需要placeholder，而邮箱字段可能还需要做数据校验，同时做好数据绑定和事件绑定。

这时一般都会有个【提交】以及【重置】按钮，如果需要数据更新，可能还有个【更新】按钮。

3. 提交数据

通常需要在提交按钮绑定 submit 事件，里面的流程大致是：
数据校验 ——> 拼接参数——> 发送至后台——> 成功/失败后的响应。

说明：在以上的操作中，像selector中部门数据的初始化，UI层中的placeholder，必要的提示信息等都可以做成配置绑定在初始化的state中。

二、基于JSON配置的MVVM渲染

1.抽象数据配置

在写了很多个相似的业务页面以后，我们其实可以将很多工作抽象出来，这就是AMIS所做的工作。
比如一个 文本输入框可能是这样的：

{
            "title": "用户名",
            "type": "input",
            "key": "username", // 这里的key一是用在数组到视图的过程中，虚拟DOM需要传入的key，同时作为数据提交接口的入参字段 

            "rule": {
                "required": true,
                "msg": "请输入有效用户名"
            },
            "placeholder": "请输入用户名",
            "maxLength": 8,
            "toupper": "true"
        }

当发现这样可行以后，逐步添加各种封装组件，根据各个组件的特性设置对应的个性化属性，比如

• 下拉框selector
• 单选radio
• 多选checkbox
• 日期选择器DatePicker
• 开关Switch
  ......
  等，对于有初始数据的组件，可以同时考虑配置一个api初始化接口，在视图初始化之前加载数据，此时的初始化配置可能是这样的：

{
            "title": "单选部门",
            "type": "select",
            "url": "27/9b520a55df.json", // 载入表单JSON后，对于select这种需要初始数据的组件，通过url参数初始化数据，将结果传入组件
            "key": "dept_id4",
            "rule": {
                "required": true
            },
            "cascade": "dept_id",// 当dept_id字段数据更新后（如对应的select下拉选择触发），重新init当前组件的数据

            "block": "当dept_id变更时，加载该组件数据" // 一些必要的提示信息
        }

对下拉框，我们还可以考虑再次封装，加入拼音首字母过滤、是否支持复选、级联选择等功能。

2.页面初始化配置

通过以上配置能渲染出单个组件后，还需要整体考虑，比如表单的名称、CRUD接口等，这时整个表单的配置可能像下面这样：

{
    "name": "业务表单名称",
    "api": {
        "insert": {
            "url": "81/7e63360284",
            "param": ["rec_time", "uid"],
            "_desc": "insert into tbl_sample_bar(data_type,data_value,data_count ) values (?,?,?)"
        },
        "update": {
            "url": "83/ae9b8e8b0f",
            "param": ["_id"],
            "_desc": "update tbl_sample_bar set data_type = ?,data_value = ?,data_count = ? where id=?"
        },
        "delete": {
            "url": "84/dac2a713d0",
            "param": ["_id"],
            "_desc": "delete from tbl_sample_bar where id=?"
        },
        "query": {
            "url": "82/ef0905c692?param1=2",
            "param": ["data_type", "data_value"],
            "_desc": "SELECT id _id,a.data_type,a.data_value,a.data_count FROM tbl_sample_bar AS a where a.data_type=? and a.data_value=? order by id desc"
        }
    },
    "detail": [
// 页面视图的各个录入组件的配置 
]
}

3.功能逻辑实现

根据JSON中的初始配置，根据我们在传统的MVVM开发流程中调用配置中的CRUD接口做对应的功能实现。

对于需要额外实现的功能，可以根据业务情况不断丰富配置并实现，最终达到只设置json文件便可满足各类表单的业务需求。

4.载入JSON配置

系统URL可能是 http://localhost/form#schema=某业务.json
监听schema的变更，载入对应的 json文件即可。

5.添加至菜单

将URL 【http://localhost/form#schema=某业务.json】 添加至菜单中，这时一个配置式的表单功能页面就完成了

---

三、为什么使用JSON？

前面的配置信息可以是一个js文件，同时也可以是json，如果是js文件需要考虑eval，或者用全局变量注入，这显示是一种不友好的方式。用json可以以静态资源放在static站，也可以同前台页面一同打包，还可以直接写入数据库，以字符串方式存储，更方便管理。

最后抛砖引玉，本人在前段时间也基于 Antd 做过类似的工作，有了基本功能但没AMIS这么完整，比如没加入表单的横向或纵向排列设置、基于table的crud操作、分步骤的表单填写、弹出dialog创建子表单等：

https://github.com/realeve/sheet_manager/blob/master/src/components/FormCreater/index.tsx

[2betop]

用json其实是一种约束，不直接调用组件，而是通过 json 声明我要什么功能，具体实现不用管！这其实能降低使用者的门槛和成本，不太擅长前端的开发人员也可以用（比如 RD）。这其实就是一种声明式编程的好处。

用户不直接接触组件这一层，而只关心 json 配置的好处是，内部发生技术变更对于用户是无感知的，不会因为升级还要改变写法。

其实在公司内部，还有可视化编辑器，还有平台，在平台上可以直接创建编辑页面。

[Dafrok]

AMIS 渲染器本质就是把代码中大量重复的 state-to-view mapping 做了一层抽象，并且赋予开发者基于这个规范的抽象的能力。你想用插件也是没有门槛的，AMIS 所有的渲染器都是通过 FormItem 装饰器创建的，你想订制只要给你的组件封装一下即可，你自己订制的渲染器就算是产品经理也可以通过配置 JSON 来生成，说没有减少代码工作量是不可能的。

[giscafer]

有学习参考价值。本人原先业余也搞过类似的工具 ngx-form-builder，用的是ng。一样是通过 jsonschema 来动态创建组件，也是想后期做可视化编辑器，最终也是走回jsonschema——>component的过程。

感谢开源。

[Leedorado]

后期会开源可视化编辑器吗？

[2betop]

应该不会，但是可以提供可视化工具（非源码版本）。

[tomerry]

好处就是让某些特定领域的业务需求通过拖拽，简单配置，让可视化编程成为可能。json是桥梁

[Dafrok]

简单的说可以把它理解为一种协议啦

[w3cmark]

我们也在做的一个项目：https://vipshop.github.io/ams/