低代码之路 —— 公式编辑器(公式代码大全)

前言

本小码蚁呢,趴在低代码这个深坑中也有一段时间了,很久没更文其实也不是没有值得的写,可能是因为最近心气浮躁,感觉写啥都觉得不够格,也可能是因为呢,每每动起笔来就觉得目的性太强,不是写文的感念和思想,所以总是兴致而来,草草而收,不甚寥奈。

今天要讲的这个东西呢,它其实是低代码系统中新兴的一个玩具,它的主要功能呢,就是将表单的校验逻辑可视化。这个玩具在平时的码码中其实是没有太大用处的,之所以出现在低代码中呢,主要是因为理念契合,它是逻辑可视化的一小步。

什么是公式编辑器

讲了这么多,那么公式编辑器 究竟是个啥子呢 ?请看下图:

低代码之路 —— 公式编辑器(公式代码大全)

我们先解释一下图中的三个部分:

  • 区域 1 是公式编辑器的输入部分,这个部分是一个代码编辑器,这个代码编辑最核心的特性是,它可以对 “表单字段” 和 “函数” 进行联想输入。
  • 区域 2 是公式编辑器的可用参数列表,这些字段都是从表单设计器中动态获取来的。
  • 区域 3 是公式编辑器为提供的逻辑组合公式,你可以把它理解成一个 js 工具库,只不过我们现在把它可视化了,它里面涵盖了数字处理(例如:求平均数、求和、求绝对值等等)、文本处理和时间处理等等。

为什么说它是逻辑可视化的一小步呢 ?我们可以来模拟一种场景,我们现在使用低代码设计器设计了一张表单,这个表单里在提交之前需要对所有的字段都做一层验证,但是我们事先都不知道验证的规则,只有在设计这张表单时才知道,所以,我们现在有两条路:第一,手写逻辑代码注入;第二,利用 公式编辑器 编写规则注入。

其实对于编码人员来说,手写逻辑代码更灵活,但是 公式编辑器 的这种形式让更多人能参与这部分的编码成为了可能,这是低代码关于逻辑可视化的一个好的开始。

公式编辑器的执行原理:

低代码之路 —— 公式编辑器(公式代码大全)

这部分业务的核心在于 编辑 与 翻译。

formula-editor-react

作为公式的输入端,公式编辑器其实是比较重要的一环,完善的编辑器甚至能检验出输入规则的符合法性。这部分呢,我并没有花太多时间去造轮子,而是直接在 npm 库里面物色了一个:formula-editor-react。

作者大哥贴的实际效果图(实际跑起来也是保真的):

低代码之路 —— 公式编辑器(公式代码大全)

这个插件实现了关键字唤起,字段联想等,对于使用来说已经足够了,但是这个插件本身还是有一些坑,我们来细说一下。

formula-editor-react 的问题与对策

使用

插件的使用比较简单,像普通组件一样引入使用就行:

// 模拟的表单字段const fieldList = [ { name: "销量", value: "xl"}, { name: "单价", value: "dj"}, { name: "批发价", value: "pfj"}, { name: "采购价", value: "cgj"}, { name: "零售毛利", value: "lsml"},]// 模拟的公式库const methodList = [ { name: "平均值", value: "平均值(,)", realValue: "avg" }, { name: "最大值", value: "最大值(,)", realValue: "max" }, { name: "最小值", value: "最小值(,)", realValue: "min" }, { name: "求和", value: "求和(,)", realValue: "sum" }]<FormulaEdit className="code-editor" ref={editRef} // 需要调用组件中插入value的方法时使用,提供insertValue()方法 theme="day" // 主题 height={200} // 高度 defaultValue={defaultCode} // 初始化值 fieldList={fieldList} // @唤起 methodList={methodList} // #唤起 normalList={normalList} // 自定义无需校验关键词 readOnly={false} // 是否只读 lineNumber={true} // 是否显示列数 onChange={getCode} // 回调></FormulaEdit>

问题1:代码编号被覆盖

插件在常规启用之后,样式会出现一点问题:

低代码之路 —— 公式编辑器(公式代码大全)

编辑器的行号会被内容遮盖,需要稍微调一下:

.CodeMirror-line { padding-left: 30px !important; box-sizing: border-box;}

问题2:API 不够用

下面是作者贴出来的 API,这个插件的底层还是依赖的大名鼎鼎的 codeMirror,还不知道 codeMirror 的同学可以去百度了解一下,可能以后就会派上用场。

低代码之路 —— 公式编辑器(公式代码大全)低代码之路 —— 公式编辑器(公式代码大全)

为啥说它不够用呢 ?我们有两个很常规的场景它无法满足:第一,我希望每次打开编辑器弹窗的时候将编辑器清空;第二,我希望每次打开编辑器时编辑器能自动聚焦并开启光标闪烁。

这两个场景是不是再普通不过了?但是这位作者大哥的文档不支持,于是,我就把插件的实例打印出来瞅了瞅:

低代码之路 —— 公式编辑器(公式代码大全)

