买专利卖专利找龙图腾，真高效！ 查专利查商标用IPTOP,全免费！专利年费监控用IP管家,真方便！

申请/专利权人：上海得帆信息技术有限公司

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

主权项：1.一种适用于多框架语言的前端代码片段动态渲染方法，其特征在于，包括以下步骤：初始化各个前端框架的模版；在预设的代码输入框中填写代码片段，该代码输入框包括：语言字段，用于输入代码片段的语言类型；代码字段，用于输入可执行的代码数据；根据所述语言类型，将所述代码字段对应的填写内容生成对应框架语言的代码文件，并插入对应前端框架的模版中，生成渲染文件；对所述渲染文件打包编译，并进行语言转换，生成原生HTML文档；在客户端中根据所述原生HTML文档进行解析和渲染；所述代码输入框还包括：div容器字段，用于配置div容器；依赖包字段，用于输入代码片段中用到的依赖包；根据所述div容器字段对应的填写内容，配置div容器；根据所述依赖包字段对应的填写内容，下载依赖包；将所述代码文件、div容器的配置和依赖包插入对应前端框架的模版中，生成所述渲染文件；所述div容器字段包括：属性字段，用于配置div容器的HTMLid属性；样式字段，用于配置div容器的内联样式；列表字段，用于配置div容器的class列表；根据所述div容器的HTMLid属性、内联样式和class列表，配置div容器；通过各个前端框架的脚手架，初始化各个前端框架对应的工程，作为模版；在客户端中根据所述原生HTML文档进行解析和渲染具体为：从所述原生HTML文档中提取script标签、link标签和style标签，并加入客户端中Web应用程序的header标签中，从所述原生HTML文档中提取div标签，并根据所述可执行的代码数据中的domId字段，将代码片段的内容插入到客户端的视图中。

全文数据：

权利要求：

百度查询： 上海得帆信息技术有限公司 适用于多框架语言的前端代码片段动态渲染方法和系统