CN115826985A - 使用dsl制作网页的方法及*** - Google Patents

Abstract

本发明提供了一种使用DSL制作网页的方法及***，包括：步骤S1：定义DSL语法；步骤S2：编译DSL到抽象语法树AST；步骤S3：编译抽象语法树AST到中间码IR；步骤S4：编译中间码IR到Javascript代码，在App框架中加载运行生成的Javascript代码。本发明针对一些特定场景，能显著加速Web应用的开发速度；本发明减少对底层技术的理解，充分利用资源参与需求开发。

Description

使用DSL制作网页的方法及***

技术领域

本发明涉及Web应用开发领域，具体地，涉及一种使用DSL制作网页的方法及***。

背景技术

当前在Web应用开发领域中，网页的制作复杂度是在不断提高的，一是有较多的前端框架供开发者选择，其次是前端的工具链越发的繁杂，往往在正式撰写网页前需要花大量的时间和精力去选择框架，类库，熟悉工具链生态后才能搭建出较为合适的前端项目工程。在一些组织中前端开发人员与后端开发人员的比例差距是比较大的，往往某个阶段有大量的前端需求产生，但是开发人员其实是不够的。

并且在后台管理***中较多见的是逻辑较为简单的，模式较为固定的需求。面对以上的简单需求可以让非前端的开发人员，亦或是产品经理来撰写网页。

专利文献CN106648659A(申请号：CN201611198098.1)公开了一种网页制作方法及***，其中方法包括：响应于编辑界面中的网页制作和编辑操作，生成描述网页内容和样式的huar格式的网页数据并进行存储；在发布网页时，读取存储的所述huar格式的网页数据进行解析和轮转分析，生成网页数据文件；将所述网页数据文件通过文件传输协议或数据传输协议传送到目标线上服务器进行发布。但该发明没有使用DSL。

发明内容

针对现有技术中的缺陷，本发明的目的是提供一种使用DSL制作网页的方法及***。

根据本发明提供的一种使用DSL制作网页的方法，包括：

步骤S1：定义DSL语法；

步骤S2：编译DSL到抽象语法树AST；

步骤S3：编译抽象语法树AST到中间码IR；

步骤S4：编译中间码IR到Javascript代码，在App框架中加载运行生成的Javascript代码。

优选地，在所述步骤S1中：

步骤S1.1：设计面向UI的DSL；

步骤S1.2：设计DSL组件，包括获取数据的接口；

DSL支持如下：变量：变量在组件中被引用，变量值类型支持包括字符串、数值、布尔、数组和字典；UI组件：组件定义、组件嵌套、组件复用、继承和组件插槽；支持Include其他DSL：导入本地DSL和网络DSL；组件间事件通知；组件数据获取与绑定；

步骤S1.3：UI组件的设计；

在花括号对中使用@key＝value的键值对定义组件的属性；组件包含组件属性和子组件；

声明复用的组件模板，别名是CommonTable，继承自Table组件，设置默认属性width：设计Include语法支持导入其他的DSL文件，支持组件的复用。

步骤S1.4：数据组件的设计：

DSL中内置了预定义的数据组件，数据组件不支持数据组件嵌套；UI组件与数据组件的绑定通过@service属性绑定数据。

优选地，在所述步骤S2中：

步骤S2.1：编译DSL到AST；定义DSL的分词规则，进行分词、语法分析，词法分析后生成抽象语法树AST；

步骤S2.2：DSL语法校验，通过步骤S2.1的结果进行语法校验。

优选地，在所述步骤S3中：

编译AST到中间码，通过编译结果AST转换到中间码形式，中间码采用JSON数据格式保存，将组件树拍平后保存在数组中，组件之间的嵌套关系使用键@children关联；在转换到中间码的过程中，将DSL中声明的组件实例化，分析组件的继承关系，分析变量的引用关系，更新最终的组件实例；将最终的组件实例保存在数组中，组件之间的依赖关系使用键@children关联。

优选地，在所述步骤S4中：

步骤S4.1：编译中间码IR到Javascript，根据生成的中间码IR的需要将中间码IR翻译成Javascript代码，实现可注册的转译器，将中间码IR转译到适配React前端框架的代码，也能够转译到适配Vue前端框架的代码以及其他的前端框架下；在转译到React框架下时，为每个数据组件建立一个Context，与数据组件相关联的UI组件消费Context中产生的数据，并且UI组件能够发送事件给数据组件进行数据的更新；

