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

说明书

本发明涉及一种适用于多框架语言的前端代码片段动态渲染方法和系统，方法包括：初始化各个前端框架的模版；在预设的代码输入框中填写代码片段，该代码输入框包括：语言字段，用于输入代码片段的语言类型；代码字段，用于输入可执行的代码数据；div容器字段，用于配置div容器；依赖包字段，用于输入代码片段中用到的依赖包；根据语言类型，将代码字段对应的填写内容生成对应框架语言的代码文件，并插入对应前端框架的模版中，生成渲染文件；对渲染文件打包编译，并进行语言转换，生成原生HTML文档；在客户端中根据原生HTML文档进行解析和渲染。与现有技术相比，本发明允许用多种框架语言开发前端技术，实现了跨框架的技术打通。

技术领域

本发明涉及前端代码渲染技术领域，尤其是涉及适用于多框架语言的前端代码片段动态渲染方法和系统。

背景技术

前端的发展日新月异，随着前端技术的发展，涌现出了各种不同的前端框架，有原生的Web(JavaScript，CSS，HTML)，基于jQuery的Web实现，Vue，Angular，AngularJS，React等等。每种框架实现一个页面/组件，有着不同的写法。

当在做前端的项目时，实现页面/组件一般是采用的基于同一种框架的实现，但是如果这个项目是一种开发平台，允许别人在上面做一些开发，实现一些在页面上的显示，就很难限制只允许别人使用同一种的框架语言。

比如，该平台的主体框架是Vue，在此平台上进行一些页面/组件开发，则需要熟悉Vue的主体框架，但是由于每个人所掌握的技术栈不同，更希望的是用每个人所擅长的技术框架，然后可以契合在主平台中。

发明内容

本发明的目的就是为了克服上述现有技术存在的缺陷而提供一种允许用多种框架语言开发前端技术的适用于多框架语言的前端代码片段动态渲染方法和系统。

本发明的目的可以通过以下技术方案来实现：

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

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

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

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

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

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

进一步地，所述代码输入框还包括：

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

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

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

进一步地，所述div容器字段包括：

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

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

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

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

进一步地，通过各个前端框架的脚手架，初始化各个前端框架对应的工程，作为模版。

进一步地，在客户端中根据所述原生HTML文档进行解析和渲染具体为：