CN111258675A - 共享前端组件的渲染方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及研发管理技术领域，公开了一种共享前端组件的渲染方法、装置、设备及存储介质，根据用户指令下载对应的前端组件进行渲染，提高了工作效率。本发明方法包括：设置入口函数与预置JS对象的参数，参数包括预置JS对象的挂载节点值和渲染参数基础数据；根据预置JS对象和预置开发框架生成候选前端组件；根据入口函数、参数和候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；根据HTML代码片段动态渲染对应的初始化的候选前端组件，获取渲染后的目标前端组件；根据渲染后的目标前端组件，生成JS文件；获取用户指令，并根据用户指令从预存的JS文件中得到目标JS文件，在预置页面中生成相对应的渲染后的目标前端组件。

Description

共享前端组件的渲染方法、装置、设备及存储介质

技术领域

本发明涉及研发管理技术领域，尤其涉及共享前端组件的渲染方法、装置、设备及存储介质。

背景技术

在线客服系统是基于自然语言技术的多渠道、全天候的在线服务机器人，在线客服系统应用的领域非常广，尤其在金融行业应用的更加广泛，这种通过问答的形式解决用户各类问题，已经成为企业提升与客户沟通效率，减少沟通成本的重要支撑；在线客服系统涉及到众多的企业知识和用户数据，用户咨询的不同的问题会匹配到不同的知识和数据，这些知识和数据需要以不同的展示样式告知用户。

传统的开发模式是当业务需要渲染一个特殊的知识时，将用户的问题传输到后台服务，机器人进行语义解析，匹配到对应的问题和答案，答案是一个指令标签，会通知大数据系统去查询用户的账单，然后将指令标签和用户的数据传给前端页面，前端页面根据指令标签渲染界面设计及数据。

传统的开发模式用于一个业务领域需要一个在线客服机器人的情况，是可以保证工作效率的，如果多个不同的业务领域需要同时用到在线客服机器人为用户服务，在线客服机器人需要在不同的前端各自对同一个业务数据进行编码、解析和渲染，工作效率非常低。

发明内容

本发明的提供一种共享前端组件的渲染方法、装置、设备及存储介质，用于根据不同的JS对象采用统一的开发框架开发前端组件，并将前端组件打包为JS文件上传至资源共享平台，根据用户指令调用对应的JS文件。

为本发明实施例的第一方面提供一种共享前端组件的渲染方法，包括：设置入口函数与预置JS对象的参数，所述参数包括预置JS对象的挂载节点值和渲染参数基础数据；根据所述预置JS对象和预置开发框架生成候选前端组件；根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件；根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成；获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。

可选的，在本发明实施例第一方面的第一种实现方式中，所述根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件包括：将所述挂载节点值和所述渲染参数基础数据输入所述入口函数，为所述候选前端组件赋值，生成HTML代码片段；更新所述预置JS对象与入口函数，完成对所述候选前端组件的初始化，得到初始化的候选前端组件。

可选的，在本发明实施例第一方面的第二种实现方式中，所述根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件包括：根据所述HTML代码片段生成界面UI节点，所述UI节点包括业务逻辑和层叠样式表CSS样式；将所述UI节点挂载到位置节点中，得到渲染后的目标前端组件，所述位置节点为初始化时传入挂载节点值的节点。

可选的，在本发明实施例第一方面的第三种实现方式中，在所述设置开发框架的入口函数与JS对象的参数，所述参数包括入口函数的挂载节点值和渲染参数基础数据之前，所述方法还包括：定义JS对象，得到预置JS对象，被定义的JS对象根据业务数据生成；设置开发框架和开发框架的基础样式，获取预置开发框架。

可选的，在本发明实施例第一方面的第四种实现方式中，所述设置开发框架和开发框架的基础样式，获取预置开发框架包括：设置开发框架为统一开发框架，所述统一开发框架为前端技术框架中的一种；调用flexible插件设置所述统一开发框架的根节点像素值为基准值，得到设置后的统一开发框架；将预置的尺寸比例，确定为所述设置后的统一开发框架的界面UI设计标准，得到预置开发框架。