步骤S4.2：在App框架中执行步骤S4.1生成的Javascript代码，App框架了提供了步骤S4.1生成的Javascript代码中依赖的类库。

根据本发明提供的一种使用DSL制作网页的***，包括：

模块M1：定义DSL语法；

模块M2：编译DSL到抽象语法树AST；

模块M3：编译抽象语法树AST到中间码IR；

模块M4：编译中间码IR到Javascript代码，在App框架中加载运行生成的Javascript代码。

优选地，在所述模块M1中：

模块M1.1：设计面向UI的DSL；

模块M1.2：设计DSL组件，包括获取数据的接口；

DSL支持如下：变量：变量在组件中被引用，变量值类型支持包括字符串、数值、布尔、数组和字典；UI组件：组件定义、组件嵌套、组件复用、继承和组件插槽；支持Include其他DSL：导入本地DSL和网络DSL；组件间事件通知；组件数据获取与绑定；

模块M1.3：UI组件的设计；

在花括号对中使用@key＝value的键值对定义组件的属性；组件包含组件属性和子组件；

声明复用的组件模板，别名是CommonTable，继承自Table组件，设置默认属性width：设计Include语法支持导入其他的DSL文件，支持组件的复用。

模块M1.4：数据组件的设计：

DSL中内置了预定义的数据组件，数据组件不支持数据组件嵌套；UI组件与数据组件的绑定通过@service属性绑定数据。

优选地，在所述模块M2中：

模块M2.1：编译DSL到AST；定义DSL的分词规则，进行分词、语法分析，词法分析后生成抽象语法树AST；

模块M2.2：DSL语法校验，通过模块M2.1的结果进行语法校验。

优选地，在所述模块M3中：

编译AST到中间码，通过编译结果AST转换到中间码形式，中间码采用JSON数据格式保存，将组件树拍平后保存在数组中，组件之间的嵌套关系使用键@children关联；在转换到中间码的过程中，将DSL中声明的组件实例化，分析组件的继承关系，分析变量的引用关系，更新最终的组件实例；将最终的组件实例保存在数组中，组件之间的依赖关系使用键@children关联。

优选地，在所述模块M4中：

模块M4.1：编译中间码IR到Javascript，根据生成的中间码IR的需要将中间码IR翻译成Javascript代码，实现可注册的转译器，将中间码IR转译到适配React前端框架的代码，也能够转译到适配Vue前端框架的代码以及其他的前端框架下；在转译到React框架下时，为每个数据组件建立一个Context，与数据组件相关联的UI组件消费Context中产生的数据，并且UI组件能够发送事件给数据组件进行数据的更新；

模块M4.2：在App框架中执行模块M4.1生成的Javascript代码，App框架了提供了模块M4.1生成的Javascript代码中依赖的类库。

与现有技术相比，本发明具有如下的有益效果：

1、本发明针对一些特定场景，能显著加速Web应用的开发速度；

2、本发明减少对底层技术的理解，充分利用资源参与需求开发。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显：

图1为方法流程图；

图2为定义DSL语法流程图；

图3为DSL语法模块图；

图4为中间码转译Javascript代码图。

具体实施方式

下面结合具体实施例对本发明进行详细说明。以下实施例将有助于本领域的技术人员进一步理解本发明，但不以任何形式限制本发明。应当指出的是，对本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变化和改进。这些都属于本发明的保护范围。

实施例1；

本发明为Web应用开发、低代码开发领域。本发明要解决的技术问题体现在以下几点：

1.以一种高层次的抽象方式来描述网页，屏蔽底层技术细节。

2.当前方案能充分利用资源来开发常见模式的网页。

根据本发明提供的一种使用DSL制作网页的方法，如图1-图4所示，包括：

步骤S1：定义DSL语法；

具体地，在所述步骤S1中：

步骤S1.1：设计面向UI的DSL；

步骤S1.2：设计DSL组件，包括获取数据的接口；

