A composite component based on Vue and its dynamic loading system and method

Abstract

The present invention provides a composite component based on Vue, including Vue source code, component configuration description file, component data description file and component resource package. The present invention discloses a loading system of this composite component, including a component library, a component operation framework, a component scaffold and an application assembler. The component operation framework includes a component loading module, a component configuration module and a component runtime module. The component runtime module includes a component definition unit, a component instance unit, a component cache, a component hierarchy tree, a component canvas, a component renderer and a component communication pipeline. The present invention also discloses a loading method of a composite component. A composite component based on Vue of the present invention and its dynamic loading system and method are characterized by standardization, easy configuration, reusability and high efficiency.

Description

Technical Field

[0001] The present invention relates to computer website technology, in particular to a Vue-based composite component and a dynamic loading system and method thereof. Background Art

[0002] Vue technology is a JavaScript framework for building user interfaces, mainly used to develop web applications. Components are an important concept in Vue. They are independent structural units for building pages. Through combination and reuse, they can reduce code, improve development efficiency, reduce code coupling, and make projects easier to maintain and manage. In the current Vue component development, there are some problems and challenges:

[0003] 1) In the traditional Vue component development method, developers embed component code, style, configuration and other data directly into the component file. Although this method is intuitive, it is not conducive to component reuse and maintenance. Once the configuration or data of a component needs to be modified, the component file itself must be modified, which increases the difficulty of component maintenance. At the same time, this method also increases the coupling of the code, which has a negative impact on the readability and maintainability of the code.

[0004] 2) The current Vue component loading method is often static, that is, all its dependencies and data need to be determined when loading. This method cannot meet some requirements that require dynamic component loading, for example, sometimes different components are required to be dynamically loaded according to user needs at runtime. The static loading method also limits the scalability of the application and is difficult to meet the ever-changing application needs.

[0005] 3) In traditional Vue component development, communication between components may need to be achieved through data transfer between parent and child components or by using a global event bus, which makes the code complex and increases the difficulty of maintenance. When the complexity of an application containing multiple components increases, component state management may also become difficult. Traditional Vue component development methods may make it difficult to effectively manage and control the state of components, resulting in confusing and difficult to maintain code.

[0006] 4) Due to the lack of unified development specifications, different developers may adopt different code styles and implementation methods, resulting in reduced code readability and maintainability. As the scale of applications continues to expand, the traditional Vue component development method may be difficult to meet the ever-changing application needs, and the lack of scalability in the design will make it difficult to expand and maintain the application. In addition, the uninstallation of components may not be thorough, resulting in the failure to fully release resources, affecting the performance and stability of the system.

[0007] Therefore, there is a need for a composite component that can realize highly configurable and dynamic loading requirements and a dynamic loading system and method thereof. Summary of the invention

[0008] In order to meet the requirements of dynamically loading different components according to demand at runtime and give full play to the extensibility and customizability of the application, the present invention improves the composite components, constructs a dynamic component dynamic loading system, and realizes the flexibility and extensibility of the application.

[0009] The first object of the present invention is to provide a composite component based on Vue, comprising the following parts:

[0010] Vue source code is the source code of the Vue component;

[0011] Component configuration description file, used to provide component basic information, component size information, component location information, component event information, component response information and component configurable item information;

[0012] Component data description file, used to define the field format and content of the data required by the composite component during operation;

[0013] Component resource bundle, used to provide resources referenced by composite components at runtime.

[0014] Preferably, the Vue source code includes templates, styles and scripts; the template is used to describe the structure of the composite component; the style is used to describe the style of the composite component; the script is used to describe the properties and methods of the composite component; the component data description file includes data format and data content; the component resource package includes video resources, audio resources, picture resources and text resources.

[0015] The second object of the present invention is to provide a dynamic loading system of a composite component, which is used to load the above-mentioned Vue-based composite component, and includes the following parts:

[0016] Component library, used to receive, decompress, store and distribute composite components, as well as version management and reuse of composite components;

[0017] Component operation framework, used to provide dynamic loading and parsing, real-time operation, dynamic configuration, rendering and communication functions of composite components;

[0018] Component scaffolding, which is used to provide the building, development and packaging functions of composite components;

[0019] The application assembler is used to select one or more composite components from the component library and assemble and configure them into a Vue application.

[0020] Preferably, the component library includes:

[0021] The component receiving module is used to receive the component package formed by the composite component uploaded by the developer, and pass the component package to the component unpacking module for processing;

[0022] The component unpacking module is used to unpack the received component package, decompress the Vue source code, component configuration description file, component data description file and component resource package in the component package, and pass them to the component storage module for storage;

[0023] The component storage module is responsible for classifying and storing the unpacked content, and for retrieving the content of the composite component from the component library for distribution.

[0024] Preferably, the component operation framework includes:

[0025] The component loading module is used to retrieve the content of the composite component from the component library and load it into the Vue environment;

[0026] The component configuration module is used to perform secondary configuration on the configurable items of the loaded composite component;

[0027] The component runtime module is used to dynamically bind the configuration item information of the composite component with the Vue component instance of the composite component, and provide a Vue-based rendering environment and a communication environment between components for the composite component;

[0028] The component runtime module includes:

[0029] Component definition unit, which is used to encapsulate the properties and behaviors of composite components;

[0030] Component instance unit, derived from the running instance of the component definition unit;

[0031] Component cache, used to locally cache component libraries and component definition units;

[0032] Component hierarchy tree, used to store and manage the sorting and nesting relationships of component instance units;

[0033] The component canvas is used to provide a rendering window for component instance units;

[0034] The component renderer is used to render the component instance unit and draw the component instance unit on the component canvas;