可选的，在本发明实施例第一方面的第五种实现方式中，所述根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成包括：将所述渲染后的目标前端组件挂载到全局对象中，得到挂载后的前端组件，所述全局对象为window对象；将所述挂载后的前端组件进行打包，得到打包文件；为所述打包文件配置组件名称，所述组件名称以所述打包文件的文件名称进行定义，得到JS文件；将所述JS文件上传至资源共享平台进行注册与发布，以实现对全部所述JS文件的存储。

可选的，在本发明实施例第一方面的第六种实现方式中，所述获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件包括：获取用户指令，用户指令包括语音指令和文字指令；根据所述用户指令，在所述资源共享平台中搜寻与所述用户指令关联的JS文件，得到目标JS文件；从所述资源共享平台下载所述目标JS文件，并在预置页面中，根据所述目标JS文件渲染相对应的渲染后的目标前端组件。

本发明实施例的第二方面提供一种共享前端组件的渲染装置，包括：设置单元，用于设置入口函数与预置JS对象的参数，所述参数包括预置JS对象的挂载节点值和渲染参数基础数据；第一生成单元，用于根据所述预置JS对象和预置开发框架生成候选前端组件；初始化单元，用于根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；渲染单元，用于根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件；第二生成单元，用于根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成；处理单元，用于获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。

可选的，在本发明实施例第二方面的第一种实现方式中，初始化单元具体包括：第一生成模块，用于将所述挂载节点值和所述渲染参数基础数据输入所述入口函数，为所述候选前端组件赋值，生成HTML代码片段；更新模块，用于更新所述预置JS对象与入口函数，完成对所述候选前端组件的初始化，得到初始化的候选前端组件。

可选的，在本发明实施例第二方面的第二种实现方式中，渲染单元具体包括：第二生成模块，用于根据所述HTML代码片段生成界面UI节点，所述UI节点包括业务逻辑和层叠样式表CSS样式；获取模块，用于将所述UI节点挂载到位置节点中，得到渲染后的目标前端组件，所述位置节点为初始化时传入挂载节点值的节点。

可选的，在本发明实施例第二方面的第三种实现方式中，共享前端组件的渲染装置还包括：定义单元，用于定义JS对象，得到预置JS对象，被定义的JS对象根据业务数据生成；预设单元，用于设置开发框架和开发框架的基础样式，获取预置开发框架。

可选的，在本发明实施例第二方面的第四种实现方式中，预设单元具体用于：设置开发框架为统一开发框架，所述统一开发框架为前端技术框架中的一种；调用flexible插件设置所述统一开发框架的根节点像素值为基准值，得到设置后的统一开发框架；将预置的尺寸比例，确定为所述设置后的统一开发框架的界面UI设计标准，得到预置开发框架。

可选的，在本发明实施例第二方面的第五种实现方式中，第二生成单元具体用于：将所述渲染后的目标前端组件挂载到全局对象中，得到挂载后的前端组件，所述全局对象为window对象；将所述挂载后的前端组件进行打包，得到打包文件；为所述打包文件配置组件名称，所述组件名称以所述打包文件的文件名称进行定义，得到JS文件；将所述JS文件上传至资源共享平台进行注册与发布，以实现对全部所述JS文件的存储。

可选的，在本发明实施例第二方面的第六种实现方式中，处理单元具体用于：获取用户指令，用户指令包括语音指令和文字指令；根据所述用户指令，在所述资源共享平台中搜寻与所述用户指令关联的JS文件，得到目标JS文件；从所述资源共享平台下载所述目标JS文件，并在预置页面中，根据所述目标JS文件渲染相对应的渲染后的目标前端组件。

本发明实施例的第三方面提供了一种共享前端组件的渲染设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述任一实施方式所述的基于共享前端组件的渲染方法。

本发明实施例的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述第一方面所述的方法。

从以上技术方案可以看出，本发明实施例具有以下优点：

