CN107577515A - 可视化组件的扩展方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开实施例公开了一种可视化组件的扩展方法、装置、电子设备及存储介质，所述方法包括：获取可视化组件的源代码；编译所述可视化组件的源代码，生成所述可视化组件对应的可执行模块文件,所述可执行模块文件符合预设规范；按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中。通过本公开实施例，实现了可视化组件的即插即用，从根本上规避了已有技术中因为直接修改可视化编辑系统源代码而带来的副作用，也保证了可视化编辑系统的通用性，使得可视化编辑系统更健壮，代码管理更简单，节省了开发团队的协作沟通成本。

Description

可视化组件的扩展方法、装置、电子设备及存储介质

技术领域

本公开涉及计算机技术领域，具体涉及一种可视化组件的扩展方法、装置、电子设备及计算机可读存储介质。

背景技术

页面可视化编辑系统是指用户通过预先编写的功能组件，在系统里进行拖拽、配置等，最终生成所需页面的系统。相比较于传统的页面开发是通过程序员编写代码最终生成页面，通过所见即所得的方式进行页面开发能极大提升开发效率，极大提高组件的复用。开发人员也从重复性的劳动中解放出来，更关注于核心业务和组件的开发。目前，随着互联网企业的飞速发展，越来越多的运营平台针对运营活动的需求，搭建可视化编辑系统，通过拖拽组件和配置，最终生成运营活动页面。由于运营活动基本上每次都不完全一样，所以每次都需要开发新的组件来实现新活动的业务逻辑。因此，随着越来越多的产品线的运营活动接入或者想接入可视化编辑系统，可视化组件的扩展越来越受到开发人员的重视。

发明内容

本公开实施例提供一种可视化组件的扩展方法、装置、电子设备及计算机可读存储介质。

第一方面，本公开实施例中提供了一种可视化组件的扩展方法。

具体的，所述可视化组件的扩展方法，包括：

获取可视化组件的源代码；

编译所述可视化组件的源代码，生成所述可视化组件对应的可执行模块文件,所述可执行模块文件符合预设规范；

按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中。

结合第一方面，本公开在第一方面的第一种实现方式中，

按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中，包括：

按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统的可视化组件列表中；

在所述可视化编辑系统的前端显示所述可视化组件。

结合第一方面、第一方面的第一种实现方式，本公开在第一方面的第二种实现方式中，还包括：

响应于所述可视化组件的拖拽事件，所述可视化编辑系统获取被拖拽的所述可视化组件对应的所述可执行模块文件；

在被拖拽至的页面运行被拖拽的所述可视化组件的所述可执行模块文件。

结合第一方面、第一方面的第一种实现方式或第一方面的第二种实现方式，本公开在第一方面的第三种实现方式中，还包括：

响应于页面发布的事件，获取待发布页面中所配置的可视化组件的源代码；

将所述可视化组件的源代码添加至所述待发布页面对应的源代码中；

对所述待发布页面对应的源代码进行编译，生成包括所述可视化组件的发布页面。

结合第一方面、第一方面的第一种实现方式、第一方面的第二种实现方式或第一方面的第三种实现方式，在本公开第一方面的第四种实现方式中，所述预设规范为umd规范。

结合第一方面、第一方面的第一种实现方式、第一方面的第二种实现方式或第一方面的第三种实现方式，本公开在第一方面的第五种实现方式中，所述可视化组件的源代码基于vue.js框架生成。

第二方面，本公开实施例提供了一种可视化组件的扩展装置，包括：

获取模块，被配置为获取可视化组件的源代码；

第一编译模块，被配置为编译所述可视化组件的源代码，生成所述可视化组件对应的可执行模块文件,所述可执行模块文件符合预设规范；

加载模块，被配置为按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中。

结合第二方面，本公开在第二方面的第一种实现方式中，所述加载模块包括：

加载子模块，被配置为按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统的可视化组件列表中；

显示子模块，被配置为在所述可视化编辑系统的前端显示所述可视化组件。

结合第二方面、第二方面的第一种实现方式，本公开在第二方面的第二种实现方式中，还包括：

第一响应模块，被配置为按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统的可视化组件列表中；

