一种自定义界面系统中界面组件的加载方法和装置

摘要

本申请公开了一种自定义界面系统中界面组件的加载方法和装置，该方法包括：预先存储各界面组件绑定的多个插件，所述多个插件是构成相应界面组件的基本加载单元；接收加载指令，所述加载指令中携带有预加载界面组件的标识和用于加载每个预加载界面组件的目标界面空间；对所述加载指令中的每个预加载界面组件，进行如下的处理：获取所述预加载界面组件所绑定的各插件和各插件在目标界面空间中的加载位置；分别将所述获取到的各插件加载到其在目标界面空间中的加载位置。采用本申请，可以提高自定义界面系统的存储资源利用率。

说明书

技术领域

本申请涉及计算机技术领域，特别是涉及一种自定义界面系统中界面组件 的加载方法和装置。

背景技术

在网络交易平台中，一般都存有大量的卖家数据，相应的也需要针对性的 管理平台和大量的管理人员对海量的卖家数据进行管理。

卖家档案系统是网络交易平台内部对卖家数据管理的平台，该系统可以向 用户展示全面的卖家数据，向用户提供可以自由设置的界面，卖家档案系统是 一种自定义界面系统，卖家数据的显示界面是组件化的，呈现给用户的界面是 由多个界面组件组成的，如经营类数据组件、卖家数据查询组件、卖家比较组 件等，用户可以自由使用界面组件，随意改变界面组件的位置和显示方式，具 有很强的灵活性和通用性。系统界面中各界面组件的加载，是根据组件模板进 行界面渲染和交互事件绑定以完成的。

在实现本申请的过程中，发明人发现，现有技术至少存在如下问题：现有 技术在进行界面组件的加载时，对整个界面组件进行整体的界面渲染和交互事 件绑定，即使组件模板之间只存在很小的差别，也要建立两个不同的组件模板， 而且系统中组件模板的数量是非常庞大的，这必然导致巨大的存储、计算资源 的浪费。

发明内容

本申请的目的在于，提供一种自定义界面系统中界面组件的加载方法和装 置，以提高自定义界面系统的存储、计算资源利用率，为此，本申请实施例采 用如下技术方案：

一种自定义界面系统中界面组件的加载方法，其中，预先存储各界面组件 绑定的多个插件，所述多个插件是构成相应界面组件的基本加载单元，该方法 包括：

接收加载指令，所述加载指令中携带有预加载界面组件的标识和用于加载 每个预加载界面组件的目标界面空间；

对所述加载指令中的每个预加载界面组件，进行如下的处理：

获取所述预加载界面组件所绑定的各插件和各插件在目标界面空间中的 加载位置；

分别将所述获取到的各插件加载到其在目标界面空间中的加载位置。

一种自定义界面系统中界面组件的加载装置，包括：

存储模块，预先存储各界面组件绑定的多个插件，所述多个插件是构成相 应界面组件的基本加载单元；

接收模块，接收加载指令，所述加载指令中携带有预加载界面组件的标识 和用于加载每个预加载界面组件的目标界面空间；

获取模块，用于获取所述预加载界面组件所绑定的各插件和各插件在目标 界面空间中的加载位置；

加载模块，用于分别将所述获取到的各插件加载到其在目标界面空间中的 加载位置。

本申请的实施例中，预先存储各界面组件绑定的多个插件，所述多个插件 是构成相应界面组件的基本加载单元，在进行界面组件加载时，接收加载指令， 所述加载指令中携带有预加载界面组件的标识和用于加载每个预加载界面组 件的目标界面空间，对所述加载指令中的每个预加载界面组件，进行如下的处 理：获取所述预加载界面组件所绑定的各插件和各插件在目标界面空间中的加 载位置，分别将所述获取到的各插件加载到其在目标界面空间中的加载位置。 从而，可以提高自定义界面系统的存储、计算资源利用率。而且，由于界面组 件由多个插件加载构成，所以用户通过简单的界面操作就可以组建个性化的界 面组件，很大程度上简化了用户的操作。当然，实施本申请的实施例的任一产 品并不一定需要同时达到以上所述的所有优点。

附图说明

图1为本申请实施例提供的自定义界面系统中界面组件的加载方法的流程 示意图之一；

图2为本申请实施例提供的自定义界面系统中界面组件的加载方法中的界 面组件示意图；

图3为本申请实施例提供的自定义界面系统中界面组件的加载方法的流程 示意图之二；

图4为本申请实施例提供的自定义界面系统中界面组件的加载装置的结构 示意图。