[0035] Component communication pipeline is used to provide data communication pipeline between component instance units.

[0036] Preferably, the component loading module includes:

[0037] A component retriever, used to retrieve the content of a composite component from a component library on demand;

[0038] Asynchronous component loader, used to asynchronously load the Vue source code in the retrieved composite component into a Vue component through Vue's asynchronous component loading mechanism, and initialize it into the global Vue environment;

[0039] The component parser is used to parse the loaded Vue components and convert them into component definition units.

[0040] Preferably, the component configuration module includes:

[0041] A component configuration converter is used to reconfigure the component configurable item information of the component instance unit;

[0042] A component interaction manager is used to reconfigure the component event information and component response information of the component instance unit;

[0043] The component data manager is used to reconfigure the data content of the component instance unit:

[0044] The component resource manager is used to perform secondary configuration on the component resources of the component instance unit.

[0045] Preferably, the component scaffold is used for the construction, development and packaging of composite components, and is extended based on the component operation framework, and also includes the following parts:

[0046] The build configuration generator is used to generate the build configuration information of the composite component by parsing the Vue source code and component configuration description file of the composite component;

[0047] Component build packager, used to build and package composite components.

[0048] Preferably, the application assembler provides a function of assembling multiple composite components into a visual application, is extended based on the component operation framework, and also includes the following parts:

[0049] Application resource management module, used to register and manage the resources of visualization applications;

[0050] The component selection module is used to help developers select composite components that meet their usage requirements from the component library through search and filtering functions;

[0051] The component management module is used to manage the sorting and nesting relationships of composite components.

[0052] The third object of the present invention is to provide a dynamic loading method for a composite component, comprising the following steps:

[0053] S1. Developers develop composite components through component scaffolding, build and package them to form component packages;

[0054] S2. The developer uploads the component package to the component library, and the component library passes the component package to the component unpacking module;

[0055] S3, the component unpacking module decompresses the received component package, decompresses the Vue source code, component configuration description file, component data description file and component resource package in the component package, and passes these contents to the component storage module for storage;

[0056] S4, the component storage module classifies and stores the decompressed content according to the index condition composed of the component name, component version and file type;

[0057] S5. The user selects one or more composite components from the component library through the application assembler and assembles and configures them into a Vue application;

[0058] S6. The component loading module of the component running framework loads the composite components in the Vue application into the Vue environment;

[0059] S7. The component parser in the component loading module parses the loaded Vue component and encapsulates it into a component definition unit;

[0060] S8, the component runtime module generates a component instance unit based on the component definition unit according to the scheduling of the application assembler;

[0061] S9, the component configuration module performs secondary configuration on the component instance unit;

[0062] S10, the component instance unit will be passed to the component renderer of the component runtime module, and the component renderer will add the created component instance unit to the component canvas;

[0063] S11. After all the composite components in the Vue application are added to the component canvas, the dynamic loading of the Vue application is completed.

[0064] Beneficial technical effects of the present invention:

[0065] 1) The structure of composite components is designed to make the functional modules more independent. Each component can be developed, tested and maintained separately, which greatly enhances the scalability and maintainability of the application. And through the component library, the version management and reuse of components are realized, which further improves the maintainability of the application.

[0066] 2) Providing a complete set of component development, testing, packaging, publishing and usage processes, significantly improving the development efficiency of software developers and allowing developers to focus on the business logic development of components.

[0067] 3) By dynamically binding the events and responses of multiple composite components when the system is running, and the binding method can be decoupled, this is different from the hard-coding method used in traditional technical solutions. It solves the problems of low efficiency and low degree of reuse in the development, assembly and reuse of complex composite Vue components in the existing technology.

[0068] 4) The system implements lazy loading and preloading of pages through asynchronous loading and on-demand loading, effectively reducing the initial loading time of the application, thereby improving the application's operating performance and allowing users to use the application more smoothly, thereby improving the user experience. At the same time, the system enables the application to better manage memory resources by implementing dynamic loading and unloading of components, avoiding memory leaks caused by long-term operation of components.

[0069] 5) The configuration of composite components can be set in a visual form and can be changed while the system is running. Unlike traditional technical solutions that use hard-coded source code or configuration files, the configuration file only provides the default configuration of the component. The specific configuration of the composite component is determined when the system is running, which standardizes the design, development, and construction process of complex Vue components, and ultimately effectively improves the reusability of Vue components and the application flexibility of the overall system.

[0070] The present invention discloses a composite component based on Vue and a dynamic loading system and method thereof, which are characterized by standardization, easy configuration, reusability and high efficiency. BRIEF DESCRIPTION OF THE DRAWINGS

[0071] Figure 1 It is a schematic diagram of the structure of a composite component according to an embodiment of the present invention;

[0072] Figure 2 This is a schematic diagram of the Vue source code structure of the composite component of an embodiment of the present invention;

[0073] Figure 3 This is a schematic diagram of the configuration description file structure of the composite component of an embodiment of the present invention;

[0074] Figure 4 This is a schematic diagram of the event response binding relationship structure of the composite component according to an embodiment of the present invention;

[0075] Figure 5 This is a schematic diagram of the data description file structure of a composite component according to an embodiment of the present invention;

[0076] Figure 6 This is a schematic diagram of the resource package structure of the composite component of an embodiment of the present invention;

[0077] Figure 7 It is a structural schematic diagram of a dynamic loading system according to an embodiment of the present invention;

[0078] Figure 8 A schematic diagram of component events and response communications of a dynamic loading system according to an embodiment of the present invention;

[0079] Fig. 9 A schematic diagram of a component library structure of a dynamic loading system according to an embodiment of the present invention;