本发明提供一种共享前端组件的渲染方法、装置、设备及存储介质，设置入口函数与预置JS对象的参数，所述参数包括预置JS对象的挂载节点值和渲染参数基础数据；根据所述预置JS对象和预置开发框架生成候选前端组件；根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件；根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成；获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。本发明实施例，根据用户指令下载相对应的渲染后的目标前端组件进行渲染，无需对业务数据进行大量的编码和解析，提高了工作效率。

附图说明

图1为本发明中共享前端组件的渲染方法的一个实施例示意图；

图2为本发明中共享前端组件的渲染方法的另一个实施例示意图；

图3为本发明中共享前端组件的渲染装置的一个实施例示意图；

图4为本发明中共享前端组件的渲染装置的另一个实施例示意图；

图5为本发明中共享前端组件的渲染设备的一个实施例示意图。

具体实施方式

本发明提供一种共享前端组件的渲染方法、装置、设备及存储介质，用于根据不同的JS对象采用统一的开发框架开发前端组件，并将前端组件打包为JS文件上传至资源共享平台，根据用户指令调用对应的JS文件。

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”或“具有”及其任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

请参阅图1，本发明实施例中共享前端组件的渲染方法一个实施例包括：

101、设置入口函数与预置JS对象的参数，参数包括预置JS对象的挂载节点值和渲染参数基础数据。

终端设置入口函数与预置JS对象的参数，参数包括预置JS对象的挂载节点值和渲染参数基础数据。

在构造初始函数时，终端采用统一的参数传入统一的入口函数，参数包括挂载节点值和渲染参数基础数据。渲染参数基础数据包括位置、用户、账户和角色等信息，渲染参数基础数据也可以为空，具体选择哪些信息作为渲染参数基础数据需要各业务领域IT开发方自行决定。在开发中，整个文档是一个节点树，文档中的每个成分都是一个节点，由这些节点构成了一个节点树，节点又包括元素节点、属性节点和文本节点，在开发中一般只需要元素节点和属性节点。终端可以通过属性节点来获取该节点的节点值，该节点值为字符串值，本实施例中提到的挂载节点值为组件被渲染出来后需要放置的位置节点的节点值。

102、根据预置JS对象和预置开发框架生成候选前端组件。

终端根据预置JS对象和预置开发框架生成候选前端组件。

在本实施例中，预置开发框架为vue框架，例如，若预置JS对象为“额度直推”，终端采用vue框架、入口函数和参数开发一个与“额度直推”的预置JS对象相对应的“额度直推”前端组件。

103、根据入口函数、参数和候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件。

终端根据入口函数、参数和候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件。

终端通过为前端组件赋初值完成对前端组件的初始化，并得到一段HTML代码片段。

需要说明的是，初始化是指为数据对象或变量赋初值的做法，如何初始化需要取决于所用的程序语言以及所要初始化的对象的存储类型等属性；在本实施例中前端组件内部设有初始化构造函数，即入口函数，并且开放给外部页面调用。

104、根据HTML代码片段动态渲染对应的初始化的候选前端组件，获取渲染后的目标前端组件。

终端根据HTML代码片段动态渲染对应的初始化的候选前端组件，获取渲染后的目标前端组件。

在生成HTML代码片段之后，终端自动生成UI节点，终端将自动生成的UI节点挂载到节点树中，从而实现对初始化的候选前端组件的动态渲染。

需要说明的是，动态渲染初始化的候选前端组件是UI节点执行了业务逻辑后需要展示给用户看到的界面。

105、根据渲染后的目标前端组件生成JS文件，并存储全部JS文件，JS文件由渲染后的目标前端组件打包生成。

终端根据渲染后的目标前端组件生成JS文件，并存储全部JS文件，JS文件由渲染后的目标前端组件打包生成。

终端将渲染后的目标前端组件打包，得到JS文件，再将JS文件上传至资源共享平台，在资源共享平台注册与发布，完成对JS文件的存储，终端在接受用户指令后，通过中台从资源共享平台调用相对应的JS文件，并渲染与JS文件相对应的渲染后的目标前端组件。

106、获取用户指令，并根据用户指令从预存的JS文件中得到目标JS文件，根据目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。

获取用户指令，并根据用户指令从预存的JS文件中得到目标JS文件，根据目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。