具体实施方式

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

实施例一

本申请实施例提供了一种自定义界面系统中界面组件的加载方法，下面结 合网络交易平台中的卖家档案系统对本申请的方法进行说明。在该方法中，系 统预先存储各界面组件绑定的多个插件。系统中的每一个界面组件都可以由多 个插件进行加载而构成，多个插件是构成相应界面组件的基本加载单元，每个 插件用于完成一项或多项基本功能，例如，卖家选择功能、页面选择功能、版 权声明功能等。在不同的界面组件中可以包括相同的插件，例如，很多界面组 件中都设置有卖家选择的功能，用于进行不同卖家用户的选择。在插件中定义 了如何对界面空间中相应的加载位置进行界面渲染，以及如何对该加载位置进 行交互事件的绑定，系统可以将界面组件的标识与构成该界面组件的多个插件 对应存储。交互事件的定义可以结合实例进行说明，例如，页码选择插件定义 的交互事件是，当接收到点击指令时，根据点击的页码进行相应的翻页操作。

如图1所示，其为本申请实施例提供的自定义界面系统中界面组件的加载 方法的流程，可以包括以下步骤：

步骤101，系统接收加载指令，所述加载指令中携带有预加载界面组件的 标识和用于加载每个预加载界面组件的目标界面空间。其中，目标界面空间即 屏幕显示界面中的某个范围的空间。

本申请实施例提供的方法可以应用在网络交易平台的用户使用的终端上 的自定义界面系统中。在自定义界面系统启动时，系统根据接收到的加载指令， 在系统的整个显示界面中加载各个界面组件。另外，在用户使用自定义界面系 统的过程中，如果要在某个或某几个界面空间中加载新的界面组件，则可以点 击“添加界面组件”的选项，并从界面组件的列表中选择自己要加载的界面组 件，从而向系统发出加载指令。上述加载指令中可以携带有预加载界面组件的 标识，以及每个预加载界面组件加载到的对应的目标界面空间的信息。系统的 整个界面中可划分有多个界面空间，每个界面空间都可以加载一个界面组件。

对加载指令中的每个预加载界面组件，进行如下步骤102-103的处理：

步骤102，系统获取预加载界面组件所绑定的各插件和各插件在目标界面 空间中的加载位置。

每个界面组件都可由若干个插件组成，如图2所示的经营类数据的界面组 件中，其中包括卖家选择插件、页面选择插件、版权声明插件等。

具体的，系统可以预先存储各界面组件的模板，在界面组件的模板中记录 该界面组件中所绑定的各插件，以及各插件在目标界面空间中的加载位置的信 息(如位置标识)，还可以包括一些其他的参数。在系统接收到加载指令后， 可以根据加载指令中的预加载界面组件的标识调用预加载界面组件的模板，然 后根据模板确定加载相应界面组件的各插件，并确定各插件的加载位置。

步骤103，系统分别将获取到的各插件加载到其在目标界面空间中的加载 位置。

在进行各插件的加载之前，可以先对加载预加载界面组件的目标界面空间 进行初始化，清空目标界面空间。在对某个插件进行加载时，可以先根据该插 件，对目标界面空间中相应的加载位置进行界面渲染，然后，再根据该插件， 对该加载位置进行交互事件绑定。

各插件可以按照预先设置的顺序进行加载，还可以将界面组件划分为多个 区域，分别对加载位置在不同区域中的插件进行加载。

具体的，系统可以预先存储各界面组件的区域划分信息(可以存储在界面 组件的模板中)，在接收到加载指令之后，系统获取存储的预加载界面组件的 区域划分信息。系统根据插件进行界面组件加载时的具体过程可以包括：首先， 根据预加载界面组件的区域划分信息，将预加载界面组件划分为多个区域；然 后，分别将所述获取到的各插件，按照其加载位置所属的区域，加载到目标界 面空间中。另外，还可以设定各区域之间的加载顺序，例如，如图2所示，将 界面组件分为头部区域、数据区域和尾部区域，区域之间的加载顺序可以是按 照头部区域、数据区域、尾部区域从上到下的顺序，在进行界面组件的加载时， 可以先对头部区域中的插件进行加载，然后对数据区域中的插件进行加载，最 后对尾部区域中的插件进行加载。