然后发现,这个 CodeMirrorEditor 那是异常眼熟,但是很遗憾,它里面也没有什么可用的突破口。直到,我点开了它的原型对象:

低代码之路 —— 公式编辑器(公式代码大全)

大家请看,这不就是 codeMirror 的 API 吗,也就是说,这个 CodeMirrorEditor 就是 codeMirror 实例。

但是这个地方,还有个问题大家要注意一下,我去翻了一下他的 package.json 文件,他这个地方用的是 5.x 版本。codeMirror 在 6.x 之后进行了大刀阔斧的更新,用法与 5.x 是完全不一样的,所以,这个时候我们要去翻 5.x 的 API。

低代码之路 —— 公式编辑器(公式代码大全)

过程我就省略了,这里我直接告诉大家结果吧:

// 编辑器聚焦editRef.current.focus()// 编辑器清空上一次输入editRef.setValue('')

问题3:动态更改字段后,语法校验失效

什么意思呢 ? 这个插件本身做了一层比较简单的输入语法校验,比如说,我们现在表单里有两个字段:

const fieldList = [ { name: "销量", value: "xl"}, { name: "单价", value: "dj"}]

现在,我们在编辑框里输入 @销量 ,编辑器的语法验证是通过状态。但是我如果胡乱输入了一些其他字符 @销量balabala ,这个时候编辑就会反馈说,你输入的字符不符合规则,你拿到这个提示之后呢就可以反馈给使用者,或者在保存之前做一些拦截性的措施。

那么,这个警告信息在哪儿看呢 ?

const getCode = (code, e) { ...}<FormulaEdit ... onChange={getCode} // 回调></FormulaEdit>

onChange 钩子函数会在用户每次进行输入时调用,第一个参数 code 能即时获取到当前编辑器的内容,而参数 e 中则会反馈出插件的详细信息,包括输入代码是否有语法问题。

低代码之路 —— 公式编辑器(公式代码大全)

那么,我们要讲的问题是什么呢 ?问题是,我们现在更新了表单字段,往里面加了一个字段:

const fieldList = [ { name: "销量", value: "xl"}, { name: "单价", value: "dj"}, { name: "批发价", value: "pfj"}]

此时,插件的验证语法验证功能对 @批发价 是失效的,当你输入 @批发价 时,onChange 中会报告代码错误。

这个问题有点棘手,我需要去看一下他的更新逻辑去让插件重载一下参数才行,但是大哥并没有提供源码,只有一个打包后的文件。

github 上我也去翻找了一遍,大哥并没有把项目传上去 …

低代码之路 —— 公式编辑器(公式代码大全)

咋个办 ?我把上面插件实例里的可用方法翻了两三遍,把所以带 up、update 等等跟更新沾边的方法都试了一遍,还是没个结果,于是乎,我动起了打包后的代码的主意,好在确实让我发现了端倪:

低代码之路 —— 公式编辑器(公式代码大全)

好家伙,他居然把这些数据存进了 localStorage 里,于是我赶忙翻了一下 localStorage

低代码之路 —— 公式编辑器(公式代码大全)

好了,故事讲到这里,往往是我要说结论了。没错,我们只要在每次更新完表单字段之后,顺便把它往 localStorage 存一下,它这个语法验证就会生效了。

其实它这个验证,并不是真正的语法验证,只是对既有的表单字段和公式库做了一个字符对比,没有深奥的语法分析等等。

语法翻译的新思路

这一节其实是这篇文章真正要讲的内容,当我们走完规则的编辑和保存流程,来到对规则数据的使用这一步的时候,我们要怎么去做?

我们还是来举个例子,比如,我们在表单设计之初,编写了下面这样一条规则:

#AVERAGE(@参数1,@参数2,@参数3)

这条规则在我们从数据库拿出来时,它只是一个字符串,而我们要做的,就是把它翻译成 js 代码去执行。

面对这个问题,我的第一个念头是,第一步,我需要从公式库中识别出 AVERAGE 这个函数,然后通过正则拿到 (…) 里的所有参数,然后把参数传入,并执行函数 AVERAGE 就可以了。直白来讲,就是我得先拆分字符,并将公式函数与表单字段一一翻译解析,最后求出结果。

但是,公式编辑器其实是支持 与 或 与 四则 的,也就是,极端状况下,我们需要解析的公式有可能会变成这样:

(#AVERAGE(@参数1,@参数2,@参数3) > @参数4) 或 (@参数5 === @参数6)

这个可就麻烦了,麻烦的不在于参数,而在于运算符号,我们如果要去翻译这些运算符号,那可就不止一点两点的坑了。

咋个办 ?

好,讲到这里,又到了我揭晓结论的时候了。大家想一想,这个公式字符串,和 js 代码是不是很像 ?

get 到没有 ?

是的,我们完全可以不用去翻译它,我们就去执行它!

执行字符串式的 js 代码,我们有两种方案:第一,eval 函数;第二,Function 构造函数。在这个,我选择了第二种,原因有两点:第一,eval 无法传承,而 Function 可以;第二:eval 无法 return 执行结果,而 Function 可以。

Function() 构造函数创建了一个新的 Function 对象。直接调用构造函数可以动态创建函数,但可能会经受一些安全和类似于 eval()(但远不重要)的性能问题。然而,不像 eval(可能访问到本地作用域),Function 构造函数只创建全局执行的函数。

———— MDN

Function 使用示例:

const sum = new Function('a', 'b', 'return a b')console.log(sum(2, 6))// Expected output: 8

具体怎么做呢?

  • 第一步,我们扫描一遍规则,拿到我们需要准备的 公式集 和表单 参数集
  • 第二步,我们替换掉公式中的中文参数,使用我们实际拿到的参数名,替换掉 或 与 等中文逻辑字符,使用 js 逻辑字符 || && 等
  • 第三步,我们传入准备好的 公式集 和表单 参数集 以及调整过的公式字符串,并执行

code = 'retrun ' codeconst res = (new Function(code)).call({ ...params, ...funcs})

这里要注意一点的是,我们这里使用了 call 方法来注入参数,我们需要把 #AVERAGE 和 @参数 都替换成 this.AVERAGE 和 this.参数

结语

本文呢,实际上更像是一篇踩坑日记,没有非常硬核的技术突破,但是可能会为正在低代码路上匍匐前进的同学们提供一点点帮助。

作者:smile_逸仙
链接:https://juejin.cn/post/7267927742796742691

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月16日 上午10:28
下一篇 2024年5月16日 上午10:39

相关推荐

  • 党建风采│以课题研究促进党建提升 以党建引领高质量发展(开展党建课题研究)

    习近平总书记在全国教育大会上强调:“加强党对教育工作的全面领导,是办好教育的根本保证。”新时代的中学基层党组织,要以党建引领推动发展,用发展检验促进党建。在新时代新形势背景下,探索…

    科研百科 2023年6月12日
    411
  • 聚米科技简介2022年11月(聚米投投最新进展2020年)

    上海聚米信息科技有限公司 上海聚米信息科技有限公司(简称“聚米科技”)是一家致力于为客户提供卓越的项目管理咨询服务和专业的项目管理IT解决方案的互联网公司。聚米科技总部位于上海市浦…

    科研百科 2022年12月19日
    681
  • 合同管理word

    合同管理是企业管理中非常重要的一环,它关系到企业的运营效率和经济效益。合同管理不仅仅是对合同的文字内容进行审核和管理,还需要对合同的签订、执行、变更、解除等方面进行全面有效的管理。…

    科研百科 2024年9月20日
    14
  • APICloud开启全球布局 低代码加速全行业数字化进程(apicloud源码)

    【Techweb】随着低代码开发与云原生能力的广泛认同,垂直行业的各种数字化需求正基于低代码能力快速实现,并已步入实质应用阶段,11月29日,APICloud发布了基于低代码的垂直…

    科研百科 2024年1月8日
    63
  • 重磅!“北京房山”APP上线啦!(北京房山App)

    12月31日 “北京房山”APP正式上线 作为房山区官方手机客户端 方方今天给您好好介绍一下 “北京房山”APP都有啥 一段视频带您先睹为快 今天,“北京房山”APP 上线启动仪式…

    科研百科 2023年2月4日
    162
  • 档案管理系统登录页

    档案管理系统登录页 档案是一个非常重要的信息资源,包含了我们的个人历史、职业经历、家庭历史等各种信息。因此,档案管理系统是我们管理档案的重要工具。而登录档案管理系统,可以让我们更好…

    科研百科 2024年8月19日
    24
  • 用过什么项目管理工具

    使用过项目管理工具,可以更好地管理项目进度、资源和风险。以下是我使用过的一些项目管理工具: 1. Trello:Trello是一种基于卡片的项目管理工具,它允许用户以卡片形式组织项…

    科研百科 2024年5月25日
    51
  • 项目管理软件哪家好

    项目管理软件哪家好 项目管理软件是一种用于管理项目进度、成本和资源的工具,能够帮助项目经理更好地组织、规划和控制项目进展。随着现代项目管理的日益复杂,选择一款优秀的项目管理软件至关…

    科研百科 2024年7月23日
    23
  • 前期项目管理软件

    前期项目管理软件 项目管理软件是一种工具,可以帮助项目经理和团队成员有效地管理项目前期和中期的过程和数据。在项目的开始阶段,项目管理软件可以帮助确定项目的范围、目标和可交付成果,并…

    科研百科 2024年7月27日
    22
  • 让肺部“杀手”无处藏!全球首台临床人体肺部气体磁共振成像装备“湖北造”

    穿上特制“小马甲”,吸入特制的氙气体,屏气3-5秒钟,肺部的角角落落即清晰“可见”。 3月30日,湖北日报全媒记者从中国科学院精密测量科学与技术创新研究院获悉,由该院周欣研究员带领…

    科研百科 2024年4月21日
    78