[0080] Fig.10 A schematic diagram of a component operation framework structure of a dynamic loading system according to an embodiment of the present invention;

[0081] Fig.11 It is a schematic diagram of the component scaffolding structure of the dynamic loading system according to an embodiment of the present invention;

[0082] Fig.12 The figure is a schematic diagram of the structure of an application assembler of a dynamic loading system according to an embodiment of the present invention. DETAILED DESCRIPTION

[0083] In order to further understand the present invention, preferred embodiments of the present invention are described below in conjunction with examples. However, it should be understood that these descriptions are only for further illustrating the features and advantages of the present invention, rather than limiting the claims of the present invention. Embodiment 1

[0084] The embodiment of the present invention provides a composite component based on Vue, such as Figure 1 As shown, it includes: Vue source code, component configuration description file, component data description file, component resource package. The following is a detailed description of each part of the composite component.

[0085] The Vue source code structure design in the composite component of the embodiment of the present invention is as follows Figure 2 As shown, the Vue source code includes the following parts:

[0086] 1) Template, Vue source code <template>The part in the tag is used to describe the HTML structure of the composite component, which can include some instructions, expressions, event handlers, etc.

[0087] For example, Figure 2 Medium, Template <template>These include:

[0088] a) String type attribute id, which is the unique encoding value of the composite component;

[0089] b) Boolean type attribute visible, which is used as a condition to control the visibility of the composite component;

[0090] c) Button event handler, click to trigger the testDispatch method <button> Label,< / button> <button>The @click attribute in the tag defines that clicking the tag can trigger the testDispatch method defined by the Vue component.

[0091] 2) Style, Vue source code <style>标签中的部分，以SCSS（Sassy Cascading StyleSheets，萨斯级联样式表）语法描述复合组件的CSS（Cascading Style Sheets，级联样式表）样式，定义了该组件的宽度、高度以及背景颜色。

[0092] 3）脚本，源码中<script>标签中的部分，以Vue对象的属性和方法描述复合组件的组件名称（name）、组件属性（props）、组件功能（methods）。

[0093] 组件功能（methods）定义具体的组件方法的实现，对应于组件配置描述文件中组件事件信息，或者组件响应信息。

[0094] 例如，图2中的组件功能包括testDispatch方法和testAction方法。

[0095] a）testDispatch方法：此处用来说明复合组件的事件触发机制，当组件事件在组件配置描述文件中预先定义，组件运行系统才会接收组件事件，本实施例中，<button>标签定义的按钮被点击后将执行testDispatch方法，方法中定义的this.dispatch("testEvent", !this.visible)代码通过dispatch函数发送testEvent事件以及事件数据，其中，dispatch函数是在复合组件初始化时被自动注入的，testEvent事件在本实施例后续给出的组件配置描述文件中进行定义和注册，与组件事件信息对应。

[0096] b）testAction方法：此处用来说明复合组件的事件响应机制，本发明提出的复合组件的组件功能能够被动态加载系统触发，当组件响应在组件配置描述文件中预先定义，组件运行系统才能触发组件响应，本实施例中，testAction方法在后续给出的组件配置描述文件中进行定义和注册，与组件响应信息对应。testAction方法接收event参数，在被触发后将对组件的visible参数赋值。

[0097] 本发明实施例复合组件中的组件配置描述文件包括提供组件基本信息、组件大小信息、组件位置信息、组件事件信息、组件响应信息和组件可配置项信息，如图3所示。

[0098] 1）组件基本信息，以字符串形式表示，包括组件名称（name）、组件标识（moduleName）、组件版本（version）、组件描述（description）、组件图标（icon）、组件类型（type）。

[0099] 2）组件大小信息，以各维度数值形式表示，包括组件高度（height）、组件宽度（width），单位为像素。

[0100] 3）组件位置信息，以数值形式表示，包括组件定位类型（positionType）、组件距左边界偏移（left）、距右边界偏移（right）、距上边界偏移（top）、距下边界偏移（bottom）。其中组件定位类型可以选择左上角定位（0）、右上角定位（1）、左下角定位（2）、右下角定位（3）。

[0101] 4）组件事件信息，以对象数组形式表示，每个对象包括组件事件名称（name）以及组件事件标识（value），组件事件信息用于对其他组件暴露复合组件定义的内部事件，其中，组件事件名称用于表达该事件的触发条件，例如，组件事件名称为"组件面板被隐藏”、"组件按钮被点击”、"组件数据被更新”等。优选的，组件事件名称表述应能让人轻易地知晓组件状态被如何变更。组件事件标识在相同组件内唯一，用于与该组件本身的或其他组件的组件响应标识绑定，形成组件事件触发到组件响应动作的链条。

[0102] 5）组件响应信息，以对象数组形式表示，每个对象包括组件响应名称（name）以及组件响应标识（value），组件响应信息用于对其他组件暴露复合组件定义的内部执行动作，其中，组件响应名称用于表达该响应的执行行为，例如，组件响应名称为"折叠组件面板”、"变更组件面板背景颜色”、"刷新组件数据”等。优选的，组件响应名称表述应能让人轻易地知晓如何变更组件状态。组件响应标识用于触发Vue对象的方法，组件响应标识需要与源码中Vue对象定义的方法名称一致。

[0103] 6）组件可配置项信息，以对象数组形式表示，每个对象对应一个组件可配置项，也简称配置项。对象的值包括配置项名称（name）、配置项类型（type）、配置项数值（value）以及配置项描述（desc），可配置项信息用于暴露组件可提供的配置项内容。