运行模块，被配置为在被拖拽至的页面运行被拖拽的所述可视化组件的所述可执行模块文件。

结合第二方面、第二方面的第一种实现方式或第二方面的第二种实现方式，本公开在第二方面的第三种实现方式中，还包括：

第二响应模块，被配置为响应于页面发布的事件，获取待发布页面中所配置的可视化组件的源代码；

添加模块，被配置为将所述可视化组件的源代码添加至所述待发布页面对应的源代码中；

第二编译模块，被配置为对所述待发布页面对应的源代码进行编译，生成包括所述可视化组件的发布页面。

结合第二方面、第二方面的第一种实现方式、第二方面的第二种实现方式或第二方面的第三种实现方式，在本公开第二方面的第四种实现方式中，所述预设规范为umd规范。

结合第二方面、第二方面的第一种实现方式、第二方面的第二种实现方式或第二方面的第三种实现方式，本公开在第二方面的第五种实现方式中，所述可视化组件的源代码基于vue.js框架生成。

所述功能可以通过硬件实现，也可以通过硬件执行相应的软件实现。所述硬件或软件包括一个或多个与上述功能相对应的模块。

在一个可能的设计中，可视化组件的扩展装置的结构中包括存储器和处理器，所述存储器用于存储一条或多条支持可视化组件的扩展装置执行上述第一方面中可视化组件的扩展方法的计算机指令，所述处理器被配置为用于执行所述存储器中存储的计算机指令。所述可视化组件的扩展装置还可以包括通信接口，用于可视化组件的扩展装置与其他设备或通信网络通信。

第三方面，本公开实施例提供了一种电子设备，包括存储器和处理器；其中，所述存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器执行以实现第一方面所述的方法步骤。

第四方面，本公开实施例提供了一种计算机可读存储介质，用于存储可视化组件的扩展装置所用的计算机指令，其包含用于执行上述第一方面中可视化组件的扩展方法所涉及的计算机指令。

本公开实施例提供的技术方案可以包括以下有益效果：

本公开实施例通过单独编写出可视化组件的源代码后，将可视化组件的源代码单独编译，生成预设文件格式，以便能够加载至可视化编辑系统中，供后续用户使用该可视化组件。通过本公开实施例，实现了可视化组件的即插即用，从根本上规避了已有技术中因为直接修改可视化编辑系统源代码而带来的副作用，也保证了可视化编辑系统的通用性，使得可视化编辑系统更健壮，代码管理更简单，节省了开发团队的协作沟通成本。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

结合附图，通过以下非限制性实施方式的详细描述，本公开的其它特征、目的和优点将变得更加明显。在附图中：

图1示出根据本公开一实施方式的可视化组件的扩展方法的流程图；

图2示出根据图1所示实施方式的步骤S103的流程图；

图3示出根据本公开又一实施方式的可视化组件的扩展方法的流程图；

图4示出根据本公开又一实施方式的可视化组件的扩展方法的流程图；

图5示出根据本公开一实施方式的可视化组件的扩展装置的结构框图；

图6示出根据图5所示实施方式的加载模块503的结构框图；

图7示出根据本公开又一实施方式的可视化组件的扩展装置的结构框图；

图8示出根据本公开又一实施方式的可视化组件的扩展装置的结构框图；

图9是适于用来实现根据本公开一实施方式的视化组件的扩展方法的电子设备的结构示意图。

具体实施方式

下文中，将参考附图详细描述本公开的示例性实施方式，以使本领域技术人员可容易地实现它们。此外，为了清楚起见，在附图中省略了与描述示例性实施方式无关的部分。

在本公开中，应理解，诸如“包括”或“具有”等的术语旨在指示本说明书中所公开的特征、数字、步骤、行为、部件、部分或其组合的存在，并且不欲排除一个或多个其他特征、数字、步骤、行为、部件、部分或其组合存在或被添加的可能性。

另外还需要说明的是，在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本公开。