用户在页面的对话框中输入指令，终端获取用户指令。

例如，用户在页面对话框输入“额度”，终端获取的用户指令为“额度”，根据“额度”的用户指令得到并下载“额度直推”的目标JS文件，然后终端渲染与“额度直推”的目标JS文件相对应的“额度直推”渲染后的目标前端组件。

本发明实施例，根据用户指令下载相对应的渲染后的目标前端组件进行渲染，无需对业务数据进行大量的编码和解析，提高了工作效率。

请参阅图2，本发明实施例中共享前端组件的渲染方法另一个实施例包括：

201、定义JS对象，得到预置JS对象，被定义的JS对象根据业务数据生成。

终端定义JS对象，得到预置JS对象，被定义的JS对象根据业务数据生成。

终端定义一个JS对象，JS对象可以为信用卡、借记卡、理财和重客等业务数据，根据业务数据的不同可以生成不同的JS对象，从而获取预置JS对象。

例如，可以将信用卡业务数据的“额度直推”定义为一个JS对象，终端得到“额度直推”的预置JS对象。

202、设置开发框架和开发框架的基础样式，获取预置开发框架。

设置开发框架和开发框架的基础样式，获取预置开发框架。

具体的，终端设置开发框架为统一开发框架，统一开发框架为前端技术框架中的一种；终端调用flexible插件设置统一开发框架的根节点像素值为基准值，得到设置后的统一开发框架；终端将预置的尺寸比例，确定为设置后的统一开发框架的界面UI设计标准，得到预置开发框架。

终端在完成定义JS对象后，为开发前端组件做准备，由于可以根据不同业务领域定义很多不同的JS对象，需要很多的IT开发方，为了避免样式不兼容和前端组件无法复用的问题，本方案的终端选择采用统一的基础样式和开发框架。

终端可以根据实际情况采用原生JS、vue、react和Angularjs等前端技术框架，在本实施例中，终端采用vue作为开发框架，终端调用flexible插件将基准值设为32，可以将基准值设置为其他数值，将预置的尺寸比例设置为16:9，也可以将预置的尺寸比例设置为其他比例，本实施例对开发框架、基准值和预置的尺寸比例不做具体限定。

需要说明的是，调用flexible插件设置基准值能够使得开发出来的前端组价在页面显示时，可以根据电子屏幕分辨率大小自动调节宽度。各业务领域IT开发方使用预置的尺寸比例为开发框架的基础样式的UI设计标准，在其他业务领域IT开发方使用时，能够有效的避免显示比例不统一的问题。

203、设置入口函数与预置JS对象的参数，参数包括预置JS对象的挂载节点值和渲染参数基础数据。

终端设置入口函数与预置JS对象的参数，参数包括预置JS对象的挂载节点值和渲染参数基础数据。

在构造初始函数时，终端采用统一的参数传入统一的入口函数，参数包括挂载节点值和渲染参数基础数据。渲染参数基础数据包括位置、用户、账户和角色等信息，渲染参数基础数据也可以为空，具体选择哪些信息作为渲染参数基础数据需要各业务领域IT开发方自行决定。在开发中，整个文档是一个节点树，文档中的每个成分都是一个节点，由这些节点构成了一个节点树，节点又包括元素节点、属性节点和文本节点，在开发中一般只需要元素节点和属性节点。终端可以通过属性节点来获取该节点的节点值，该节点值为字符串值，本实施例中提到的挂载节点值为组件被渲染出来后需要放置的位置节点的节点值。

204、根据预置JS对象和预置开发框架生成候选前端组件。

终端根据预置JS对象和预置开发框架生成候选前端组件。

在本实施例中，预置开发框架为vue框架，例如，若预置JS对象为“额度直推”，终端采用vue框架、入口函数和参数开发一个与“额度直推”的预置JS对象相对应的“额度直推”前端组件。

205、将挂载节点值和渲染参数基础数据输入入口函数，为候选前端组件赋值，生成HTML代码片段。

终端将挂载节点值和渲染参数基础数据输入入口函数，为候选前端组件赋值，生成HTML代码片段。

