[发明专利]适用于多框架语言的前端代码片段动态渲染方法和系统

权利要求书

1.一种适用于多框架语言的前端代码片段动态渲染方法，其特征在于，包括以下步骤：

初始化各个前端框架的模版；

在预设的代码输入框中填写代码片段，该代码输入框包括：语言字段，用于输入代码片段的语言类型；代码字段，用于输入可执行的代码数据；

根据所述语言类型，将所述代码字段对应的填写内容生成对应框架语言的代码文件，并插入对应前端框架的模版中，生成渲染文件；

对所述渲染文件打包编译，并进行语言转换，生成原生HTML文档；

在客户端中根据所述原生HTML文档进行解析和渲染。

2.根据权利要求1所述的一种适用于多框架语言的前端代码片段动态渲染方法，其特征在于，所述代码输入框还包括：

div容器字段，用于配置div容器；

依赖包字段，用于输入代码片段中用到的依赖包；

根据所述div容器字段对应的填写内容，配置div容器；根据所述依赖包字段对应的填写内容，下载依赖包；将所述代码文件、div容器的配置和依赖包插入对应前端框架的模版中，生成所述渲染文件。

3.根据权利要求2所述的一种适用于多框架语言的前端代码片段动态渲染方法，其特征在于，所述div容器字段包括：

属性字段，用于配置div容器的HTML id属性；

样式字段，用于配置div容器的内联样式；

列表字段，用于配置div容器的class列表；

根据所述div容器的HTML id属性、内联样式和class列表，配置div容器。

4.根据权利要求1所述的一种适用于多框架语言的前端代码片段动态渲染方法，其特征在于，通过各个前端框架的脚手架，初始化各个前端框架对应的工程，作为模版。

5.根据权利要求1所述的一种适用于多框架语言的前端代码片段动态渲染方法，其特征在于，在客户端中根据所述原生HTML文档进行解析和渲染具体为：

从所述原生HTML文档中提取script标签、link标签和style标签，并加入客户端中Web应用程序的header标签中，从所述原生HTML文档中提取div标签，并根据所述可执行的代码数据中的domId字段，将代码片段的内容插入到客户端的视图中。

6.一种适用于多框架语言的前端代码片段动态渲染系统，其特征在于，包括：

服务端，被配置为初始化各个前端框架的模版，预先设置代码输入框，该代码输入框包括：语言字段，用于输入代码片段的语言类型；代码字段，用于输入可执行的代码数据；

获取根据代码输入框填写的代码片段，根据所述语言类型，将所述代码字段对应的填写内容生成对应框架语言的代码文件，并插入对应前端框架的模版中，生成渲染文件；

对所述渲染文件打包编译，并进行语言转换，生成原生HTML文档；

后端，被配置为显示所述代码输入框，在该代码输入框中填写代码片段；

客户端，被配置为获取原生HTML文档进行解析和渲染。

7.根据权利要求6所述的一种适用于多框架语言的前端代码片段动态渲染系统，其特征在于，所述代码输入框还包括：

div容器字段，用于配置div容器；

依赖包字段，用于输入代码片段中用到的依赖包；

根据所述div容器字段对应的填写内容，配置div容器；根据所述依赖包字段对应的填写内容，下载依赖包；将所述代码文件、div容器的配置和依赖包插入对应前端框架的模版中，生成所述渲染文件。

8.根据权利要求7所述的一种适用于多框架语言的前端代码片段动态渲染系统，其特征在于，所述div容器字段包括：

属性字段，用于配置div容器的HTML id属性；

样式字段，用于配置div容器的内联样式；

列表字段，用于配置div容器的class列表；

根据所述div容器的HTML id属性、内联样式和class列表，配置div容器。