已有的可视化组件扩展方式通常是通过遍历整个可视化编辑系统对应的源代码，然后并修改可视化编辑系统的源代码的方式，扩展新的可视化。然而，已有的可视化组件扩展方式中，当多个团队或多人同时修改源代码时，可能会造成源代码混乱，使得可视化编辑系统不稳定。而且已有的可视化组件扩展方式，不能从根本上保证可视化编辑系统的通用性。直接修改源代码使得可视化编辑系统容易与某个产品业务进行了强关联，不能在技术层面进行隔离。已有的可视化组件扩展方式还使得可视化组件的扩展过程变得复杂，开发人员需要了解整个可视化编辑系统，需要额外了解可视化编辑系统的结构和开发调试方法，增加了可视化组件扩展的难度和工作量，增加了开发成本。

根据本公开各个实施例，通过单独编写出可视化组件的源代码，并将可视化组件的源代码单独编译，生成预设文件格式，以便能够加载至可视化编辑系统中，供后续用户使用该可视化组件。通过本公开上述方式，实现了可视化组件的即插即用，从根本上规避了已有技术中因为直接修改可视化编辑系统源代码而带来的副作用，也保证了可视化编辑系统的通用性，使得可视化编辑系统更健壮，代码管理更简单，节省了开发团队的协作沟通成本。

图1示出根据本公开一实施方式的可视化组件的扩展方法的流程图。如图1所示，所述可视化组件的扩展方法包括以下步骤S101-S103：

在步骤S101中，获取可视化组件的源代码；

在步骤S102中，编译所述可视化组件的源代码，生成所述可视化组件对应的可执行模块文件，所述可执行模块文件符合预设规范；

在步骤S103中，按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中。

在本实施例中，可视化组件是通过将预定功能进行封装后所形成的一个具体的逻辑或者是一个功能性的UI组件，以可视化形式呈现给用户，用户可以通过拖拽的方式将其加载到正在配置的页面中，例如按钮组件、对话框组件等，用户在待配置的页面中需要设置一按钮时，可以直接将可视化编辑系统的前端呈现的可视化按钮组件拖拽到待配置页面的适当位置处，之后该页面中相应位置处会呈现相应的按钮。组件是以复用为目的，能够抽象出可配置的属性和可调用的方法，供开发者使用。

可视化编辑系统中可以预先多个默认的可视化组件，用户配置页面时可从默认的可视化组件列表中选择一个或多个组件进行配置，也可以自行扩展需要的组件。此处的用户可以是软件开发者，也可以是页面运营维护人员。对于软件开发者来说，在开发一个系统时，里面可能需要设计一个或多个页面呈现给使用者，而页面的配置可以直接使用可视化编辑系统中提供的可视化组件以及开发者自身添加的程序代码来实现。对于运营维护人员来说，所运营的系统已经开发好了且投入使用中，可能在使用过程中由于需求变化或者功能变化等原因，需要更改呈现给用户的页面内容时，也可以通过可视化编辑系统所提供的可视化组件来更新原页面的内容。此处的页面可以是网页，也可以是某个独立系统中的用户界面。

由于需求和功能的多样化，可视化编辑系统所提供的默认组件并不能完全满足用户和业务的需求，因此通过本公开的实施方式用户可以自行添加新的可视化组件。用户可以通过可视化编辑系统预先设置的语言和/或框架等，编写完成新的可视化组件的源代码，并将新的可视化组件的源代码提供给可视化编辑系统(可视化编辑系统可以预先为用户预留相应的接口)。可视化编辑系统在接收到新的可视化组件的源代码后，通过分析源代码中多个模块之间的依赖关系，并进行编译打包，再生成可执行模块文件。可执行模块文件按照预设规范编译生成，可以按照预设规范被加载至可视化编辑系统中单独运行，例如对于支持网页页面配置的可视化编辑系统，预设规范可以是umd(Universal Module Definition，通用模块规范)规范，使得可视化编辑系统的前端可以使用requireJS之类的框架按照umd规范加载可视化组件对应的可执行模块，实现了即插即用的功能。本公开通过这种方式，能够允许用户单独编写可视化组件的源代码，而无需考虑可视化编辑系统整个系统代码的架构等，在编写完可视化组件的源代码之后，通过对该源代码进行编译生成可视化编辑系统能够加载的文件格式，并加载至可视化编辑系统中，达到了扩展新的可视化组件的目的，扩充了可视化编辑系统的新功能，且节省了用户的开发成本。