在区域的内部，可以先按预设的插件的顺序对所有插件的加载位置进行界 面渲染，然后再按该顺序对所有加载位置进行交互事件绑定。例如，某区域中 包含插件1和插件2两个插件，系统可以先调用插件1对相应的加载位置进行 界面渲染，再调用插件2对相应的加载位置进行界面渲染，然后调用插件1进 行交互事件绑定，再调用插件2进行交互事件绑定。

优选的，如果预加载界面组件的显示数据中包括从后台服务器获取的数据 (也可以称作异步数据，在系统启动以后需要用户发起请求从后台服务器获 取)，则所述划分出的多个区域中，至少包括数据区域，用于显示从后台服务 器获取的数据；当加载数据区域内的插件时，根据从后台服务器获取的数据， 对数据区域内的插件进行加载。

在预加载界面组件中将显示异步数据的区域独立划分为数据区域，在对数 据区域中的插件进行加载时，系统可以先从后台服务器获取数据区域需要显示 的异步数据，然后根据插件和获取的异步数据，对相应的加载位置进行界面渲 染，并根据插件对相应的加载位置进行交互事件绑定。

当对数据区域中的数据进行更新时，系统可以根据更新后的数据，对数据 区域内的插件进行重新加载。也即，在异步数据发生更新后，可以根据更新后 的异步数据重新对该数据区域进行加载，此时，可以不对其他区域进行重新加 载。

本申请的实施例中，系统预先存储各界面组件绑定的多个插件，所述多个 插件是构成相应界面组件的基本加载单元，在进行界面组件加载时，系统接收 加载指令，所述加载指令中携带有预加载界面组件的标识和用于加载每个预加 载界面组件的目标界面空间，系统对所述加载指令中的每个预加载界面组件， 进行如下的处理：获取所述预加载界面组件所绑定的各插件和各插件在目标界 面空间中的加载位置，分别将所述获取到的各插件加载到其在目标界面空间中 的加载位置。从而，可以提高自定义界面系统的存储、计算资源利用率。而且， 由于界面组件由多个插件加载构成，所以用户通过简单的界面操作就可以组建 个性化的界面组件，很大程度上简化了用户的操作。

实施例二

如图3所示，其为本申请实施例提供的自定义界面系统中界面组件的加载 方法在具体应用场景(图2所示的界面组件的加载过程，该界面组件被划分为 头部区域、数据区域、尾部区域三个区域)中的处理流程，可以包括以下步骤：

步骤301，系统接收加载指令，所述加载指令携带有预加载界面组件的标 识，并且还可以携带加载该预加载界面组件的目标界面空间的标识。

对加载指令中的每个预加载界面组件，进行如下步骤302-310的处理：

步骤302，系统获取预加载界面组件所绑定的各插件和各插件在目标界面 空间中的加载位置。

步骤303，系统对目标界面空间进行初始化，清空该界面空间中的内容。

步骤304，系统对界面组件的头部区域进行界面渲染。具体的，系统根据 卖家选择插件对相应的加载位置进行界面渲染。

步骤305，系统对界面组件的头部区域进行交互事件绑定。具体的，系统 根据卖家选择插件对相应的加载位置进行交互事件绑定。

步骤306，系统从后台服务器获取异步数据。

步骤307，系统对界面组件的数据区域进行界面渲染。具体的，系统根据 数据显示插件和获取到的异步数据，对相应的加载位置进行界面渲染。

步骤308，系统对界面组件的数据区域进行交互事件绑定。具体的，系统 根据数据显示插件对相应的加载位置进行交互事件绑定。

步骤309，系统对界面组件的尾部区域进行界面渲染。具体的，可以先根 据页码选择插件对相应的加载位置进行界面渲染，再根据版权声明插件对相应 的加载位置进行界面渲染。

步骤310，系统对界面组件的尾部区域进行交互事件绑定。具体的，可以 先根据页码选择插件对相应的加载位置进行交互事件绑定，再根据版权声明插 件对相应的加载位置进行交互事件绑定。

如下所示，为本申请实施例提供的自定义界面系统中界面组件的加载方法 的一个程序实例。

上述程序实例中，定义了一个UDCRenderer(一种基础渲染器(Base  Renderer))，在基础渲染器中规定了该基础渲染器要实现的方法和属性。下面 对一些参数进行简单说明：

dataSource：定义数据源，系统获取异步数据的入口，一般为json格式。 初次加载异步数据时进行定义。具体可以包括以下参数：url：请求的URL (Uniform Resource Locator，统一资源定位符)，异步数据获取的后台服务器的 入口；type：数据请求的方法，值为“get”或“post”；dataType：请求数据返 回的类型，支持“json”或“xml”格式；data：json格式的数据，作为post发 送到后台服务器的参数域。