需要说明的是，挂载节点值为组件需要被挂载的节点的值，渲染参数基础数据包括位置、用户、账户和角色等。

206、更新预置JS对象与入口函数，完成对候选前端组件的初始化，得到初始化的候选前端组件。

终端更新预置JS对象与入口函数，完成对候选前端组件的初始化，得到初始化的候选前端组件。

构造函数主要用来在创建对象时初始化对象，即为对象成员变量赋初始值，大多数与new运算符一起使用在创建对象的语句中，在本实施例中，构造函数为入口函数；更新JS对象和入口函数中的“更新”，实际上是执行一种运算符“new”，更新对象时，更新对象必须指定一个可以用来创建实例的已定义类，可以在声明语句或赋值语句中使用new。执行该语句时，它将创建对象并调用指定类的函数。在本实施例中，终端将前端组件所需要的挂载节点值和渲染参数基础数据传入入口参数，使得终端内部产生一段HTML代码片段，再更新JS对象和入口函数，终端调用这段HTML代码片段，这样就完成了对候选前端组件的初始化，从而得到初始化的候选前端组件。

需要说明的是，在执行初始化之后，终端可以使前端组件实现相关的业务逻辑，业务逻辑包括HTTP请求、数据可视化、图表化等。

例如，需要对用户的使用轨迹进行统计，可以使用数据可视化的方式，将业务数据进行图表化处理，如果在基础数据不足，需要对用户维度下更多的业务数据进行统计，可以在前端组件中定义HTTP请求或者socket等请求获取到更对的业务数据进行展示。

207、根据HTML代码片段生成界面UI节点，UI节点包括业务逻辑和层叠样式表CSS样式。

终端根据HTML代码片段生成界面UI节点，UI节点包括业务逻辑和层叠样式表CSS样式。

在将JS对象的挂载节点值和渲染参数基础数据传入入口函数之后，前端组件内部生成一段HTML代码片段，终端根据这段HTML代码片段自动生成UI节点。

208、将UI节点挂载到位置节点中，得到渲染后的目标前端组件，位置节点为初始化时传入挂载节点值的节点。

终端将UI节点挂载到位置节点中，得到渲染后的目标前端组件，位置节点为初始化时传入挂载节点值的节点。

位置节点可以理解为在对前端组件执行初始化时，传入挂载节点值的位置的节点，终端使用append方法将生成的UI节点挂载在位置节点中，即将自动生成的UI节点采用append方法挂载到节点树中属于自己的位置，从而实现前端组件的动态渲染，得到渲染后的目标前端组件。

需要说明的是，动态渲染前端组件是UI节点执行了业务逻辑后需要展示给用户看到的界面。

209、根据渲染后的目标前端组件生成JS文件，并存储全部JS文件，JS文件由渲染后的目标前端组件打包生成。

终端根据渲染后的目标前端组件生成JS文件，并存储全部JS文件，JS文件由渲染后的目标前端组件打包生成。

具体的，终端将渲染后的目标前端组件挂载到全局对象中，得到挂载后的前端组件，全局对象为window对象；终端将挂载后的前端组件进行打包，得到打包文件；终端为打包文件配置组件名称，组件名称以打包文件的文件名称进行定义，得到JS文件；终端将JS文件上传至资源共享平台进行注册与发布，以实现对全部JS文件的存储。

终端采用roll up模块打包工具将渲染后的目标前端组件打包成一个单独可执行的打包文件，打包文件的格式为min.js，终端为格式为min.js的打包文件命名，例如将“额度直推”的打包文件命名为“limitContent.min.js”，得到“limitContent.min.js”的JS文件，最后终端将“limitContent.min.js”的JS文件上传至资源共享平台，在资源共享平台注册、并发布，完成对全部JS文件的存储，终端在接受用户指令后，通过中台从资源共享平台下载相对应的JS文件，并渲染与JS文件相对应的渲染后的目标前端组件。

210、获取用户指令，并根据用户指令从预存的JS文件中得到目标JS文件，根据目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。