在本实施例的一个可选实现方式中，如图2所示，所述步骤S103，即按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中的步骤，进一步包括以下步骤S201-S202：

在步骤S201中，按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统的可视化组件列表中；

在步骤S202中，在所述可视化编辑系统的前端显示所述可视化组件。

在该可选实现方式中，可视化组件的源代码被编译完成后生成可执行模块文件，该可执行模块文件可以被可视化编辑系统通过所支持的框架加载到系统的可视化组件列表中，进而在可视化编辑系统的前端显示该可视化组件，以便后续能够直接通过拖拽的方式将该可视化组件配置到待配置页面中，并且扩充了可视化编辑系统的可视化组件列表，为后续用户的使用提供了方便。可视化编辑系统的前端是指呈现给使用者的用户界面，用户可以从用户界面中选择所需要的内容进行浏览和编辑等。

在本实施例的一个可选实现方式中，如图3所示，可视化组件的扩展方法，进一步还包括以下步骤S301-S302：

在步骤S301中，响应于所述可视化组件的拖拽事件，所述可视化编辑系统获取被拖拽的所述可视化组件对应的所述可执行模块文件；

在步骤S302中，在被拖拽至的页面运行被拖拽的所述可视化组件对应的所述可执行模块文件。

在该可选的实现方式中，用户在配置页面时，可以从可视化编辑系统的可视化组件列表中(包括默认的可视化组件和扩展的可视化组件)选择需要的可视化组件进行配置，例如可通过拖拽的方式将可视化组件拖拽到待配置页面的相应位置处，可视化编辑系统在接收到拖拽事件后，获取所拖拽的可视化组件对应的可执行模块文件，并在该待配置页面中运行该可执行模块文件，以便用户能够在该待配置页面中预览该可视化组件。通过这种方式，用户可以通过拖拽的方式将可视化组件配置到页面中，该可被拖拽的可视化组件既可以是默认的可视化组件，也可以新扩展的可视化组件。

在本实施例的一个可选实现方式中，如图4所示，可视化组件的扩展方法，进一步还包括以下步骤S401-S403：

在步骤S401中，响应于页面发布的事件，获取待发布页面中所配置的可视化组件的源代码；

在步骤S402中，将所述可视化组件的源代码添加至所述待发布页面对应的源代码中；

在步骤S403中，对所述待发布页面对应的源代码进行编译，生成包括所述可视化组件的发布页面。

在该可选实现方式中，扩展的可视化组件编译完成，并且加载至可视化编辑系统后，进行页面配置时，可以直接从可视化编辑系统的相应位置处拖拽可视化组件至页面中，在该页面被配置好以后，进行发布时，可视化编辑系统接收到待发布页面的发布事件后，获取该待发布页面中所配置的可视化组件的源代码，并将该源代码添加至该待发布页面对应的源代码中，并对待发布页面对应的源代码进行编译，最终形成发布页面，且该发布页面上包括之前所配置的一个活多个可视化组件。例如，所配置页面最终在浏览器运行的可视化编辑系统中，可视化组件的源代码可以基于commonjs规范编写，而由于浏览器不支持commonjs规范的模块文件，因此在编译时可以通过webpack编译工具将其打包编译成umd格式的可执行模块文件，比如用户扩展了一可视化的投票组件，将编写好的可视化投票组件的源代码上传至可视化编辑系统后，对其进行编译生成符合umd规范的可执行模块文件，可视化编辑系统利用requireJS之类的框架按照umd规范加载该可执行模块文件，并以可视化组件的形式呈现在默认的可视化组件列表中，用户在配置一投票页面时，可以将该可视化投票组件拖拽至投票页面中，在该投票页面全部配置完成后，进行发布，可视化系统接收到发布事件后将该可视化投票组件对应的源代码添加到投票页面所对应的源代码中，通过编译生成投票页面的可执行代码，并在执行该可执行代码时，所生成的投票页面中会呈现相应的投票选项供投票者投票。本公开的实施例中，在生成可视化组件时，单独将可视化组件的源代码进行编译生成可执行模块文件，并将生成的可执行模块文件加载至可视化编辑系统中，以供用户配置页面时使用；而在页面发布时，可以通过将可视化组件的源代码直接拷贝到待发布页面对应的源代码中，对待发布页面的完整代码进行整体编译，生成完成发布页面，以提高效率。本公开的上述实施例即实现了可视化组件的即插即用，又解决了可视化编辑系统不通用的问题，还保证了后续使用过程中可视化编辑系统的高性能。