[0104] 本发明实施例组件配置描述文件中，组件可配置项信息通过configuration数组配置，该数组中的每个对象为一个组件可配置项。配置项类型用于将组件可配置项渲染成对应的配置设置界面，供使用人员调整复合组件在实际运行时的样式、功能及数据等配置。本实施例提出配置项类型包括Text、Number、Select、Range、Radio、Boolean、Checkbox、Image等，其中，

[0105] Text类型代表文本，配置项将被渲染成文本输入框；

[0106] Number类型代表数字，配置项将被渲染成数字输入框；

[0107] Select类型代表下拉选项，配置项将被渲染成下拉选择框；

[0108] Range类型代表范围选项，配置项将被渲染成范围选择框；

[0109] Radio类型代表互斥选项，配置项将被渲染成互斥选择按钮；

[0110] Boolean类型代表布尔选项，配置项将被渲染成布尔选择按钮；

[0111] Checkbox类型代表文本，配置项将被渲染成文本输入框；

[0112] Image类型代表文本，配置项将被渲染成文本输入框。

[0113] 本发明实施例复合组件中的组件数据描述文件包括数据格式、数据内容，可以用JSON形式表达，如图5所示。

[0114] 1）数据格式（format），包括用于限定复合组件在运行中所需数据的字段名称（name）、字段类型（type）以及字段描述（desc），数据格式对应用系统以及其他复合组件暴露，以向其说明该复合组件正常运行所必需的数据，避免复合组件在运行中发生错误。其中，字段名称以name字符串字段表示，字段描述以desc字符串字段表示，字段类型以type字符串字段表示，字段类型的具体数值包括JavaScript语言的内置类型中的Boolean、Number、String以及Array，分别表示布尔值、数字、字符串以及数组。需要说明的是，当字段类型为数组Array，表示该字段由多个子字段组成，此时，可用children字段作为Array类型字段的数组对象键，以存放其子字段。

[0115] 2）数据内容（data），用于提供复合组件运行所需的默认数据，数据内容对外暴露。本发明实施例提出一种以对象数组的形式表示的数据内容格式，该格式类似于以JSON格式为存储结构的文档型数据库MongoDB的存储格式，不需要预先定义"表”结构，同一个"表”中可以保存多个格式的数据，数据支持嵌套，数据内容对应MongoDB数据库本身，类似于MongoDB数据库中的一张表。

[0116] 数据内容的顶级数据结构为数组，该数组中的一个对象元素可类比对应理解为MongoDB数据库的一张表中的一条数据，其中每个对象元素本身的属性值类比对应的是MongoDB数据库中一张表的一条数据本身的键值对，数据内容与MongoDB数据库的数据库表有区别的地方在于，数据内容的每一条数据必须满足数据格式所限定的字段名称及类型，当满足了数据格式要求，该数据内容才会被组件运行框架认为是有效的数据。在数据内容的一条数据满足数据格式所限定的字段名称及类型后，该条数据可以自由扩展额外的数据字段，组件运行框架对此不做限制。

[0117] 本发明实施例复合组件中的组件资源包用于提供复合组件运行时引用的资源，包括视频资源、音频资源、图片资源、文字资源，如图6所示，组件资源包结构可以被存放在assets目录下。assets目录下的子目录用于存放视频资源、音频资源、图片资源、文字资源。

[0118] 1）视频资源，存放在videos文件下，夹负责存放包括Ogg、MP4、WebM三种HTML5的video标签支持的视频格式。

[0119] 2）音频资源，存放在audios文件夹下，负责存放包括Ogg、MP3、WAV三种HTML5的audio标签支持的音频格式。

[0120] 3）图片资源，存放在images文件下，夹负责存放包括JPG、PNG、SVG、WebP、GIF等HTML5的img标签支持的图片格式。

[0121] 4）文字资源，存放在fonts件下，夹负责存放包括TTF、OTF、EOT、WOFF等可在CSS源代码中引用的Web字体格式。

[0122] 以上就是基于Vue的复合组件的说明，也是本发明实施例复合组件的规范，新创建的复合组件必须符合此规范才能保证其能够在后续构建的动态加载系统中正常运行。实施例二

[0123] 本发明实施例还提供了一种基于Vue的复合组件的动态加载系统，如图7所示，它包括组件库、组件运行框架、组件脚手架和应用装配器等模块，形成了对复合组件的开发、应用闭环。复合组件动态加载系统一方面为开发者提供组件开发脚手架，用于开发出符合实施例一技术方案的复合组件，另一方面为使用者提供应用装配器来从组件库中选配一到多个复合组件，并将其组装配置成Vue应用。以下对动态加载系统进行详细介绍。

[0124] 本发明实施例的组件库，如图9所示，包括组件接收模块、组件拆包模块和组件存储模块，不仅负责接收、解压、存储和分发复合组件，还提供了组件的版本管理和复用，这是传统的前端开发方式中缺乏的。

[0125] 1）组件接收模块，主要负责接收开发者上传的复合组件，它通过HTTP或FTP等协议接收上传的组件包，然后将组件包传递给组件拆包模块进行处理。

[0126] 2）组件拆包模块，主要负责对接收到的组件包进行拆包，它通过解压缩算法将组件包中的Vue源码、组件配置描述文件、组件数据描述文件和组件资源包解压出来，然后将这些内容传递给组件存储模块进行存储。

[0127] 3）组件存储模块，主要负责对拆包后的内容进行分类存储，它通过数据库结合对象存储技术的方式，按照由组件名称、组件版本和文件类型组合成的索引条件，将拆包后的内容进行分类存储，同时，该模块还提供分发功能，以便于组件运行框架的组件加载模块能够按需从组件库中取回复合组件的内容。

[0128] 本发明实施例的组件运行框架是整个系统里的核心模块，组件脚手架以及应用装配器都是基于组件运行框架进行功能拓展后打造形成的，组件运行框架为整个复合组件动态加载系统提供复合组件的动态加载解析、实时运行、动态配置、渲染及通信功能。