终端获取用户指令，并根据用户指令从预存的JS文件中得到目标JS文件，根据目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。

具体的，终端获取用户指令，用户指令包括语音指令和文字指令；终端根据用户指令，在资源共享平台中搜寻与用户指令关联的JS文件，得到目标JS文件；终端从资源共享平台下载目标JS文件，并在预置页面中，根据所述目标JS文件渲染相对应的渲染后的目标前端组件。

用户在页面的对话框中输入指令，终端获取用户指令。

例如用户在页面对话框输入“额度”，终端获取的用户指令为“额度”，根据“额度”的用户指令在资源共享平台中搜寻相关联的JS文件，得到“limitContent.min.js”的目标JS文件，终端通过中台下载“limitContent.min.js”的目标JS文件，并在预置页面生成与“limitContent.min.js”的目标JS文件相对应渲染后的目标前端组件。

本发明实施例用于根据用户指令下载相对应的渲染后的目标前端组件进行渲染，无需对业务数据进行大量的编码和解析，提高了工作效率。

上面对本发明实施例中共享前端组件的渲染方法进行了描述，下面对本发明实施例中共享前端组件的渲染装置进行描述，请参阅图3，本发明实施例中共享前端组件的渲染装置一个实施例包括：

设置单元301，用于设置入口函数与预置JS对象的参数，参数包括预置JS对象的挂载节点值和渲染参数基础数据；

第一生成单元302，用于根据预置JS对象和预置开发框架生成候选前端组件；

初始化单元303，用于根据入口函数、参数和候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；

渲染单元304，用于根据HTML代码片段动态渲染对应的初始化的候选前端组件，获取渲染后的目标前端组件；

第二生成单元305，用于根据渲染后的目标前端组件生成JS文件，并存储全部JS文件，JS文件由渲染后的目标前端组件打包生成；

处理单元306，用于获取用户指令，并根据用户指令从预存的JS文件中得到目标JS文件，根据目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。

本发明实施例，根据用户指令下载相对应的渲染后的目标前端组件进行渲染，无需对业务数据进行大量的编码和解析，提高了工作效率。

请参阅图4，本发明实施例中共享前端组件的渲染装置另一个实施例包括：

设置单元301，用于设置入口函数与预置JS对象的参数，参数包括预置JS对象的挂载节点值和渲染参数基础数据；

第一生成单元302，用于根据预置JS对象和预置开发框架生成候选前端组件；

初始化单元303，用于根据入口函数、参数和候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；

渲染单元304，用于根据HTML代码片段动态渲染对应的初始化的候选前端组件，获取渲染后的目标前端组件；

第二生成单元305，用于根据渲染后的目标前端组件生成JS文件，并存储全部JS文件，JS文件由渲染后的目标前端组件打包生成；

处理单元306，用于获取用户指令，并根据用户指令从预存的JS文件中得到目标JS文件，根据目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。

可选的，初始化单元303具体包括：

第一生成模块3031，用于将挂载节点值和渲染参数基础数据输入入口函数，为候选前端组件赋值，生成HTML代码片段；

更新模块3032，用于更新预置JS对象与入口函数，调用HTML代码片段，完成对候选前端组件的初始化，得到初始化的候选前端组件。

可选的，渲染单元304具体包括：

第二生成模块3041，用于根据HTML代码片段生成界面UI节点，UI节点包括业务逻辑和层叠样式表CSS样式；

获取模块3042，用于将UI节点挂载到位置节点中，得到渲染后的目标前端组件，位置节点为初始化时传入挂载节点值的节点。

可选的，共享前端组件的渲染装置还包括：

定义单元307，用于定义JS对象，得到预置JS对象，被定义的JS对象根据业务数据生成；

预设单元308，用于设置开发框架和开发框架的基础样式，获取预置开发框架。

可选的，预设单元308具体用于：

设置开发框架为统一开发框架，统一开发框架为前端技术框架中的一种；

调用flexible插件设置统一开发框架的根节点像素值为基准值，得到设置后的统一开发框架；

将预置的尺寸比例，确定为设置后的统一开发框架的界面UI设计标准，得到预置开发框架。