在本实施例一可选的实现方式中，可视化组件的源代码可以基于vue.js框架生成，编程语言可选择使用ECMAScript6语言，vue.js框架是看多个前端组件库的底层运行框架，按照vue.js框架规范编写的组件能运行在vue.js框架之上。

由于可视化组件是基于vue.js框架编写的，其源代码可能会包括多个js文件，在对单个可视化组件进行编译时，可以将每个js文件编译成一个的单独的模块，之后再依据这些模块之间的依赖关系进行编译打包，最终生成可符合预设规范的可执行模块文件，如符合umd规范的可执行模块文件。此外，考虑到编译时需要消耗系统资源，而且编译过程时可能会发生阻塞，为了提高系统可用性和性能，因此在编译时可采用多进程编译的方式，例如可以使用node.js环境下的cluster功能进行多进程编译。

下述为本公开装置实施例，可以用于执行本公开方法实施例。

图5示出根据本公开一实施方式的可视化组件的扩展装置的结构框图，该装置可以通过软件、硬件或者两者的结合实现成为电子设备的部分或者全部。如图5所示，所述可视化组件的扩展装置包括获取模块501、第一编译模块502和加载模块503：

获取模块501，被配置为获取可视化组件的源代码；

第一编译模块502，被配置为编译所述可视化组件的源代码，生成所述可视化组件对应的可执行模块文件，所述可执行模块文件符合预设规范；

加载模块503，被配置为按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中。

在本实施例中，可视化组件是通过将预定功能进行封装后所形成的一个具体的逻辑或者是一个功能性的UI组件，以可视化形式呈现给用户，用户可以通过拖拽的方式将其加载到正在配置的页面中，例如按钮组件、对话框组件等，用户在待配置的页面中需要设置一按钮时，可以直接将可视化编辑系统的前端呈现的可视化按钮组件拖拽到待配置页面的适当位置处，之后该页面中相应位置处会呈现相应的按钮。组件是以复用为目的，能够抽象出可配置的属性和可调用的方法，供开发者使用。

可视化编辑系统中可以预先设置多个默认的可视化组件，用户配置页面时可从默认的可视化组件列表中选择一个或多个组件进行配置，也可以自行扩展需要的组件。此处的用户可以是软件开发者，也可以是页面运营维护人员。对于软件开发者来说，在开发一个系统时，里面可能需要设计一个或多个页面呈现给使用者，而页面的配置可以直接使用可视化编辑系统中提供的可视化组件以及开发者自身添加的程序代码来实现。对于运营维护人员来说，所运营的系统已经开发好了且投入使用中，可能在使用过程中由于需求变化或者功能变化等原因，需要更改呈现给用户的页面内容时，也可以通过可视化编辑系统所提供的可视化组件来更新原页面的内容。此处的页面可以是网页，也可以是某个独立系统中的用户界面。

由于需求和功能的多样化，可视化编辑系统所提供的默认组件并不能完全满足用户和业务的需求，因此通过本公开的实施方式用户可以自行添加新的可视化组件。用户可以通过可视化编辑系统预先设置的语言和/或框架等，编写完成新的可视化组件的源代码，并将新的可视化组件的源代码提供给可视化编辑系统(可视化编辑系统可以预先为用户预留相应的接口)。可视化编辑系统在接收到新的可视化组件的源代码后，通过分析源代码中多个模块之间的依赖关系，并进行编译打包，再生成可执行模块文件。可执行模块文件按照预设规范编译生成,可以按照预设规范被加载至可视化编辑系统中单独运行，例如对于支持网页页面配置的可视化编辑系统，预设规范可以是umd(Universal Module Definition，通用模块规范)规范，使得可视化编辑系统的前端可以使用requireJS之类的框架按照umd规范加载可视化组件对应的可执行模块，实现了即插即用的功能。本公开通过这种方式，能够允许用户单独编写可视化组件的源代码，而无需考虑可视化编辑系统整个系统代码的架构等，在编写完可视化组件的源代码之后，通过对该源代码进行编译生成可视化编辑系统能够加载的文件格式，并加载至可视化编辑系统中，达到了扩展新的可视化组件的目的，扩充了可视化编辑系统的新功能，且节省了用户的开发成本。