[0129] 本发明实施例的组件运行框架如图10所示，组件运行框架包括组件加载模块、组件运行时模块和组件配置模块，具体说明如下：

[0130] 1）组件加载模块，包括组件取回器、异步组件加载器和组件解析器，主要负责从组件库中取回复合组件的内容，并将其加载到Vue环境中，实现了组件的动态加载和卸载，这是传统的前端开发方式难以实现的。

[0131] a）组件取回器，主要负责从组件库中按需取回复合组件的内容，它通过HTTP或FTP等协议，根据复合组件的组件名称和组件版本，从组件库中取回Vue源码、组件配置描述文件、组件数据描述文件和组件资源包。

[0132] b）异步组件加载器，它通过Vue的异步组件加载机制，将取回的Vue源码异步加载成Vue组件，并将其初始化到全局的Vue环境中。同时，该模块也提供从Vue环境中异步卸载Vue组件的功能。

[0133] c）组件解析器，主要负责解析被加载的Vue组件，并将其转换成组件定义单元。它通过解析Vue组件的源码，提取出Vue组件的属性和方法，并进一步地，通过解析组件配置描述文件、组件数据描述文件和组件资源包，提取出组件的基本信息、大小信息、位置信息、事件信息、响应信息、可配置项信息、数据格式、数据内容以及组件资源的名称、类型、路径等信息，然后将这些信息封装成组件定义单元。为了防止组件定义单元被修改，该模块还提供使用JavaScript的Object.freeze方法冻结组件定义单元的功能。

[0134] 2）组件运行时（Runtime）模块，包括组件定义单元、组件实例单元、组件缓存、组件层级树、组件渲染器、组件画布和组件通信管道。本发明实施例所指的组件运行时模块是对如Node.js这样的现代高级语言中运行时系统的定义推广，一般JavaScript引擎是个不带IO支持的虚拟机，需要浏览器和Node这样的JavaScript运行时才能让它控制文件、网络、图形等硬件资源而真正实用，而对于本发明所指的复合组件来说，组件运行时模块主要负责将复合组件的各项配置项信息与复合组件的Vue组件实例进行动态绑定，同时为复合组件提供基于Vue的渲染环境以及组件间的通信环境等功能。组件运行时（Runtime）模块各部分说明如下：

[0135] a）组件定义单元，是一种封装了能描述复合组件的属性和行为的固定的数据结构。需要说明的是，复合组件的属性和行为应与Vue组件的属性和方法区分，后者指的是源代码层面Vue框架的专有概念，属性和方法指Vue源码中Vue对象的属性和方法，是静态的，而前者指的是复合组件在前端Web应用层面的对其内部包含的可变化的固有数据以及能给予用户可视化感知的对其自身或其他复合组件施以的某种状态的影响的拟人化描述。

[0136] b）组件实例单元，是一种派生于组件定义单元的能描述复合组件的属性和行为的动态的数据结构，组件运行时模块通过克隆组件定义单元的信息创建组件实例，并进一步生成对应的Vue组件实例与组件定义单元绑定。在组件运行时模块，组件实例单元可以被使用和操作。

[0137] c）组件缓存，主要负责对组件库以及组件定义单元进行本地缓存，它基于浏览器的localStorage接口，对组件加载模块的作业流程产出的物组件定义单元进行本地缓存，组件加载模块使用组件在重复加载相同的复合组件时可直接使用本地的缓存内容，而不用从远端组件库中获取，以此提高复合组件二次初始化加载的速度。

[0138] d）组件层级树，主要负责存储和管理组件实例单元的排序和嵌套关系，它通过使用JavaScript的数组和对象进行树形数据结构的构建，存储和管理多个组件实例单元的排序和嵌套关系。

[0139] e）组件渲染器，主要负责渲染组件实例单元，它通过Vue的渲染机制，根据组件实例单元其在组件层级树中的排序和嵌套关系计算组件实例单元的Vue组件实例在组件画布上的渲染优先级以及渲染层级深度，并根据组件实例单元的Vue源码中的界面和样式定义，以及组件实例单元间通过组件通信管道相互施加的影响，对组件实例单元基于Vue框架渲染所需的数据进行计算，最终在组件画布上进行绘制。

[0140] f）组件画布，主要负责提供组件实例单元的渲染窗口，它是一个特殊的Vue组件，它的模板中包含了一个用于展示其他Vue组件实例的占位符，可以支持Vue组件实例层叠堆放渲染，能够支持渲染窗口的大小自适应，对组件渲染器提出的组件实例单元渲染请求进行实时处理。在组件画布上，每个Vue组件实例都被包裹在一个容器组件中，这个容器组件提供了一些基础功能，例如拖拽、缩放等。同时，容器组件也提供了一些用于管理Vue组件实例的接口，例如修改组件的配置信息、更新组件的数据等。

[0141] d）组件通信管道，主要负责提供组件实例单元之间的数据通信管道。它通过Vue的事件机制以及用于状态管理的Vuex技术，实现不同组件实例单元之间的数据通信。组件通信管道还负责监听容器组件中Vue组件实例的事件，它在组件画布中插入钩子，当Vue组件实例触发事件时，组件画布将这些事件转发给组件运行时模块，组件运行时模块根据这些事件，更新组件实例单元的配置信息，或者触发其他Vue组件实例的方法。

[0142] 3）组件配置模块，包括组件配置转换器、组件交互管理器、组件数据管理器和组件资源管理器，主要负责对组件实例单元进行配置。通过组件配置模块，可以对组件实例单元的组件大小信息、组件位置信息等进行二次配置，使得组件更加灵活和可定制。

