1-1 如何实现前端低代码？ - 戴向天

什么是低代码？

一、通过配置信息进行创建页面，交互，以及事务处理等等。

二、可以进行可视化操作。让用户能够直接在页面上直接进行对项目的更改。

三、低代码 并非 零代码。还是需要会一些 JavaScript 的技术。

个人可以实现前端低代码平台吗？

回答是：个人是可以进行实现。

因为在现在的前端开发环境下，基本上一些主流前端框架都是遵循着 MVVM 框架进行架构的。
MVVM 说白了就是用数据进行驱动视图。

既然是数据驱动视图，那我们进行配置化页面的时候，配置项信息就是我们的数据。
所以我们只要利用好前端框架那就可以实现配置驱动视图。

以 Vue 为例：

对 Vue 有了解的同学，相比都知道 Vue 是如何进行创建页面节点的。其实 Vue 也就是只有两种方式进行创建页面节点。

1、 render

通过 h 函数进行返回值 一个 VNode 节点进行，也就是虚拟节点信息。然后通过 VNode 的属性按照 Vue 的规则进行创建 Document.Element 节点。

h 函数共有三个参数，

第一个参数： 一个 HTML 标签名、组件选项对象，或者 resolve 了上述任何一种的一个 async 函数。必填项。

第二个参数： 一个与模板中 attribute 对应的数据对象。可选。

第三个参数： 子级虚拟节点 (VNodes)，由 createElement() 构建而成， 也可以使用字符串来生成“文本虚拟节点”。可选。

2、 template

通过字符串 模板 进行创建，其逻辑就是。Vue 将模板编译成了 render 。然后通过 render 进行创建 Document.Element 节点。

在以上两种方法中，我们可以得知，Vue 最终是通过 render 进行创建的。而 render 所需要的就是 h 函数的返回值。其 h 函数返回值是通过三个参数进行处理了。所以我们只要处理好这个三个参数。我们基本上实现一个配置化页面。

简单实现一个配置化组件 ( Vue2 )

以下 demo 只是一个简单配置化组件。实现了页面渲染的处理，未进行事件等其它一系列的处理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

在上例的 Demo 中，我们可以得知是，ConfigComponent 是通过 config 信息进行配置的。config 是一个静态化的一个数据信息，可想而知 我们所需要处理的也就只是 config 配置信息就好了。
也就相当于说，我们基本上实现了 低代码 平台的第一步。 配置化页面。

结束语

请不要称我为标题党。因为我本人是已经实现了。如果你感兴趣的话，可以先去了解我做的

配置化表单

配置化项目 Demo ：该项目是基于 配置化表单 进行实现的。

当你能能够实现配置化项目的时候，基本上你就可以实现 可视化 操作项目，慢慢的从而达到 低代码 实现。

下篇文章敬请期待