低代码之路 —— 公式编辑器

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

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

讲了这么多，那么公式编辑器究竟是个啥子呢？请看下图：

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

区域1是公式编辑器的输入部分，这个部分是一个代码编辑器，这个代码编辑最核心的特性是，它可以对“表单字段”和“函数”进行联想输入。

区域2是公式编辑器的可用参数列表，这些字段都是从表单设计器中动态获取来的。

区域3是公式编辑器为提供的逻辑组合公式，你可以把它理解成一个js工具库，只不过我们现在把它可视化了，它里面涵盖了数字处理（例如：求平均数、求和、求绝对值等等）、文本处理和时间处理等等。

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

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

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

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

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

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

//模拟的表单字段constfieldList=[{name:"销量",value:"xl"},{name:"单价",value:"dj"},{name:"批发价",value:"pfj"},{name:"采购价",value:"cgj"},{name:"零售毛利",value:"lsml"},]//模拟的公式库constmethodList=[{name:"平均值",value:"平均值(,)",realValue:"avg"},{name:"最大值",value:"最大值(,)",realValue:"max"},{name:"最小值",value:"最小值(,)",realValue:"min"},{name:"求和",value:"求和(,)",realValue:"sum"}]FormulaEditclassName="code-editor"ref={editRef}//需要调用组件中插入value的方法时使用，提供insertValue()方法theme="day"//主题height={200}//高度defaultValue={defaultCode}//初始化值fieldList={fieldList}//@唤起methodList={methodList}//AVERAGE(@参数1,@参数2,@参数3)

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

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

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

(AVERAGE和@参数都替换成和this.参数结语
本文呢，实际上更像是一篇踩坑日记，没有非常硬核的技术突破，但是可能会为正在低代码路上匍匐前进的同学们提供一点点帮助。