[0143] a）组件配置转换器，主要负责对组件实例单元的组件可配置项信息进行二次配置，它通过解析和修改组件实例单元的可配置项信息，实现对组件实例单元的可配置项的二次配置。

[0144] 组件配置描述文件中的组件可配置项信息里面包含配置项类型，用于为组件配置转换器提供转换参数，组件配置转换器根据转换参数将组件可配置项渲染成对应的配置设置界面，供使用人员调整复合组件在实际运行时的样式、功能及数据等配置。

[0145] b）组件交互管理器，主要负责对组件实例单元的组件事件信息和组件响应信息进行二次配置，它基于Vuex技术进行状态管理，通过解析和修改组件实例单元的组件事件信息和组件响应信息，实现对组件实例单元的交互行为的二次配置。

[0146] c）组件数据管理器，主要负责对组件实例单元的数据内容进行二次配置，它使用组件定义单元里的数据内容作为默认的数据，通过提供对数据内容的可视化编辑界面，以及外部数据选择器，使用人员可以通过可视化编辑界面直接对数据内容进行修改编辑，也可以通过选择外部数据选择器中的选项，直接引用应用资源管理模块中注册好的接口资源和JSON资源来使用，覆盖复合组件的数据内容，实现对组件实例单元的数据内容的二次配置。在选择使用外部数据的时候，组件数据管理器将按照组件实例单元中的数据格式，对外部数据进行格式检查，不满足数据格式要求的外部数据配置将会被系统提示数据格式错误，并且不能被保存。

[0147] d）组件资源管理器，主要负责对组件实例单元的组件资源进行二次配置，它使用组件定义单元里的组件资源的名称、类型、路径等信息作为默认数据，通过提供外部资源选择器，使用人员可以通过选择外部资源选择器中的选项，直接引用应用资源管理模块中注册好的多媒体资源来使用，对原来组件实例单元中的组件资源进行选择性替换，实现对组件实例单元的组件资源的二次配置。

[0148] 复合组件在被动态加载系统加载后，将在如图10所示组件运行框架中经过一系列步骤处理后生成组件实例单元，复合组件的组件配置描述文件、组件数据描述文件中的内容将作为组件实例单元的默认上下文。上下文是程序执行时的环境和状态信息，本发明实施例中所指的复合组件上下文，包含组件的数据、属性、方法等信息，用于管理组件的状态和行为。组件配置模块可在复合组件实际运行时对组件上下文进行动态的二次配置，以变更复合组件在实际运行时的样式、功能及数据等配置，实现单个复合组件在不同应用场景中的灵活复用。

[0149] 组件数据描述文件中的数据格式和数据内容被加载进复合组件的数据上下文后，组件运行框架将对复合组件的数据内容进行检查，当复合组件的数据内容缺失数据格式所限定的字段名称及类型时，组件运行框架将会抛出异常并提示使用者进行处理。

[0150] 下面说明从组件事件触发到组件响应动作是如何构建及传递，如图8所示，复合组件在被组件运行框架加载后，将在组件运行时模块中生成复合组件实例单元，通过组件配置模块的组件交互管理器，能够将一个复合组件定义的一个组件事件与一个或多个复合组件定义的多个组件响应动态绑定，一个组件的事件可以与该组件或其他组件的响应绑定，组件事件与组件响应的绑定是一对一或一对多的。本发明实施例提出的多个组件的事件和响应间的绑定方式与传统技术方案采用硬编码方式不同，此处的绑定方式是解耦的，需要通过组件交互管理器配置建立动态绑定关系，组件运行时模块根据该动态绑定关系建立两个组件间唯一的数据通信管道。

[0151] 例如，图8中复合组件A与复合组件B一旦进行事件与响应的绑定，复合组件A的id"rid1”、事件标识"demoEvent”，将与复合组件B的id"rid2”、响应标识"demoAction”绑定。

[0152] 本发明实施例提出一种存储事件响应绑定关系的数据结构设计，如图4所示，通过该数据结构设计，复合组件A可以轻易获取与其事件绑定的其他复合组件的响应标识。假设复合组件A的事件需同时与更多的复合组件的响应绑定，例如，与复合组件C的id"rid3”、响应标识"demoAction3”来绑定，采用以上数据结构填写数据即可支持。

[0153] 一个复合组件的组件事件由其自身触发，并向组件运行时模块的组件通信管道通过dispatch函数发送事件标识以及数据负载payload，组件运行时模块根据组件事件和组件响应的绑定关系一一执行被绑定的对应组件的与被绑定的响应标识具有相同名称的的响应函数代码。

[0154] 本发明实施例的组件脚手架如图11所示，提供复合组件的构建开发和打包功能。它是基于组件运行框架扩展而成，还包括组件打包模块。组件打包模块包括：

[0155] 1）构建配置生成器，主要负责生成复合组件的构建配置信息，它通过解析复合组件的Vue源码和组件配置描述文件，生成复合组件的构建配置信息。构建配置信息用于给组件构建打包器提供完整的构建以及打包配置信息，其包含复合组件的组件标识、组件版本、组件类型、Vue源码入口文件路径、资源包路径、编译结果输出目录等信息。

[0156] 2）组件构建打包器，主要负责对复合组件进行构建和打包，它首先通过Vue框架提供的vue-cli-service构建工具，对复合组件的源码进行编译，然后根据构建配置信息将编译后的源码和配置文件进行打包，生成可上传至组件库的复合组件的组件包。

[0157] 本发明实施例的应用装配器如图12所示，应用装配器提供将多个复合组件装配成可视化应用的功能。它基于组件运行框架扩展而成，还包括应用资源管理模块、组件管理模块、组件选配模块。

