前端开发的SAVE模式
低代码前端开发的核心就是提供可视化配置,从而实现声明式的应用开发。在基于SAVE模式的低代码前端开发环境中,数据存储可以可视化定义,动作流程可以可视化编排,视图可以可视化搭建,事件可以可视化声明。
界面视图可以用组件树+组件属性值+组件内部状态进行描述。组件的属性值可以静态设置,或者通过表达式动态绑定到变量上。这样的话,通过修改组件树或者变量值就可以实现界面视图的变化。
组件可以通过事件的形式将其捕获的用户交互行为或者内部状态变化(比如树节点是否展开的状态,表单是否正在提交的状态)通知给组件外部(通常是父组件或者hook)。我们可以在事件响应中修改组件树、修改数据、调用服务端接口,从而实现界面的变化以及应用数据的存取等。而对一个用户交互行为的响应很可能会触发上述全部操作。例如点击一个新建任务对话框中的新建按钮后,我们需要关闭对话框,在任务列表中增加一个任务,并且调用创建任务接口。因此事件响应的逻辑不会太简单。
如果要将组件和组件、组件和数据存储、组件和服务端接口之间进行解耦,对于事件的响应逻辑就要和组件分离开。这时候,我们需要引入一个新的概念:动作流程。我们可以将修改组件树、修改数据模型以及调用服务端接口的行为抽象为可复用的“动作”,并且将多个“动作”组合成“流程”,然后让“流程”对组件事件进行响应。
通过引入组件、数据存储、动作、流程等概念,我们拥有了一个可以响应用户操作的界面。但是现实的需求往往更复杂,比如在定时保存、定时刷新、聊天窗口等场景下,我们不但希望界面可以由用户驱动,有时还会希望流程能定时触发,或者由服务端事件触发。这时候,只能响应组件事件的“流程”就不够用了。为此我们可以再引入一个“应用事件”的概念:让动作流程订阅应用事件,由组件、定时器、服务端事件等生成“应用事件”,从而使得组件可以和具体的动作流程解耦。
我将这样一个由数据存储(Store)管理数据,由动作流程(Action Flow)表达逻辑,由组件构建视图(View),由事件(Event)驱动应用的模式称为SAVE模式。
配置项的表达式绑定
配置项可以在应用配置时设置为常量,然后在运行时执行“修改组件属性值”操作进行修改,从而实现页面的动态效果。
配置项也可以设置为一个表达式,例如设为数据存储中的某个数据字段,或者某个页面参数。引擎会运行时监控表达式的结果是否发生变化,并在结果发生变化后自动更新配置项的值。