可选的，第二生成单元305具体用于：

将渲染后的目标前端组件挂载到全局对象中，得到挂载后的前端组件，全局对象为window对象；

将挂载后的前端组件进行打包，得到打包文件；

为打包文件配置组件名称，组件名称以打包文件的文件名称进行定义，得到JS文件；

将JS文件上传至资源共享平台进行注册与发布，以实现对全部JS文件的存储。

可选的，处理单元306具体用于：

获取用户指令，用户指令包括语音指令和文字指令；

根据用户指令，在资源共享平台中搜寻与用户指令关联的JS文件，得到目标JS文件；

从资源共享平台下载所述目标JS文件，并在预置页面中，根据目标JS文件渲染相对应的渲染后的目标前端组件。

本发明实施例，根据用户指令下载相对应的渲染后的目标前端组件进行渲染，无需对业务数据进行大量的编码和解析，提高了工作效率。

上面图3至图4从模块化功能实体的角度对本发明实施例中的共享前端组件的渲染装置进行详细描述，下面从硬件处理的角度对本发明实施例中共享前端组件的渲染设备进行详细描述。

下面结合图5对共享前端组件的渲染设备的各个构成部件进行具体的介绍：

图5是本发明实施例提供的一种共享前端组件的渲染设备的结构示意图，该共享前端组件的渲染的设备500可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)501(例如，一个或一个以上处理器)和存储器509，一个或一个以上存储应用程序507或数据506的存储介质508(例如一个或一个以上海量存储设备)。其中，存储器509和存储介质508可以是短暂存储或持久存储。存储在存储介质508的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对签到管理设备中的一系列指令操作。更进一步地，处理器501可以设置为与存储介质508通信，在共享前端组件的渲染设备500上执行存储介质508中的一系列指令操作。

共享前端组件的渲染设备500还可以包括一个或一个以上电源502，一个或一个以上有线或无线网络接口503，一个或一个以上输入输出接口504，和/或，一个或一个以上操作系统505，例如Windows Serve，Mac OS X，Unix，Linux，FreeBSD等等。本领域技术人员可以理解，图5中示出的共享前端组件的渲染设备结构并不构成对共享前端组件的渲染设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

下面结合图5对共享前端组件的渲染设备的各个构成部件进行具体的介绍：

处理器501是共享前端组件的渲染设备的控制中心，可以按照共享前端组件的渲染方法进行处理。处理器501利用各种接口和线路连接整个共享前端组件的渲染设备的各个部分，通过运行或执行存储在存储器509内的软件程序和/或模块，以及调用存储在存储器509内的数据，利用用户指令调用并渲染相对应的渲染后的目标前端组件，提高工作效率。存储介质508和存储器509都是存储数据的载体，本发明实施例中，存储介质508可以是指储存容量较小，但速度快的内存储器，而存储器509可以是储存容量大，但储存速度慢的外存储器。

存储器509可用于存储软件程序以及模块，处理器501通过运行存储在存储器509的软件程序以及模块，从而执行共享前端组件的渲染设备500的各种功能应用以及数据处理。存储器509可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据共享前端组件的渲染设备的使用所创建的数据等。此外，存储器509可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他非易失性固态存储器件。在本发明实施例中提供的共享前端组件的渲染程序和接收到的数据流存储在存储器中，当需要使用时，处理器501从存储器509中调用。

在计算机上加载和执行计算机程序指令时，全部或部分地产生按照本发明实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。计算机指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一计算机可读存储介质传输，例如，计算机指令可以从一个网站站点、计算机、服务器或数据中心通过有线(例如同轴电缆、光纤、双绞线)或无线(例如红外、无线、微波等)方式向另一个网站站点、计算机、服务器或数据中心进行传输。计算机可读存储介质可以是计算机能够存储的任何可用介质或者是包含一个或多个可用介质集成的服务器、数据中心等数据存储设备。可用介质可以是磁性介质，(例如，软盘、硬盘、磁带)、光介质(例如，光盘)、或者半导体介质(例如固态硬盘(solid state disk，SSD))等。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本发明所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种共享前端组件的渲染方法，其特征在于，包括：

