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

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

【技术实现步骤摘要】
适用于多框架语言的前端代码片段动态渲染方法和系统


[0001]本专利技术涉及前端代码渲染
，尤其是涉及适用于多框架语言的前端代码片段动态渲染方法和系统。

技术介绍

[0002]前端的发展日新月异，随着前端技术的发展，涌现出了各种不同的前端框架，有原生的Web(JavaScript，CSS，HTML)，基于jQuery的Web实现，Vue，Angular，AngularJS，React等等。每种框架实现一个页面/组件，有着不同的写法。
[0003]当在做前端的项目时，实现页面/组件一般是采用的基于同一种框架的实现，但是如果这个项目是一种开发平台，允许别人在上面做一些开发，实现一些在页面上的显示，就很难限制只允许别人使用同一种的框架语言。
[0004]比如，该平台的主体框架是Vue，在此平台上进行一些页面/组件开发，则需要熟悉Vue的主体框架，但是由于每个人所掌握的技术栈不同，更希望的是用每个人所擅长的技术框架，然后可以契合在主平台中。

技术实现思路

[0005]本专利技术的目的就是为了克服上述现有技术存在的缺本文档来自技高网...

【技术保护点】

【技术特征摘要】
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.一种适用于多框架语言的前端代码片段动态渲染系统，其...

【专利技术属性】
技术研发人员：王周健，唐炜，
申请(专利权)人：上海得帆信息技术有限公司，
类型：发明
国别省市：