DSL支持如下：变量：变量在组件中被引用，变量值类型支持包括字符串、数值、布尔、数组和字典；UI组件：组件定义、组件嵌套、组件复用、继承和组件插槽；支持Include其他DSL：导入本地DSL和网络DSL；组件间事件通知；组件数据获取与绑定；

步骤S1.3：UI组件的设计；

在花括号对中使用@key＝value的键值对定义组件的属性；组件包含组件属性和子组件；

声明复用的组件模板，别名是CommonTable，继承自Table组件，设置默认属性width：设计Include语法支持导入其他的DSL文件，支持组件的复用。

步骤S1.4：数据组件的设计：

DSL中内置了预定义的数据组件，数据组件不支持数据组件嵌套；UI组件与数据组件的绑定通过@service属性绑定数据。

步骤S2：编译DSL到抽象语法树AST；

具体地，在所述步骤S2中：

步骤S2.1：编译DSL到AST；定义DSL的分词规则，进行分词、语法分析，词法分析后生成抽象语法树AST；

步骤S2.2：DSL语法校验，通过步骤S2.1的结果进行语法校验。

步骤S3：编译抽象语法树AST到中间码IR；

具体地，在所述步骤S3中：

编译AST到中间码，通过编译结果AST转换到中间码形式，中间码采用JSON数据格式保存，将组件树拍平后保存在数组中，组件之间的嵌套关系使用键@children关联；在转换到中间码的过程中，将DSL中声明的组件实例化，分析组件的继承关系，分析变量的引用关系，更新最终的组件实例；将最终的组件实例保存在数组中，组件之间的依赖关系使用键@children关联。

步骤S4：编译中间码IR到Javascript代码，在App框架中加载运行生成的Javascript代码。

具体地，在所述步骤S4中：

步骤S4.1：编译中间码IR到Javascript，根据生成的中间码IR的需要将中间码IR翻译成Javascript代码，实现可注册的转译器，将中间码IR转译到适配React前端框架的代码，也能够转译到适配Vue前端框架的代码以及其他的前端框架下；在转译到React框架下时，为每个数据组件建立一个Context，与数据组件相关联的UI组件消费Context中产生的数据，并且UI组件能够发送事件给数据组件进行数据的更新；

步骤S4.2：在App框架中执行步骤S4.1生成的Javascript代码，App框架了提供了步骤S4.1生成的Javascript代码中依赖的类库。

实施例2：

实施例2为实施例1的优选例，以更为具体地对本发明进行说明。

本发明还提供一种使用DSL制作网页的***，所述使用DSL制作网页的***可以通过执行所述使用DSL制作网页的方法的流程步骤予以实现，即本领域技术人员可以将所述使用DSL制作网页的方法理解为所述使用DSL制作网页的***的优选实施方式。

根据本发明提供的一种使用DSL制作网页的***，包括：

模块M1：定义DSL语法；

具体地，在所述模块M1中：

模块M1.1：设计面向UI的DSL；

模块M1.2：设计DSL组件，包括获取数据的接口；

DSL支持如下：变量：变量在组件中被引用，变量值类型支持包括字符串、数值、布尔、数组和字典；UI组件：组件定义、组件嵌套、组件复用、继承和组件插槽；支持Include其他DSL：导入本地DSL和网络DSL；组件间事件通知；组件数据获取与绑定；

模块M1.3：UI组件的设计；

在花括号对中使用@key＝value的键值对定义组件的属性；组件包含组件属性和子组件；

声明复用的组件模板，别名是CommonTable，继承自Table组件，设置默认属性width：设计Include语法支持导入其他的DSL文件，支持组件的复用。

模块M1.4：数据组件的设计：

DSL中内置了预定义的数据组件，数据组件不支持数据组件嵌套；UI组件与数据组件的绑定通过@service属性绑定数据。

模块M2：编译DSL到抽象语法树AST；

具体地，在所述模块M2中：

模块M2.1：编译DSL到AST；定义DSL的分词规则，进行分词、语法分析，词法分析后生成抽象语法树AST；

模块M2.2：DSL语法校验，通过模块M2.1的结果进行语法校验。

模块M3：编译抽象语法树AST到中间码IR；

具体地，在所述模块M3中：