在本实施例的一个可选实现方式中，如图6所示，所述加载模块503进一步包括以下模块：

加载子模块601，被配置为按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统的可视化组件列表中；

显示子模块602，被配置为在所述可视化编辑系统的前端显示所述可视化组件。

在该可选实现方式中，可视化组件的源代码被编译完成后生成可执行模块文件，该可执行模块文件可以被可视化编辑系统通过所支持的框架加载到系统的可视化组件列表中，进而在可视化编辑系统的前端显示该可视化组件，以便后续能够直接通过拖拽的方式将该可视化组件配置到待配置页面中，并且扩充了可视化编辑系统的可视化组件列表，为后续用户的使用提供了方便。可视化编辑系统的前端是指呈现给使用者的用户界面，用户可以从用户界面中选择所需要的内容进行浏览和编辑等。

在本实施例的一个可选实现方式中，如图7所示，可视化组件的扩展装置，进一步还包括以下模块：

第一响应模块701，被配置为响应于所述可视化组件的拖拽事件，所述可视化编辑系统获取被拖拽的所述可视化组件对应的所述可执行模块文件；

运行模块702，被配置为在被拖拽至的页面运行被拖拽的所述可视化组件对应的所述可执行模块文件。

在该可选的实现方式中，用户在配置页面时，可以从可视化编辑系统的可视化组件列表中(包括默认的可视化组件和扩展的可视化组件)选择需要的可视化组件进行配置，例如可通过拖拽的方式将可视化组件拖拽到待配置页面的相应位置处，可视化编辑系统在接收到拖拽事件后，获取所拖拽的可视化组件对应的可执行模块文件，并在该待配置页面中运行该可执行模块文件，以便用户能够在该待配置页面中预览该可视化组件。通过这种方式，用户可以通过拖拽的方式将可视化组件配置到页面中，该可被拖拽的可视化组件既可以是默认的可视化组件，也可以新扩展的可视化组件。

在本实施例的一个可选实现方式中，如图8所示，可视化组件的扩展装置，进一步还包括以下模块：

第二响应模块801，被配置为响应于页面发布的事件，获取待发布页面中所配置的可视化组件的源代码；

添加模块802，被配置为将所述可视化组件的源代码添加至所述待发布页面对应的源代码中；

第二编译模块803，被配置为对所述待发布页面对应的源代码进行编译，生成包括所述可视化组件的发布页面。

在该可选实现方式中，扩展的可视化组件编译完成，并且加载至可视化编辑系统后，进行页面配置时，可以直接从可视化编辑系统的相应位置处拖拽可视化组件至页面中，在该页面被配置好以后，进行发布时，可视化编辑系统接收到待发布页面的发布事件后，获取该待发布页面中所配置的可视化组件的源代码，并将该源代码添加至该待发布页面对应的源代码中，并对待发布页面对应的源代码进行编译，最终形成发布页面，且该发布页面上包括之前所配置的一个活多个可视化组件。例如，用户扩展了一可视化的投票组件，将编写好的可视化投票组件的源代码上传至可视化编辑系统后，对其进行编译生成符合umd规范的可执行模块文件，可视化编辑系统利用requireJS之类的框架按照umd规范加载该可执行模块文件，并以可视化组件的形式呈现在默认的可视化组件列表中，用户在配置一投票页面时，可以将该可视化投票组件拖拽至投票页面中，在该投票页面全部配置完成后，进行发布，可视化系统接收到发布事件后将该可视化投票组件对应的源代码添加到投票页面所对应的源代码中，通过编译生成投票页面的可执行代码，并在执行该可执行代码时，所生成的投票页面中会呈现相应的投票选项供投票者投票。本公开的实施例中，在生成可视化组件时，单独将可视化组件的源代码进行编译生成可执行模块文件，并将生成的可执行模块文件加载至可视化编辑系统中，以供用户配置页面时使用；而在页面发布时，可以通过将可视化组件的源代码直接拷贝到待发布页面对应的源代码中，对待发布页面的完整代码进行整体编译，生成完成发布页面，以提高效率。本公开的上述实施例即实现了可视化组件的即插即用，又解决了可视化编辑系统不通用的问题，还保证了后续使用过程中可视化编辑系统的高性能。

