资讯专栏INFORMATION COLUMN

让前端小姐姐愉快地开发表单

Leck1e / 441人阅读

摘要:所以,前端小姐姐,如果候选开源项目能够满足以上所提的条件,那就可以用了前端小姐姐哦,那你有推荐吗当然。。。自带丰富的标准组件和校验规则,开箱即用。具备强大的控件交互和扩展能力,做你所想。访问官方了解更多呗

前端小姐姐:“新业务功能又有大量的表单要开发了,有没让我又高效又愉快地完成这个任务的方案呢?”

哦,我想想,配置开发理念,应该比较适合,且社区也有好些这种理念的开源项目

前端小姐姐:“什么叫配置开发理念呢?”

就是只需要简单地定义一份JSON配置数据来开发表单

前端小姐姐:“太棒了,我去search下先哈”

过了一会~~

前端小姐姐:“是真有不少,但我选哪个好呢?”

恩,那我们就来聊聊配置理念表单开发的选型吧

1. 帮助文档

这是必不可少的啦,没有文档,谁敢用呢

2. 直观特性展示

我可不想一开始就要花大量时间去读冷冰冰的文字,然后还要发挥自己的想像力

最好有超直观超形象超方便的方式展示大部分甚至全部的特性,可能是这样的:

3. 开箱即用

最好官方自带一整套常用的表单控件和校验规则,满足大部分常见场景,就不用去自行扩展太多了

比如以下的组件就经常用到了:

比如以下的校验规则就经常用到了:

4. 扩展能力

官方就是提供再多的组件和校验规则,也是无法满足所有的业务场景的,所以必须 友好(简单方便) 支持开发者自定义自己的表单组件和校验规则

5. 支持复杂数据结构

一个表单数据结构,除了简单的只有一级属性的对象类型外(如 {name: "daniel", age: 18}),实际很多场景可能是这样的:

{
  "name": {
    "firstName": "daniel",
    "lastname": "xiao"
  }
}

可能是这样的:

{
  "name": "daniel",
  "hobbies": [
    {
      "id": 1,
      "name": "Coding"
    },
    {
      "id": 2,
      "name": "Singing"
    }
  ]
}

一句话总结就是:支持数组类型,对象嵌套对象,对象嵌套数组,数组的项是普通类型 或 对象类型 或 数组类型

6. 表单控件间交互

我想说,一个表单,不是把表单控件按位置静静放在那就行了,控件之间并不独立,控件之间是有交互的

这里列举下具有代表性的一些场景:

“同意才能继续” 类型

“城市选择器” 类型

“大于18岁必填” 类型

“日期比较” 类型

“全名自动填写” 类型

感觉已经挺多了,就不一一列举了。

所以,前端小姐姐,如果候选开源项目能够满足以上所提的条件,那就可以用了

前端小姐姐:“哦,那你有推荐吗?”

当然。。。

哈哈,接下来就是广告时间了,如果各位看官们觉得以上的选型条件合情合理,那 ncform 就是一个不错的选择了

ncform,一种令人愉悦的表单开发方式,仅需配置即可生成表单UI及其交互行为。

自带丰富的 标准组件 和 校验规则,开箱即用。

具备强大的 控件交互 和 扩展能力,做你所想。

访问官方Github了解更多呗:https://github.com/ncform/ncform

tags: vue, form, json-schema, generator

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/102987.html

相关文章

  • 我的春招求职经验分享(已拿阿里京东网易等 5 个 offer)

    摘要:面经因为我完全没有面试经验,从来没有经历过面试,于是想着在去这类大公司面试之前先找成都的小公司练练手,积累点面试经验。于是三月份开始就有成都的小公司开始约我面试。 前序 从我高考成绩出来那一刻开始,从我在高考志愿上填上计算机科学与技术这几个当时在心中堪称神圣的几个字开始,我就已经把进入中国互联网最高殿堂BAT作为我整个大学奋斗的目标,哪怕我就读的是一所位于内陆的双非一本大学我也认为我能...

    Winer 评论0 收藏1
  • 用AI说再见!“辣眼睛”的买家秀

    摘要:过审是指最终审核通过的高质量买家秀,加精是指商家认可的买家秀,普通则是上述两种情况以外的其他买家秀。 showImg(https://segmentfault.com/img/remote/1460000018272118); 阿里妹导读:提起买家秀和卖家秀,相信大家脑中会立刻浮现出诸多画面。同一件衣服在不同人、光线、角度下,会呈现完全不同的状态。运营小二需从大量的买家秀中挑选出高质量...

    yeooo 评论0 收藏0
  • 9102了,你还不会移动端真机调试?

    摘要:移动端调试困难很多时候,我们在进行移动端开发时,都是先在端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。 移动端调试困难 很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是一旦出现问题,我们就很难解决,因为缺乏可视化...

    lushan 评论0 收藏0
  • 25k成功入职京东:拿到京东软件测试岗位offer经验分享

    前言 正逢金九银十,有很多朋友已经在考虑自己的出路了,今天给大家分享的是我一位幸运拿到京东软件测试offer的朋友的面试经历,我也闲来无事,问到了我朋友京东面试的一些真题,以及我整理的一些真题分享给大家,希望能够帮助大家冲刺金九银十,像我的朋友一样拿到自己心仪的offer。 三面京东: 一面: 你所了解的黑盒测试方法有哪些?并简单介绍下其应用场景?简述常用的bug管理或者用例管理工具,并且描述其...

    leeon 评论0 收藏0

发表评论

0条评论

Leck1e

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<