beforeRender：头部区域的界面渲染(可以简称渲染)方法。

dataRender：数据区域的渲染方法，如果数据区域的显示数据需要更新， 会重新调用这个方法渲染数据区域，不会影响到头部区域和尾部区域。

afferRender：非数据区域尾部渲染方法。

bindEventBefore：头部区域交互事件绑定方法。

bindEventData：数据区域交互事件绑定方法。

bindEventAfter：尾部区域交互事件绑定方法。

上述程序实例中，在基本渲染器中调用插件，并对插件进行实例化，具体 如下：

调用相应的插件分别对区域内相应的加载位置进行交互事件绑定，具体如 下：

本申请的实施例中，系统预先存储各界面组件绑定的多个插件，所述多个 插件是构成相应界面组件的基本加载单元，在进行界面组件加载时，系统接收 加载指令，所述加载指令中携带有预加载界面组件的标识和用于加载每个预加 载界面组件的目标界面空间，系统对所述加载指令中的每个预加载界面组件， 进行如下的处理：获取所述预加载界面组件所绑定的各插件和各插件在目标界 面空间中的加载位置，分别将所述获取到的各插件加载到其在目标界面空间中 的加载位置。从而，可以提高自定义界面系统的存储、计算资源利用率。而且， 由于界面组件由多个插件加载构成，所以用户通过简单的界面操作就可以组建 个性化的界面组件，很大程度上简化了用户的操作。

实施例三

基于相同的技术构思，本申请实施例还提供了一种自定义界面系统中界面 组件的加载装置，如图4所示，包括：

存储模块410，用于预先存储各界面组件绑定的多个插件，所述多个插件 是构成相应界面组件的基本加载单元；

接收模块420，用于接收加载指令，所述加载指令中携带有预加载界面组 件的标识和用于加载每个预加载界面组件的目标界面空间；

获取模块430，用于获取所述预加载界面组件所绑定的各插件和各插件在 目标界面空间中的加载位置；

加载模块440，用于分别将所述获取到的各插件加载到其在目标界面空间 中的加载位置。

优选的，所述存储模块410，还用于预先存储各界面组件的区域划分信息；

所述加载模块440，具体用于根据所述预加载界面组件的区域划分信息， 将所述预加载界面组件划分为多个区域；分别将所述获取到的各插件，按照其 加载位置所属的区域，加载到目标界面空间中。

优选的，如果所述预加载界面组件的显示数据中包括从后台服务器获取的 数据，则所述划分出的多个区域中，至少包括数据区域，用于显示所述从后台 服务器获取的数据；

所述加载模块440，具体用于当加载数据区域内的插件时，根据所述从后 台服务器获取的数据，对所述数据区域内的插件进行加载。

优选的，所述加载模块440，还用于：当对数据区域中的数据进行更新时， 根据更新后的数据，对所述数据区域内的插件进行重新加载。

优选的，还包括初始化模块，用于对加载所述预加载界面组件的目标界面 空间进行初始化。

优选的，所述加载模块440，具体用于：

根据所述插件，对目标界面空间中相应的加载位置进行界面渲染；

根据所述插件，对所述加载位置进行交互事件绑定。

本申请的实施例中，预先存储各界面组件绑定的多个插件，所述多个插件 是构成相应界面组件的基本加载单元，在进行界面组件加载时，接收加载指令， 所述加载指令中携带有预加载界面组件的标识和用于加载每个预加载界面组 件的目标界面空间，对所述加载指令中的每个预加载界面组件，进行如下的处 理：获取所述预加载界面组件所绑定的各插件和各插件在目标界面空间中的加 载位置，分别将所述获取到的各插件加载到其在目标界面空间中的加载位置。 从而，可以提高自定义界面系统的存储、计算资源利用率。而且，由于界面组 件由多个插件加载构成，所以用户通过简单的界面操作就可以组建个性化的界 面组件，很大程度上简化了用户的操作。

本领域技术人员可以理解实施例中的装置中的模块可以按照实施例描述 进行分布于实施例的装置中，也可以进行相应变化位于不同于本实施例的一个 或多个装置中。上述实施例的模块可以合并为一个模块，也可以进一步拆分成 多个子模块。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本申请 可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很 多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上 或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机 软件产品存储在一个存储介质中，包括若干指令用以使得一台终端设备(可以 是手机，个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述 的方法。

以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通 技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰， 这些改进和润饰也应视本申请的保护范围。