[0158] 1）应用资源管理模块，主要负责注册和管理可视化应用的资源，应用的资源类型包括接口资源、多媒体资源、JSON资源。应用资源管理模块提供应用资源的注册功能，被注册进系统的资源将以列表形式在系统界面上展示，并能在组件配置模块中以下拉选择器方式引用。被应用资源管理模块管理的组件资源可以同时被多个复合组件在组件配置模块中同时引用，达到作为应用中的数据容器以及资源容器的目的。

[0159] 2）组件选配模块，主要负责选配复合组件，它通过搜索和筛选功能，帮助开发者从组件库中选取满足使用需求的复合组件。

[0160] 3）组件管理模块，主要负责管理复合组件的排序和嵌套关系，它通过拖拽和调整顺序等操作，帮助开发者在组件层级树中对复合组件进行排序和嵌套操作。同时，该模块还提供对所选复合组件的选定功能，以便于组件配置模块对其进行配置。

[0161] 以上就是本发明实施例复合组件的动态加载系统的说明，此系统可用于复合组件的开发、测试、打包、发布、加载、运行和卸载。实施例三

[0162] 本发明实施例还提供了复合组件的动态加载方法，包括以下步骤：

[0163] S1、开发者通过组件脚手架进行复合组件的开发，并进行构建和打包，形成组件包。

[0164] 在组件脚手架中，开发者可以编写Vue源码、组件配置描述文件、组件数据描述文件和组件资源包。在开发完成后，通过组件脚手架中的构建配置生成器和组件构建打包器，将复合组件进行构建和打包，生成可上传至组件库的复合组件的组件包。

[0165] S2、开发者将组件包上传至组件库，组件库将组件包传递给组件拆包模块。

[0166] 复合组件进行构建和打包后生成组件包，组件库中的组件接收模块通过HTTP或FTP等协议接收上传的组件包，并将组件包传递给组件拆包模块进行处理。

[0167] S3、组件拆包模块对接收到的组件包进行解压缩，将组件包中的Vue源码、组件配置描述文件、组件数据描述文件和组件资源包解压出来，并将这些内容传递给组件存储模块进行存储。

[0168] S4、组件存储模块对解压后的内容进行分类存储，按照由组件名称、组件版本和文件类型组合成的索引条件，将解压后的内容进行分类存储。

[0169] S5、使用者通过应用装配器从组件库中选配一到多个复合组件，并将其组装配置成Vue应用。

[0170] 应用装配器中的组件选配模块帮助使用者从组件库中选取满足使用需求的复合组件，组件管理模块帮助使用者在组件层级树中对复合组件进行排序和嵌套操作。

[0171] S6、Vue应用中的复合组件通过组件运行框架的组件加载模块，选配的复合组件被加载到Vue环境中

[0172] 组件加载模块中的组件取回器从组件库中取回复合组件的内容，异步组件加载器将取回的Vue源码异步加载成Vue组件，并将其初始化到全局的Vue环境中。

[0173] S7、组件加载模块中的组件解析器解析被加载的Vue组件，封装成组件定义单元。

[0174] 组件加载模块中的组件解析器解析被加载的Vue组件，以及解析组件配置描述文件、组件数据描述文件和组件资源包，提取出组件的基本信息、大小信息、位置信息、事件信息、响应信息、可配置项信息、数据格式、数据内容以及组件资源的名称、类型、路径等信息，将这些信息和Vue组件的属性和方法一起封装成组件定义单元。

[0175] S8、组件运行时模块根据应用装配器的调度生成基于组件定义单元的组件实例单元。

[0176] 生成组件实例单元的同时为复合组件初始化及提供基于Vue的渲染环境以及组件间的通信环境等功能。

[0177] S9、组件配置模块对组件实例单元进行二次配置。

[0178] 可以对组件实例单元的组件大小信息、组件位置信息等进行二次配置，使得组件更加灵活和可定制。

[0179] S10、组件实例单元将被传递到组件运行时模块的组件渲染器，组件渲染器将创建的Vue组件实例单元添加到组件画布上。

[0180] 组件实例单元将被传递到组件运行时模块的组件渲染器，组件渲染器会根据组件实例单元的配置信息，包括组件的尺寸、位置、样式等，以及组件画布的当前尺寸，计算及调整出组件实例单元的Vue组件实例的最终渲染参数，最后将创建的Vue组件实例单元添加到组件画布上。

[0181] S11、Vue应用中的复合组件全部被添加到组件画布中，完成Vue应用的动态加载。

[0182] 通过以上的S1-S11步骤，就在实施例二提供的复合组件系统中，完成了基于Vue复合组件的动态加载，实现了基于Vue复合组件的应用的动态运行。

[0183] 通过本发明的三个实施例，解决了复杂Vue组件的开发、组装、复用存在的规范缺失以及效率低下等问题，提出了新的复合组件规范以及加载系统和方法，可以实现复杂Vue组件的开发构建规范化、动态加载和灵活复用，提高了Vue组件的复用性和系统的灵活性。

[0184] 以上实施例的说明只是用于帮助理解本发明的方法及其核心思想。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以对本发明进行若干改进和修饰，这些改进和修饰也落入本发明权利要求的保护范围内。< / style> < / button> < / template> < / template>

Claims