在本实施例一可选的实现方式中，可视化组件的源代码可以基于vue.js框架生成，编程语言可选择使用ECMAScript6语言，vue.js框架是看多个前端组件库的底层运行框架，按照vue.js框架规范编写的组件能运行在vue.js框架之上。

由于可视化组件是基于vue.js框架编写的，其源代码可能会包括多个js文件，在对单个可视化组件进行编译时，可以将每个js文件编译成一个的单独的模块，之后再依据这些模块之间的依赖关系进行编译打包，最终生成可符合预设规范的可执行模块文件，如符合umd规范的可执行模块文件。此外，考虑到编译时需要消耗系统资源，而且编译过程时可能会发生阻塞，为了提高系统可用性和性能，因此在编译时可采用多进程编译的方式，例如可以使用node.js环境下的cluster功能进行多进程编译。

图9是适于用来实现根据本公开实施方式的可视化组件的扩展方法的电子设备的结构示意图。

如图9所示，电子设备900包括中央处理单元(CPU)701，其可以根据存储在只读存储器(ROM)902中的程序或者从存储部分908加载到随机访问存储器(RAM)903中的程序而执行上述图1所示的实施方式中的各种处理。在RAM903中，还存储有电子设备900操作所需的各种程序和数据。CPU901、ROM902以及RAM903通过总线904彼此相连。输入/输出(I/O)接口905也连接至总线904。

以下部件连接至I/O接口905：包括键盘、鼠标等的输入部分906；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分907；包括硬盘等的存储部分908；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分909。通信部分909经由诸如因特网的网络执行通信处理。驱动器910也根据需要连接至I/O接口905。可拆卸介质911，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器910上，以便于从其上读出的计算机程序根据需要被安装入存储部分908。

特别地，根据本公开的实施方式，上文参考图1描述的方法可以被实现为计算机软件程序。例如，本公开的实施方式包括一种计算机程序产品，其包括有形地包含在及其可读介质上的计算机程序，所述计算机程序包含用于执行图1的可视化组件的扩展方法的程序代码。在这样的实施方式中，该计算机程序可以通过通信部分909从网络上被下载和安装，和/或从可拆卸介质911被安装。

附图中的流程图和框图，图示了按照本公开各种实施方式的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，路程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本公开实施方式中所涉及到的单元或模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元或模块也可以设置在处理器中，这些单元或模块的名称在某种情况下并不构成对该单元或模块本身的限定。

作为另一方面，本公开还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施方式中所述装置中所包含的计算机可读存储介质；也可以是单独存在，未装配入设备中的计算机可读存储介质。计算机可读存储介质存储有一个或者一个以上程序，所述程序被一个或者一个以上的处理器用来执行描述于本公开的方法。

以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的发明范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离所述发明构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

A1、一种可视化组件的扩展方法，包括：获取可视化组件的源代码；编译所述可视化组件的源代码，生成所述可视化组件对应的可执行模块文件，所述可执行模块文件符合预设规范；按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中。A2、根据A1所述的可视化组件的扩展方法，按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中，包括：按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统的可视化组件列表中；在所述可视化编辑系统的前端显示所述可视化组件。A3、根据A1或A2所述的可视化组件的扩展方法，还包括：响应于所述可视化组件的拖拽事件，所述可视化编辑系统获取被拖拽的所述可视化组件对应的所述可执行模块文件；在被拖拽至的页面运行被拖拽的所述可视化组件对应的所述可执行模块文件。A4、根据A1或A2所述的可视化组件的扩展方法，还包括：响应于页面发布的事件，获取待发布页面中所配置的可视化组件的源代码；将所述可视化组件的源代码添加至所述待发布页面对应的源代码中；对所述待发布页面对应的源代码进行编译，生成包括所述可视化组件的发布页面。A5、根据A1或A2所述的可视化组件的扩展方法，，所述预设规范为umd规范。A6、根据A1或A2所述的可视化组件的扩展方法，所述可视化组件的源代码基于vue.js框架生成。