编译AST到中间码，通过编译结果AST转换到中间码形式，中间码采用JSON数据格式保存，将组件树拍平后保存在数组中，组件之间的嵌套关系使用键@children关联；在转换到中间码的过程中，将DSL中声明的组件实例化，分析组件的继承关系，分析变量的引用关系，更新最终的组件实例；将最终的组件实例保存在数组中，组件之间的依赖关系使用键@children关联。

模块M4：编译中间码IR到Javascript代码，在App框架中加载运行生成的Javascript代码。

具体地，在所述模块M4中：

模块M4.1：编译中间码IR到Javascript，根据生成的中间码IR的需要将中间码IR翻译成Javascript代码，实现可注册的转译器，将中间码IR转译到适配React前端框架的代码，也能够转译到适配Vue前端框架的代码以及其他的前端框架下；在转译到React框架下时，为每个数据组件建立一个Context，与数据组件相关联的UI组件消费Context中产生的数据，并且UI组件能够发送事件给数据组件进行数据的更新；

模块M4.2：在App框架中执行模块M4.1生成的Javascript代码，App框架了提供了模块M4.1生成的Javascript代码中依赖的类库。

实施例3：

实施例3为实施例1的优选例，以更为具体地对本发明进行说明。

参考图1的方法流程图，本发明包括如下步骤：

步骤1：定义DSL(Domain Specific Language，特定领域语言)语法。

步骤2：编译DSL到AST(Abstract Syntax Tree，抽象语法树)。

步骤3：编译AST到中间码IR(Intermediate Representation)。

步骤4：编译中间码IR到Javascript代码。

步骤5：在App框架中加载运行生成的Javascript代码。

参考图2的定义DSL语法流程，步骤1包括如下步骤：

步骤1.1：寻找一种合适的语法来作为我们的DSL语法。我们比较了现在常见的低代码工具用来描述页面使用的语法格式，常见的会使用JSON格式来作为DSL。JSON是一种方便简单的用于数据传输的格式，JSON面向的是机器可读，对于开发人员来说一般没有问题，我们设计的DSL面向的是非开发人员，例如产品经理，但是JSON语法中伴随着一些问题，例如键的双引号的使用，用JSON来描述页面会产生对象深嵌套问题。我们有参考YAML格式，YAML有一些JSON没有的功能，例如继承，但是YAML有个很容易发生的错误，就是代码缩进导致语义的变化。TOML格式比较灵活，可以将嵌套的内容展平成一个Section来描述，但是TOML缺少描述页面组件嵌套关系。最终我们自己设计了面向UI的DSL。

步骤1.2：设计DSL。DSL应该是简单的，直观的，易于被理解的。DSL应该有一定的灵活性，例如组件的复用，组件的继承。因为我们设计的DSL是面向UI的，所以组件是第一等级的。获取数据的接口也抽象成为了一种组件。

参考图3的DSL语法模块，DSL支持如下：

1、变量：变量可以在组件中被引用。变量值类型支持字符串，数值，布尔，数组，字典。

2、UI组件：

a)组件定义。

b)组件嵌套。

c)组件复用，继承。

d)组件插槽。

3、支持Include其他DSL：导入本地DSL，网络DSL。

4、组件间事件通知。

5、组件数据获取与绑定。

步骤1.3：UI组件的设计。

组件定义：组件是由【组件名】，【花括号对】组成，组件【首字母】需要大写。

组件属性定义：花括号对中使用@key＝value的键值对定义组件属性。

组件包含两部分：组件属性和子组件。