1. A composite component loading system, characterized in that: Used to load Vue-based composite components, including the following parts: Component library, used to receive, decompress, store and distribute composite components, as well as version management and reuse of composite components; Component operation framework, used to provide dynamic loading and parsing, real-time operation, dynamic configuration, rendering and communication functions of composite components; Component scaffolding, which is used to provide the building, development and packaging functions of composite components; Application assembler, used to select one or more composite components from the component library and assemble and configure them into a Vue application; The component operation framework includes: The component loading module is used to retrieve the content of the composite component from the component library and load it into the Vue environment, including at least a component parser, which is used to parse the loaded Vue component and convert it into a component definition unit; The component configuration module is used to perform secondary configuration on the configurable items of the loaded composite component; The component runtime module is used to dynamically bind the configuration item information of the composite component with the Vue component instance of the composite component, and provide a Vue-based rendering environment and a communication environment between components for the composite component. It includes at least a component definition unit, which is used to encapsulate the properties and behaviors of the composite component; a component instance unit, which is derived from the running instance of the component definition unit; a component canvas, which is used to provide a rendering window for the component instance unit; a component renderer, which is used to render the component instance unit and draw the component instance unit on the component canvas; and a component communication pipeline, which is used to provide a data communication pipeline between component instance units.

2. A composite component loading system according to claim 1, characterized in that: The Vue-based composite component includes the following parts: Vue source code is the source code of the Vue component; Component configuration description file, used to provide component basic information, component size information, component location information, component event information, component response information and component configurable item information; Component data description file, used to define the field format and content of the data required by the composite component during operation; Component resource bundle, used to provide resources referenced by composite components at runtime.

3. A composite component loading system according to claim 2, characterized in that: The Vue source code includes templates, styles and scripts; the template is used to describe the structure of the composite component; the style is used to describe the style of the composite component; the script is used to describe the properties and methods of the composite component; the component data description file includes data format and data content; the component resource package includes video resources, audio resources, picture resources and text resources.

4. A composite component loading system according to claim 1, characterized in that: The component library includes: The component receiving module is used to receive the component package formed by the composite component uploaded by the developer, and pass the component package to the component unpacking module for processing; The component unpacking module is used to unpack the received component package, decompress the Vue source code, component configuration description file, component data description file and component resource package in the component package, and pass them to the component storage module for storage; The component storage module is responsible for classifying and storing the unpacked content, and for retrieving the content of the composite component from the component library for distribution.

5. A composite component loading system according to claim 1, characterized in that: The component runtime module also includes: Component cache, used to locally cache component libraries and component definition units; The component hierarchy tree is used to store and manage the sorting and nesting relationships of component instance units.

6. A composite component loading system according to claim 1, characterized in that: The component loading module also includes: A component retriever, used to retrieve the content of a composite component from a component library on demand; The asynchronous component loader is used to asynchronously load the Vue source code in the retrieved composite component into a Vue component through Vue's asynchronous component loading mechanism, and initialize it into the global Vue environment.

7. A composite component loading system according to claim 1, characterized in that: The component configuration module includes: A component configuration converter is used to reconfigure the component configurable item information of the component instance unit; A component interaction manager is used to reconfigure the component event information and component response information of the component instance unit; Component data manager, used to reconfigure the data content of component instance units; The component resource manager is used to perform secondary configuration on the component resources of the component instance unit.

8. A composite component loading system according to any one of claims 1 to 7, characterized in that: The component scaffolding is used for the construction, development and packaging of composite components. It is extended based on the component operation framework and also includes the following parts: The build configuration generator is used to generate the build configuration information of the composite component by parsing the Vue source code and component configuration description file of the composite component; Component build packager, used to build and package composite components.

9. A composite component loading system according to any one of claims 1 to 7, characterized in that: The application assembler provides the function of assembling multiple composite components into a visual application. It is extended based on the component running framework and also includes the following parts: Application resource management module, used to register and manage the resources of visualization applications; The component selection module is used to help developers select composite components that meet their usage requirements from the component library through search and filtering functions; The component management module is used to manage the sorting and nesting relationships of composite components.

10. A composite component loading method, characterized in that: The following steps are involved: S1. Developers develop composite components through component scaffolding, build and package them to form component packages; S2. The developer uploads the component package to the component library, and the component library passes the component package to the component unpacking module; S3, the component unpacking module decompresses the received component package, decompresses the Vue source code, component configuration description file, component data description file and component resource package in the component package, and passes these contents to the component storage module for storage; S4, the component storage module classifies and stores the decompressed content according to the index condition composed of the component name, component version and file type; S5. The user selects one or more composite components from the component library through the application assembler and assembles and configures them into a Vue application; S6. The component loading module of the component running framework loads the composite component in the Vue application into the Vue environment. The component running framework includes a component loading module, which is used to retrieve the content of the composite component from the component library and load it into the Vue environment, and at least includes a component parser, which is used to parse the loaded Vue component and convert it into a component definition unit; a component configuration module, which is used to perform secondary configuration on the configurable items of the loaded composite component; a component runtime module, which is used to dynamically bind the configuration item information of the composite component with the Vue component instance of the composite component, and at the same time provide a Vue-based rendering environment and a communication environment between components for the composite component, and at least includes a component definition unit, which is used to encapsulate and describe the properties and behaviors of the composite component; Component instance unit, derived from the running instance of component definition unit; component canvas, used to provide a rendering window for component instance unit; component renderer, used to render component instance unit, drawing component instance unit on component canvas; component communication pipeline, used to provide data communication pipeline between component instance units; S7. The component parser in the component loading module parses the loaded Vue component and encapsulates it into a component definition unit; S8, the component runtime module generates a component instance unit based on the component definition unit according to the scheduling of the application assembler; S9, the component configuration module performs secondary configuration on the component instance unit; S10, the component instance unit will be passed to the component renderer of the component runtime module, and the component renderer will add the created component instance unit to the component canvas; S11. After all the composite components in the Vue application are added to the component canvas, the dynamic loading of the Vue application is completed.

Images