B7、一种可视化组件的扩展装置，包括：获取模块，被配置为获取可视化组件的源代码；第一编译模块，被配置为编译所述可视化组件的源代码，生成所述可视化组件对应的可执行模块文件，所述可执行模块文件符合预设规范；加载模块，被配置为按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中。B8、根据B7所述的可视化组件的扩展装置，所述加载模块包括：加载子模块，被配置为按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统的可视化组件列表中；显示子模块，被配置为在所述可视化编辑系统的前端显示所述可视化组件。B9、根据B7或B8所述的可视化组件的扩展装置，还包括：第一响应模块，被配置为按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统的可视化组件列表中；运行模块，被配置为在被拖拽至的页面运行被拖拽的所述可视化组件对应的所述可执行模块文件。B10、根据B7或B8所述的可视化组件的扩展装置，还包括：第二响应模块，被配置为响应于页面发布的事件，获取待发布页面中所配置的可视化组件的源代码；添加模块，被配置为将所述可视化组件的源代码添加至所述待发布页面对应的源代码中；第二编译模块，被配置为对所述待发布页面对应的源代码进行编译，生成包括所述可视化组件的发布页面。B11、根据B7或B8所述的可视化组件的扩展装置，所述预设规范为umd规范。B12、根据B7或B8所述的可视化组件的扩展装置，所述可视化组件的源代码基于vue.js框架生成。

C13、一种电子设备，包括存储器和处理器；其中，所述存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器执行以实现A1-A6任一项所述的方法步骤。

D14、一种计算机可读存储介质，其上存储有计算机指令，该计算机指令被处理器执行时实现A1-A6任一项所述的方法步骤。

Claims (10)

1.一种可视化组件的扩展方法，其特征在于，包括：

获取可视化组件的源代码；

编译所述可视化组件的源代码，生成所述可视化组件对应的可执行模块文件，所述可执行模块文件符合预设规范；

按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中。

2.根据权利要求1所述的可视化组件的扩展方法，其特征在于，按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中，包括：

按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统的可视化组件列表中；

在所述可视化编辑系统的前端显示所述可视化组件。

3.根据权利要求1或2所述的可视化组件的扩展方法，其特征在于，还包括：

响应于所述可视化组件的拖拽事件，所述可视化编辑系统获取被拖拽的所述可视化组件对应的所述可执行模块文件；

在被拖拽至的页面运行被拖拽的所述可视化组件对应的所述可执行模块文件。

4.根据权利要求1或2所述的可视化组件的扩展方法，其特征在于，还包括：

响应于页面发布的事件，获取待发布页面中所配置的可视化组件的源代码；

将所述可视化组件的源代码添加至所述待发布页面对应的源代码中；

对所述待发布页面对应的源代码进行编译，生成包括所述可视化组件的发布页面。

5.根据权利要求1或2所述的可视化组件的扩展方法，其特征在于，所述预设规范为umd规范。

6.根据权利要求1或2所述的可视化组件的扩展方法，其特征在于，所述可视化组件的源代码基于vue.js框架生成。

7.一种可视化组件的扩展装置，其特征在于，包括：

获取模块，被配置为获取可视化组件的源代码；

第一编译模块，被配置为编译所述可视化组件的源代码，生成所述可视化组件对应的可执行模块文件,所述可执行模块文件符合预设规范；

加载模块，被配置为按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统中。

8.根据权利要求7所述的可视化组件的扩展装置，其特征在于，所述加载模块包括：

加载子模块，被配置为按照所述预设规范将所述可执行模块文件加载至所述可视化编辑系统的可视化组件列表中；

显示子模块，被配置为在所述可视化编辑系统的前端显示所述可视化组件。

9.一种电子设备，其特征在于，包括存储器和处理器；其中，

所述存储器用于存储一条或多条计算机指令，其中，所述一条或多条计算机指令被所述处理器执行以实现权利要求1-6任一项所述的方法步骤。

10.一种计算机可读存储介质，其上存储有计算机指令，其特征在于，该计算机指令被处理器执行时实现权利要求1-6任一项所述的方法步骤。