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

摘要

本发明涉及一种适用于多框架语言的前端代码片段动态渲染方法和系统，方法包括：初始化各个前端框架的模版；在预设的代码输入框中填写代码片段，该代码输入框包括：语言字段，用于输入代码片段的语言类型；代码字段，用于输入可执行的代码数据；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文档进行解析和渲染具体为：

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

本实施例还提供一种适用于多框架语言的前端代码片段动态渲染系统，包括：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

进一步地，获取原生HTML文档进行解析和渲染具体为：

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

与现有技术相比，本发明首先初始化不同前端框架的模版，向开发者展示代码输入框，要求填写语言类型和代码片段，开发者可根据自己的喜好选择不同的语言填写，然后在服务端根据语言类型，将代码片段转化为对应语言的代码文件，并插入对应语言的前端框架模板中，得到渲染文件，在服务端对该渲染文件进行打包编译，转换为原生HTML文档，再传输至客户端进行解析和渲染；由此具有以下优点：

(1)在服务端初始化了对应框架的模版工程，在其中插入开发者填写的代码片段，开发者可根据自己喜好的语言填写，由服务端根据语言类型自动插入到对应的模版工程内进行变异，解决了不同的框架需要的编译环境的不同，均能自动编译转。

(2)在服务端对渲染文件进行打包编译，转换为原生HTML文档，再传输至客户端进行解析和渲染，由此实现跨框架的技术打通。

(3)配置的代码输入框包括语言字段、代码字段、div容器字段和依赖包字段，更具有可读性，其中，由于使用不同语言配置div容器时，其格式和代码均有差异，本发明设置div容器字段包括属性字段、样式字段和列表字段，规定了固定的配置格式，方便识别转换。

附图说明

图1为本发明实施例中提供的一种适用于多框架语言的前端代码片段动态渲染方法的流程示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1

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

S1：初始化各个前端框架的模版，本实施例中通过各个前端框架的脚手架，初始化各个前端框架对应的工程，作为模版；

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

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

S4：对渲染文件打包编译，并进行语言转换，生成原生HTML文档；比如Vue语言的渲染文件可使用Nuxt.js来转换为原生HTML文档，React语言的渲染文件可使用ReactDOMServer API来转换为原生HTML文档等等；

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

本发明首先初始化不同前端框架的模版，向开发者展示代码输入框，要求填写语言类型和代码片段，开发者可根据自己的喜好选择不同的语言填写，然后根据语言类型，将代码片段转化为对应语言的代码文件，并插入对应语言的前端框架模板中，得到渲染文件，在服务端对该渲染文件进行打包编译，转换为原生HTML文档，再传输至客户端进行解析和渲染，由此实现跨框架的技术打通。

作为一种优选的实施方式，代码输入框还包括：

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

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

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

作为一种优选的实施方式，div容器字段包括：

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

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

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

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

本实施例中，在客户端中根据原生HTML文档进行解析和渲染具体为：

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

本实施例还提供一种适用于多框架语言的前端代码片段动态渲染系统，包括服务端、后端和客户端，服务端被配置为执行步骤S1、S3和S4的方法的步骤，后端被配置为执行步骤S2的方法的步骤，客户端被配置为执行步骤S5的方法的步骤。

参考图1所示，下面提供本实施例的具体实施过程。

在步骤001中，需要在服务器端的目录中，通过各个前端框架的脚手架，如vuecli,react cli等，事先初始化好对应的工程作为模版，下载好对应的依赖；

在步骤002中，需要开发者定义好一段json，用来描述该代码片段的上下文，在界面中可将json用可视化的输入框等方式，让开发者填入，以下将对这个json做出解释：

在以上的json中：

language:该代码片段的语言，比如Vue,React,HTML Native等；

domId:用来包裹的div容器HTML id属性；

codeSnippet:开发者写的可执行的代码片段；

style:用来包裹的div容器的内联样式；

class:用来包裹的div容器的class列表；

dependencies:这段代码片段中用到的npm依赖包，符合npm package.json中dependencies规范；

在步骤003中，客户端在渲染该代码片段时，先将这段代码片段的定义，也就是002中的json，发送给后端服务；

在步骤004中，服务端的数据处理过程：

1)根据代码片段描述的json中的dependencis字段，用npm下载对应的所需要的依赖；

2)根据代码片段描述的json中的language字段，将codeSnippet生成对应框架语言的代码文件，插入到001生成的对应的项目模版中；

3)将该项目的打包入口设置为上述步骤生成的文件；

4)执行打包编译，将框架语言的组件生成原生的HTML+CSS+JavaScript的单一html文档，这部分需要参考各框架的服务端渲染的技术方案，比如Vue可使用Nuxt.js来实现，React可使用ReactDOMServer API来实现等等；

5)生成的html文档应当是可直接在浏览器中打开并且看到效果的。

在步骤005中，将步骤004生成的单一html文件的内容，输出返回给客户端，交由客户端负责解析和渲染

在步骤006中，客户端获取到005所给的单一html文件的内容，对script，link，style等标签进行提取，插入到客户端Web的header标签中，将div等视图标签，根据代码片段描述的json中的domId字段，找到对应的dom，使用dom的innerHTML API,将内容插入到客户端的视图中。

由于在006中将script,link,style等插入到了header中，所以这些内容会立即生效，渲染的视图也会按照定义好的样式与交互行为进行运转。

以上详细描述了本发明的较佳具体实施例。应当理解，本领域的普通技术人员无需创造性劳动就可以根据本发明的构思做出诸多修改和变化。因此，凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案，皆应在由权利要求书所确定的保护范围内。