设置入口函数与预置JS对象的参数，所述参数包括预置JS对象的挂载节点值和渲染参数基础数据；

根据所述预置JS对象和预置开发框架生成候选前端组件；

根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；

根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件；

根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成；

获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。

2.根据权利要求1所述的共享前端组件的渲染方法，其特征在于，所述根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件包括：

将所述挂载节点值和所述渲染参数基础数据输入所述入口函数，为所述候选前端组件赋值，生成HTML代码片段；

更新所述预置JS对象与入口函数，完成对所述候选前端组件的初始化，得到初始化的候选前端组件。

3.根据权利要求1所述的共享前端组件的渲染方法，其特征在于，所述根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件包括：

根据所述HTML代码片段生成界面UI节点，所述UI节点包括业务逻辑和层叠样式表CSS样式；

将所述UI节点挂载到位置节点中，得到渲染后的目标前端组件，所述位置节点为初始化时传入挂载节点值的节点。

4.根据权利要求1所述的共享前端组件的渲染方法，其特征在于，在所述设置开发框架的入口函数与JS对象的参数，所述参数包括入口函数的挂载节点值和渲染参数基础数据之前，所述方法还包括：

定义JS对象，得到预置JS对象，被定义的JS对象根据业务数据生成；

设置开发框架和开发框架的基础样式，获取预置开发框架。

5.根据权利要求4所述的共享前端组件的渲染方法，其特征在于，所述设置开发框架和开发框架的基础样式，获取预置开发框架包括：

设置开发框架为统一开发框架，所述统一开发框架为前端技术框架中的一种；

调用flexible插件设置所述统一开发框架的根节点像素值为基准值，得到设置后的统一开发框架；

将预置的尺寸比例，确定为所述设置后的统一开发框架的界面UI设计标准，得到预置开发框架。

6.根据权利要求1-5中任一项所述的共享前端组件的渲染方法，其特征在于，所述根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成包括：

将所述渲染后的目标前端组件挂载到全局对象中，得到挂载后的前端组件，所述全局对象为window对象；

将所述挂载后的前端组件进行打包，得到打包文件；

为所述打包文件配置组件名称，所述组件名称以所述打包文件的文件名称进行定义，得到JS文件；

将所述JS文件上传至资源共享平台进行注册与发布，以实现对全部所述JS文件的存储。

7.根据权利要求6所述的共享前端组件的渲染方法，其特征在于，所述获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件包括：

获取用户指令，用户指令包括语音指令和文字指令；

根据所述用户指令，在所述资源共享平台中搜寻与所述用户指令关联的JS文件，得到目标JS文件；

从所述资源共享平台下载所述目标JS文件，并在预置页面中，根据所述目标JS文件渲染相对应的渲染后的目标前端组件。

8.一种共享前端组件的渲染装置，其特征在于，包括：

设置单元，用于设置入口函数与预置JS对象的参数，所述参数包括预置JS对象的挂载节点值和渲染参数基础数据；

第一生成单元，用于根据所述预置JS对象和预置开发框架生成候选前端组件；

初始化单元，用于根据所述入口函数、所述参数和所述候选前端组件，生成超文本标记语言HTML代码片段和初始化的候选前端组件；

渲染单元，用于根据所述HTML代码片段动态渲染对应的所述初始化的候选前端组件，获取渲染后的目标前端组件；

第二生成单元，用于根据所述渲染后的目标前端组件生成JS文件，并存储全部所述JS文件，所述JS文件由所述渲染后的目标前端组件打包生成；

调用单元，用于获取用户指令，并根据所述用户指令从预存的JS文件中得到目标JS文件，根据所述目标JS文件在预置页面中生成相对应的渲染后的目标前端组件。

9.一种共享前端组件的渲染设备，其特征在于，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如权利要求1-7中任意一项所述的共享前端组件的渲染方法。

10.一种计算机可读存储介质，其特征在于，包括指令，当所述指令在计算机上运行时，使得计算机执行如权利要求1-7中任意一项所述的共享前端组件的渲染方法的步骤。

Images