组件的声明如下(在当前DSL中#是注释的含义)：

组件的复用，我们可以声明一个可以复用的组件模板，别名是CommonTable，继承自Table组件，设置默认属性width为100％：

CommonTable：Table{

@width＝"100％"

}

CommonTable组件模板可以被实例化成多个组件对象：

组件的复用：

我们设计了Include语法来支持导入其他的DSL文件，支持组件的复用。

文件1，components.lyin：

CommonTable：Table{

@width＝"100％"

}

文件2，导入文件1：

include"components.lyin"

main＝BasicLayout{

CommonTable{}#使用从components.lyin导入的组件。

}

步骤1.4：数据组件的设计。

DSL中内置了一些预定义的数据组件，例如CRUDService。数据组件的定义与UI组件类似，但是不支持数据组件嵌套。

service1＝CRUDService{

@url＝"http://127.0.0.1:8080/api/v1/users"

}

UI组件与数据组件的绑定，我们通过@service属性来绑定数据。

Table{

@service＝service1

}

其中，步骤2包括如下步骤：

步骤2.1：编译DSL到AST。定义DSL的分词规则，进行分词，语法分析，词法分析后生成一颗抽象语法树AST。

步骤2.2：DSL语法校验，通过步骤2.1的结果进行语法校验。

其中，步骤3包括如下步骤：

步骤3.1：编译AST到中间码。通过步骤2的编译结果AST转换到中间码形式，中间码采用了JSON的数据格式来保存。我们将组件树拍平后保存在数组中，组件之间的嵌套关系使用键@children来关联。在转换到中间码的过程中，我们将DSL中声明的组件实例化，分析组件的继承关系，分析变量的引用关系，更新最终的组件实例。然后将最终的组件实例保存在数组中，组件之间的依赖关系使用键@children来关联。

组件的描述如下(字段包括但不限于以下列出的)：

参考图4的中间码转译Javascript代码。其中，步骤4包括如下步骤：

步骤4.1：编译中间码IR到Javascript。根据步骤3生成的中间码IR需要将其翻译成Javascript代码。我们实现了一个可注册的转译器，可以将中间码IR转译到适配React前端框架的代码，也可以转译到适配Vue前端框架的代码以及其他的前端框架下。在转译到React框架下时，我们会为每个数据组件建立一个Context，与数据组件相关联的UI组件可以消费Context中产生的数据，并且UI组件可以发送事件给数据组件进行数据的更新。

其中，步骤5包括如下步骤：

步骤5.1：在App框架中执行步骤4生成的Javascript代码。App框架了提供了步骤4生成的Javascript代码中依赖的类库，例如UI组件库。

本领域技术人员知道，除了以纯计算机可读程序代码方式实现本发明提供的***、装置及其各个模块以外，完全可以通过将方法步骤进行逻辑编程来使得本发明提供的***、装置及其各个模块以逻辑门、开关、专用集成电路、可编程逻辑控制器以及嵌入式微控制器等的形式来实现相同程序。所以，本发明提供的***、装置及其各个模块可以被认为是一种硬件部件，而对其内包括的用于实现各种程序的模块也可以视为硬件部件内的结构；也可以将用于实现各种功能的模块视为既可以是实现方法的软件程序又可以是硬件部件内的结构。

以上对本发明的具体实施例进行了描述。需要理解的是，本发明并不局限于上述特定实施方式，本领域技术人员可以在权利要求的范围内做出各种变化或修改，这并不影响本发明的实质内容。在不冲突的情况下，本申请的实施例和实施例中的特征可以任意相互组合。

Claims (10)

1.一种使用DSL制作网页的方法，其特征在于，包括：

步骤S1：定义DSL语法；

步骤S2：编译DSL到抽象语法树AST；

步骤S3：编译抽象语法树AST到中间码IR；

步骤S4：编译中间码IR到Javascript代码，在App框架中加载运行生成的Javascript代码。

2.根据权利要求1所述的使用DSL制作网页的方法，其特征在于，在所述步骤S1中：

步骤S1.1：设计面向UI的DSL；

步骤S1.2：设计DSL组件，包括获取数据的接口；

DSL支持如下：变量：变量在组件中被引用，变量值类型支持包括字符串、数值、布尔、数组和字典；UI组件：组件定义、组件嵌套、组件复用、继承和组件插槽；支持Include其他DSL：导入本地DSL和网络DSL；组件间事件通知；组件数据获取与绑定；

步骤S1.3：UI组件的设计；

在花括号对中使用@key＝value的键值对定义组件的属性；组件包含组件属性和子组件；

声明复用的组件模板，别名是CommonTable，继承自Table组件，设置默认属性width：设计Include语法支持导入其他的DSL文件，支持组件的复用。

步骤S1.4：数据组件的设计：

DSL中内置了预定义的数据组件，数据组件不支持数据组件嵌套；UI组件与数据组件的绑定通过@service属性绑定数据。

3.根据权利要求1所述的使用DSL制作网页的方法，其特征在于，在所述步骤S2中：

步骤S2.1：编译DSL到AST；定义DSL的分词规则，进行分词、语法分析，词法分析后生成抽象语法树AST；

步骤S2.2：DSL语法校验，通过步骤S2.1的结果进行语法校验。

4.根据权利要求1所述的使用DSL制作网页的方法，其特征在于，在所述步骤S3中：

编译AST到中间码，通过编译结果AST转换到中间码形式，中间码采用JSON数据格式保存，将组件树拍平后保存在数组中，组件之间的嵌套关系使用键@children关联；在转换到中间码的过程中，将DSL中声明的组件实例化，分析组件的继承关系，分析变量的引用关系，更新最终的组件实例；将最终的组件实例保存在数组中，组件之间的依赖关系使用键@children关联。

5.根据权利要求1所述的使用DSL制作网页的方法，其特征在于，在所述步骤S4中：

步骤S4.1：编译中间码IR到Javascript，根据生成的中间码IR的需要将中间码IR翻译成Javascript代码，实现可注册的转译器，将中间码IR转译到适配React前端框架的代码，也能够转译到适配Vue前端框架的代码以及其他的前端框架下；在转译到React框架下时，为每个数据组件建立一个Context，与数据组件相关联的UI组件消费Context中产生的数据，并且UI组件能够发送事件给数据组件进行数据的更新；

步骤S4.2：在App框架中执行步骤S4.1生成的Javascript代码，App框架了提供了步骤S4.1生成的Javascript代码中依赖的类库。

6.一种使用DSL制作网页的***，其特征在于，包括：

模块M1：定义DSL语法；

模块M2：编译DSL到抽象语法树AST；

模块M3：编译抽象语法树AST到中间码IR；

模块M4：编译中间码IR到Javascript代码，在App框架中加载运行生成的Javascript代码。

7.根据权利要求6所述的使用DSL制作网页的***，其特征在于，在所述模块M1中：

模块M1.1：设计面向UI的DSL；

模块M1.2：设计DSL组件，包括获取数据的接口；

DSL支持如下：变量：变量在组件中被引用，变量值类型支持包括字符串、数值、布尔、数组和字典；UI组件：组件定义、组件嵌套、组件复用、继承和组件插槽；支持Include其他DSL：导入本地DSL和网络DSL；组件间事件通知；组件数据获取与绑定；

模块M1.3：UI组件的设计；

在花括号对中使用@key＝value的键值对定义组件的属性；组件包含组件属性和子组件；

声明复用的组件模板，别名是CommonTable，继承自Table组件，设置默认属性width：设计Include语法支持导入其他的DSL文件，支持组件的复用。

模块M1.4：数据组件的设计：

DSL中内置了预定义的数据组件，数据组件不支持数据组件嵌套；UI组件与数据组件的绑定通过@service属性绑定数据。

8.根据权利要求6所述的使用DSL制作网页的***，其特征在于，在所述模块M2中：

模块M2.1：编译DSL到AST；定义DSL的分词规则，进行分词、语法分析，词法分析后生成抽象语法树AST；

模块M2.2：DSL语法校验，通过模块M2.1的结果进行语法校验。

9.根据权利要求6所述的使用DSL制作网页的***，其特征在于，在所述模块M3中：

编译AST到中间码，通过编译结果AST转换到中间码形式，中间码采用JSON数据格式保存，将组件树拍平后保存在数组中，组件之间的嵌套关系使用键@children关联；在转换到中间码的过程中，将DSL中声明的组件实例化，分析组件的继承关系，分析变量的引用关系，更新最终的组件实例；将最终的组件实例保存在数组中，组件之间的依赖关系使用键@children关联。

10.根据权利要求6所述的使用DSL制作网页的***，其特征在于，在所述模块M4中：

模块M4.1：编译中间码IR到Javascript，根据生成的中间码IR的需要将中间码IR翻译成Javascript代码，实现可注册的转译器，将中间码IR转译到适配React前端框架的代码，也能够转译到适配Vue前端框架的代码以及其他的前端框架下；在转译到React框架下时，为每个数据组件建立一个Context，与数据组件相关联的UI组件消费Context中产生的数据，并且UI组件能够发送事件给数据组件进行数据的更新；

模块M4.2：在App框架中执行模块M4.1生成的Javascript代码，App框架了提供了模块M4.1生成的Javascript代码中依赖的类库。

Images