为什么我反对在 ui 组件库之上，再作对 template 进行 for 循环遍历 json 的封装？

[revalue]

看到隔壁贴，/t/679490 ，这个老哥最终成品方向还不确定，我也不是针对这个老哥的模式。我把其一个可能的方向简化的话就类似于这个链接 https://www.cnblogs.com/wisewrong/p/9052467.html 。(代码超级简单)

这个原理也很简单，就是在 vue template 上 for 遍历这个 json，通过 if else 得出最后的 vue dom，就是这样封装。其实这个循环加封装就损失掉了 template 的可拓展性，应对复杂的场景，你必须用 hack 的方式设立并传个 slot 进去这个组件把损失掉的 template 拓展性给补回来。然后你这种 hack 又要加字段说明。像这样，每个人往上面补一刀，之后这个模块基本上就废了。

除非你这个 json 设计，可迁移和可拓展性很强，比如你 json 还有别的用途，能拓展出新的配套功能配套设施。否则我觉得这是“脱裤子放屁”，这种封装只是把数据换了一种形式来表达，从 html 转为同等的 json，代码量几乎没减少，只能说在个别人看来，js object 比一大段 html 代码要美观一点。我组里已经有很多同学做成这个样子作为封装来邀功，“百花齐放”，封装后调用接口不一，我觉得用起来太难受了。

我不是说反对 json Schema 。而是反对根据 json Schema 来在 template 上 for 循环遍历然后 if else 。其他的比如根据 json 代码生成 template 代码，我是比较看好的。

PS：我想了下为什么封装那么难，以至于我更提倡代码生成器，是因为 vue 的 2.x 版本没有提供对 template 的“业务逻辑”的封装。受 react hooks 影响，在最近两年其他框架新版本开始有对业务逻辑的封装。而对比来看，像 vue 如果去封装“ui 组件库”，问题不是很大的。

[revalue]

封装成组件为了减少这个组件内的“组件参数”和“组件配置”的重复填写？是一个层面，但是其减少的填写量远远不如对 echarts 这些组件的再次封装的效果。在这个封装问题里面，这种必要性不是很充分。

[TsubasaHanekaw]

这种东西最终成品就是 用户可以通过拖控件方式 自定义表单

[codermagefox]

这种问题其实都是表面问题,归根到底就是:

究竟要不要给用户掌握编程能力?如果给,给到什么级别?编程能力究竟应该给开发者还是用户?

[Qinmei]

我不是很赞同这种设计模式, 表单一般都是 UI 框架封装好的, 我们直接调用组件即可, 那对于前端来说, 直接写组件跟写 json 其实没差别, 但是加了一层之后, 我们不仅要知道 json 层的规则, 我们还要知道组件的规则, 有点多余了;

我更倾向于只抽象逻辑, 但是前端这块其实很少有

[revalue]

@codermagefox 想到 dreamweaver 就知道这个选择题不好做了。现成的阿里开源出来的 Fusion 、飞冰这些，还是马马虎虎。

[SingeeKing]

歪个楼，微信小程序只能这么干（ html 组件自动转换基本就是废的），然后用起来真的就十分不爽

[no1xsyzy]

区分封装和代码生成器，说到底是因为没有 “宏”（ AST 层面的宏）
lisp 大家族欢迎你（误

[billLiao]

@Qinmei #4

[forbreak]

我现在也在这么干，最终是为了通过拖拉控件实现自定义表单。拖拉完成表单直接在线使用。如果生成 template，我不能直接使用，需要再次打包，重启才能用。 建的的表单拖拉一下很方便，就是复杂业务处理这块暂时还没有好的方式。

[redbuck]

应用场景还是有的.
比如一些弹窗查询之类的.

可以在他的基础上再封装为函数.
const result = await formAction({
fields: [
{type: ''},
...
]
})

比起封装为组件要灵活一些.

[ql9075]

当你遇到大量重复页面，重复的 ui 你就会想到这些页面 不同的都是数据。为什么不抽象出来，让数据来控制页面的展示。你不用关心 css, html 的具体实现，如果你想快速配置页面只需了解 json 数据配置，如果你想做更复杂的应用，你可以修改底层逻辑更抽象的封装。

[jrtzxh020]

开发如 EPR 这种重复繁琐的 UI，还是很有必要的。

[dodo2012]

我现在做 vue 表单就是自己实现的拖拉生成，其实这东西，只要统一好接口方式，没那么麻烦的

[toesbieya]

写动态组件用 render 是最好的

[felixpy]

隔壁楼主来了哈哈。老哥的关注点好像在 UI 框架的适配器上了，其实我感觉这个这个不是重点。复杂业务场景下大部分表单元素都是需要封装成一个支持 v-model 的自定义表单组件的，只有少部分的没啥逻辑的组件能用上适配器。如果业务的自定义组件需要用 hack 的方式插入 slot，那我觉得是这个自定义组件的抽象程度还不够。

另外，我也同意你的观点，简单的页面完全没必要使用 JSON 配置的方式，自己在 template 组织即可。

JSON 配置的方式其实是为了解决一类问题。假设我们有一个商品录入系统，总共需要录入 50 种类别的商品，每一类商品需要通过表单字段填写 30 条的信息。其中这些表单的特点如下：

- 不同类别商品需要填写的表单字段 80% 可以进行复用，但是相同字段在每个类别下可能校验规则、可选择项、提示语等不同
- 字段与字段之间具有一些相同的联动规则，比如不管在其中 20 个商品类别下，只有填写了字段 A 才能填写字段 B

这种情况，我相信大家都不会写 50 个表单页，自己在每个表单页再去组织这些组件，同时处理各种不一样的地方。

[felixpy]

@toesbieya 渲染函数很强大也很晦涩，可以考虑下 JSX 之类的

[felixpy]

@forbreak 复杂业务的处理可以把封装到自定义组件里面，如果是通用的逻辑可以抽象到 composition-api 里面。另外如果一个组件在不同场景下有不同的业务逻辑，就可以考虑抽象成一个 组件选项 来控制。

[revalue]

@felixpy 啊不是，我觉得你没有理解我的意思，你太过客气了。

我司就是已经跑过了 15 楼说的那个阶段，现在最大的问题是如 17 楼所说，所谓的“组件选项”太多了。

“组件选项”只有 0 个或无数个，如果作为后来接手这些模块的人，你就能感受到压力了。

[revalue]

你这组件选项，控制的不是某 ui 组件，而是控制一个里面一堆 ui 组件的黑盒，我说这才是麻烦的地方

[wly19960911]

@revalue 那问题是 template 无法维护，你不用文档和需求固定下来，无限制的扩张扩展性根本是一个无法维护的怪物。今天这个人一个这样的需求，明天那个另外一个需求，我做这个的最大原因就是固定功能，几十个奇葩功能的表单，表单多达 30 多个字段，每次 template 都得写 1000 行，这种代码就好维护了？