CN110471656A - 组件层级的调整方法和装置 - Google Patents

Abstract

本发明公开了一种组件层级的调整方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：从层级调整指令触发的事件中，获取所述层级调整指令针对的画布中组件的标识和层级调整策略；其中，所述组件事先与预先存储的组件数组中含有所述组件的标识的数组元素绑定；按照所述层级调整策略调整该数组元素在所述组件数组中的位置；在调整完毕之后，根据该数组元素在所述组件数组中的当前位置渲染所述画布。该实施方式能够在不依赖于组件z‑index属性的前提下灵活调整组件层级。

Description

组件层级的调整方法和装置

技术领域

本发明涉及计算机技术领域，尤其涉及一种组件层级的调整方法和装置。

背景技术

在基于浏览器实现网页编辑器的过程中，画布中的多个组件之间会互相层叠，因此需要对组件的层级关系进行调整。在现有的技术方案中，一般通过对组件的堆叠顺序值z-index进行简单加减以实现组件层级的调整：z-index值越大，组件离用户越近；反之则离用户越远。

在实现本发明的过程中，发明人发现现有技术至少存在以下问题：

1.现有技术易使组件的z-index值间断，且z-index最大值一般远大于组件数目，这导致在调整某个组件的层级时，往往需要对该组件进行多次触发才能达到预期效果。

2.在现有技术中，组件z-index值相同时，其层级关系取决于组件的载入顺序，这事实上导致此种情况下组件的实际层级无法控制。

3.现有技术需要记录每个组件即时的z-index值，这使得组件存储和网络传输的成本增加。

发明内容

有鉴于此，本发明实施例提供一种组件层级的调整方法和装置，可在不依赖于组件z-index属性的前提下灵活调整组件层级，从而克服现有技术中组件层级关系混乱、组件存储与网络传输成本较高的缺陷。

为实现上述目的，根据本发明的一个方面，提供了一种组件层级的调整方法。

本发明实施例的组件层级的调整方法包括：从层级调整指令触发的事件中，获取所述层级调整指令针对的画布中组件的标识和层级调整策略；其中，所述组件事先与预先存储的组件数组中含有所述组件的标识的数组元素绑定；按照所述层级调整策略调整该数组元素在所述组件数组中的位置；在调整完毕之后，根据该数组元素在所述组件数组中的当前位置渲染所述画布。

可选地，所述方法进一步包括：使所述画布中每一组件的堆叠顺序值z-index保持为默认值。

可选地，所述层级调整指令包括：层级上移指令；以及，所述按照所述层级调整策略调整该数组元素在所述组件数组中的位置具体包括：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组末端时，将该数组元素置于该初始位置的上一位置。

可选地，所述层级调整指令包括：层级下移指令；以及，所述按照所述层级调整策略调整该数组元素在所述组件数组中的位置具体包括：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组开端时，将该数组元素置于该初始位置的下一位置。

可选地，所述层级调整指令包括：层级置顶指令；以及，所述按照所述层级调整策略调整该数组元素在所述组件数组中的位置具体包括：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组末端时，将该数组元素置于所述组件数组末端。

可选地，所述层级调整指令包括：层级置底指令；以及，所述按照所述层级调整策略调整该数组元素在所述组件数组中的位置具体包括：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组开端时，将该数组元素置于所述组件数组开端。

可选地，所述层级调整指令包括：删除指令；以及，所述按照所述层级调整策略调整该数组元素在所述组件数组中的位置具体包括：将该数组元素从所述组件数组中删除。

可选地，所述层级调整指令包括：复制指令；以及，所述按照所述层级调整策略调整该数组元素在所述组件数组中的位置具体包括：确定该数组元素在所述组件数组中的初始位置；复制该数组元素并重置复制数据中的组件标识，将得到的数据作为组件元素置于所述组件数组中该初始位置的上一位置。

可选地，所述方法进一步包括：接收组件增加指令，根据所述组件增加指令获取组件模板数据；在所述组件模板数据中重置组件标识之后，将其作为组件元素置于所述组件数组末端；以及，渲染所述画布。

可选地，所述画布中每一组件为HTML5网页编辑器中的组件，其定位方式为绝对定位。

为实现上述目的，根据本发明的另一方面，提供了一种组件层级的调整装置。

本发明实施例的组件层级的调整装置包括：标识获取模块，用于从层级调整指令触发的事件中，获取所述层级调整指令针对的画布中组件的标识和层级调整策略；其中，所述组件事先与预先存储的组件数组中含有所述组件的标识的数组元素绑定；层级调整模块，用于按照所述层级调整策略调整该数组元素在所述组件数组中的位置；在调整完毕之后，根据该数组元素在所述组件数组中的当前位置渲染所述画布。

可选地，所述装置进一步包括：配置模块，用于使所述画布中每一组件的堆叠顺序值z-index保持为默认值。

可选地，所述层级调整指令包括：层级上移指令；以及，所述层级调整模块进一步用于：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组末端时，将该数组元素置于该初始位置的上一位置。

可选地，所述层级调整指令包括：层级下移指令；以及，所述层级调整模块进一步用于：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组开端时，将该数组元素置于该初始位置的下一位置。

可选地，所述层级调整指令包括：层级置顶指令；以及，所述层级调整模块进一步用于：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组末端时，将该数组元素置于所述组件数组末端。

可选地，所述层级调整指令包括：层级置底指令；以及，所述层级调整模块进一步用于：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组开端时，将该数组元素置于所述组件数组开端。

可选地，所述层级调整指令包括：删除指令；以及，所述层级调整模块进一步用于：将该数组元素从所述组件数组中删除。

可选地，所述层级调整指令包括：复制指令；以及，所述层级调整模块进一步用于：确定该数组元素在所述组件数组中的初始位置；复制该数组元素并重置复制数据中的组件标识，将得到的数据作为组件元素置于所述组件数组中该初始位置的上一位置。

可选地，所述装置进一步包括：增加指令处理模块，用于接收组件增加指令，根据所述组件增加指令获取组件模板数据；在所述组件模板数据中重置组件标识之后，将其作为组件元素置于所述组件数组末端；以及，渲染所述画布。

可选地，所述画布中每一组件为HTML5网页编辑器中的组件，其定位方式为绝对定位。

为实现上述目的，根据本发明的又一方面，提供了一种电子设备。

本发明的一种电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明所提供的组件层级的调整方法。

为实现上述目的，根据本发明的再一方面，提供了一种计算机可读存储介质。

本发明的一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现本发明所提供的组件层级的调整方法。

根据本发明的技术方案，上述发明中的一个实施例具有如下优点或有益效果：通过预先绑定画布中的组件与组件数组中的元素，将组件层级的调整转换为数组元素的位置移动，从而在不依赖于组件z-index属性的前提下，实现组件层级关系的连续以及每一组件层级的唯一，确保层级相关参数不会超过组件数目，节约组件存储与网络传输成本。

上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。

附图说明

附图用于更好地理解本发明，不构成对本发明的不当限定。其中：

图1是根据本发明实施例中组件层级的调整方法的主要步骤示意图；

图2是根据本发明实施例中组件层级的调整方法的组件与数组元素绑定示意图；

图3是根据本发明实施例中的组件层级的调整装置的组成部分示意图；

图4是根据本发明实施例可以应用于其中的示例性系统架构图；

图5是用来实现本发明实施例中组件层级的调整方法的电子设备的结构示意图。

具体实施方式

以下结合附图对本发明的示范性实施例做出说明，其中包括本发明实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本发明的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

本发明实施例的技术方案通过预先绑定画布中的组件与组件数组中的元素，将组件层级的调整转换为数组元素的位置移动，从而利用数组的自身特性实现组件层级的连续一致，克服了现有技术中组件层级关系混乱、组件存储与网络传输成本较高的缺陷。

需要指出的是，在不冲突的情况下，本发明的实施例以及实施例中的技术特征可以相互结合。

图1是根据本发明实施例的组件层级的调整方法的主要步骤示意图。

如图1所示，本发明实施例的组件层级的调整方法可具体执行以下步骤：

步骤S101：从层级调整指令触发的事件中，获取层级调整指令针对的画布中组件的标识和层级调整策略。

在本步骤中，组件指的是页面中独立的视图模块。特别地，在本发明实施例中，组件可以是超文本标记语言HTML(HyperText Markup Language)5网页编辑器中的文本、图片、表单、电话、音效、计数、统计等组件。组件的层级指的是组件所在图层的堆叠级别，层级越高，组件距离用户越近。画布即页面画布，其为各组件的父容器，作为组件显示以及编辑的场景。

现有技术中，一般通过对组件的堆叠顺序值z-index进行简单加减以实现组件层级的调整。为了克服其组件层级关系混乱、组件存储与网络传输成本较高的缺陷，本发明将组件层级的调整转换为组件数组的元素的位置移动以实现组件层级的灵活调整。为了实现组件与组件数组的关联，在步骤S101之前，首先需要绑定组件与组件数组中的对应数组元素。

其中，组件数组存储于内存中，其每一数组元素均与一组件对应。组件数组中的每一数组元素可为JS(一种直译式脚本语言)对象标记JSON(JavaScript Object Notation)数据，组件数组的结构可如下例所示：[{id:xxx,attr1:a,attr2:b,…},{id:xxxxx,attr1:c,attr2:d,…}…]，其中，每一JSON数据均对应于一组件，JSON数据中的id为其对应的组件的标识。

一般地，绑定指的是使文档对象模型DOM(Document Object Model)元素(如页面画布中的组件)与数据(如组件数组)在内容上保持一致，即使二者双向绑定，无论哪一方发生改变，另一方都会相应地更新为相同的数据。在本发明实施例中，需要在步骤S101之前将组件与预先存储的组件数组中含有组件的标识的数组元素绑定，具体应用中可以通过Vue.js(一种用于构建用户界面的渐进式框架)中的v-for等命令实现上述绑定。

在本步骤中，接收到用户发出的层级调节指令之后，可从层级调整指令触发的HTML事件中得到层级调整指令针对的组件(即欲实施层级调整的组件)的标识，还可得到相应的层级调整策略。其中，层级调节指令可以是点击指令、键盘按键按下指令、鼠标按键按下指令等，上述指令对应的HTML事件为onclick事件、onkeydown事件、onmousedown事件。层级调整策略指的是层级调整指令指示的层级改变的内容。例如：当层级调整指令为层级上移时，层级调整策略即为：将层级调整指令针对的组件的层级向上增加一级。

步骤S102：按照层级调整策略调整该数组元素在组件数组中的位置；在调整完毕之后，根据该数组元素在组件数组中的当前位置渲染画布。

一般地，数组元素在组件数组中的位置可以通过其索引(index)来表示。具体应用中，可通过数组原生方法push、pop、shift、unshift、splice等改变数组元素的位置。在本发明实施例中，可监听数组变化，在确定数组元素发生变化时触发画布渲染，从而显示调整后的组件层级关系。其中，上述渲染指的是通过构建渲染树显示DOM元素(如画布中的组件及其层级)的过程，其可通过执行渲染回调函数实现。

特别地，为了避免组件z-index对层级调整的影响，在本发明实施例中，需使画布中每一组件的z-index保持为默认值。同时，需将画布中每一组件的定位方式设置为绝对定位(absolute)，并将画布的定位方式设置为绝对定位(absolute)、相对定位(relative)或者固定定位(fixed)。

以下介绍在接收到不同的层级调整指令时的策略：

1.层级上移指令

在接收到层级上移指令(该指令指示将组件层级向上调整一级)时，首先从组件数组中确定含有步骤S101获取的组件的标识的数组元素及其初始位置，之后判断其初始位置是否为数组末端：若是，结束操作；否则，将该数组元素摘除，置于该初始位置的上一位置，并根据该数组元素在组件数组中的当前位置渲染画布。

其中，数组末端指的是组件数组最后一位元素所在的位置，处于该位置的数组元素绑定的组件位于画布最上层。类似地，数组开端指的是组件数组第一位元素所在的位置，处于该位置的数组元素绑定的组件位于画布最下层。

2.层级下移指令

在接收到层级下移指令(该指令指示将组件层级向下调整一级)时，首先从组件数组中确定含有步骤S101获取的组件的标识的数组元素及其初始位置，之后判断其初始位置是否为数组开端：若是，结束操作；否则，将该数组元素摘除，置于该初始位置的下一位置，并根据该数组元素在组件数组中的当前位置渲染画布。

3.层级置顶指令

在接收到层级置顶指令(该指令指示将组件层级调整为最高级)时，首先从组件数组中确定含有步骤S101获取的组件的标识的数组元素及其初始位置，之后判断其初始位置是否为数组末端：若是，结束操作；否则，将该数组元素摘除，置于组件数组末端，并根据该数组元素在组件数组中的当前位置渲染画布。其中，可通过检测上述初始位置的索引是否为组件数组长度与1的差值判断初始位置是否为数组末端。

4.层级置底指令

在接收到层级置底指令(该指令指示将组件层级调整为最低级)时，首先从组件数组中确定含有步骤S101获取的组件的标识的数组元素及其初始位置，之后判断其初始位置是否为数组开端：若是，结束操作；否则，将该数组元素摘除，置于组件数组开端，并根据该数组元素在组件数组中的当前位置渲染画布。其中，可通过检测上述初始位置的索引是否为零判断初始位置是否为数组开端。

作为一个优选方案，本发明还可在增加、删除、复制组件时自动维护其层级。具体地：

在接收到删除指令(该指令指示删除某组件)时，将含有组件标识的数组元素从组件数组中删除，之后渲染画布。

在接收到复制指令(该指令指示复制某组件)时，首先确定含有组件标识的数组元素在组件数组中的初始位置，之后复制该数组元素并重置复制数据中的组件标识，将得到的数据作为组件元素置于组件数组中该初始位置的上一位置，最后渲染画布。

在接收到组件增加指令(该指令指示新增组件)时，首先根据组件增加指令获取组件模板数据，并在组件模板数据中重置组件标识。之后，将其作为组件元素置于组件数组末端，最后渲染画布。

通过上述设置，在增加、删除、复制组件时，各组件的层级可自动保持连续一致。

图2是根据本发明实施例中组件层级的调整方法的组件与数组元素绑定示意图。如图2所示，左侧为组件数组及其元素，右侧为页面画布中层叠的各组件，二者之间实现了双向绑定。

在本发明实施例的技术方案中，通过预先绑定画布中的组件与组件数组中的元素，将组件层级的调整转换为数组元素的位置移动，从而利用数组的自身特性实现组件层级的连续一致，克服了现有技术中组件层级关系混乱、组件存储与网络传输成本较高的缺陷。此外，本发明的组件层级调整方法实用性较高，在删除、复制、增加组件时均无需进行层级的额外处理。

图3是本发明实施例的组件层级的调整装置的组成部分示意图。

如图3所示，本发明实施例的组件层级的调整装置300可包括：标识获取模块301和层级调整模块302。其中：

标识获取模块301可用于从层级调整指令触发的事件中，获取所述层级调整指令针对的画布中组件的标识和层级调整策略；其中，所述组件事先与预先存储的组件数组中含有所述组件的标识的数组元素绑定；

层级调整模块302可用于按照所述层级调整策略调整该数组元素在所述组件数组中的位置；在调整完毕之后，根据该数组元素在所述组件数组中的当前位置渲染所述画布。

在本发明实施例中，所述装置300可进一步包括配置模块，其用于使所述画布中每一组件的堆叠顺序值z-index保持为默认值。

较佳地，所述层级调整指令包括层级上移指令；所述层级调整模块302可进一步用于：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组末端时，将该数组元素置于该初始位置的上一位置。

作为一个优选方案，所述层级调整指令包括层级下移指令；所述层级调整模块302可进一步用于：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组开端时，将该数组元素置于该初始位置的下一位置。

实际应用中，所述层级调整指令包括层级置顶指令；所述层级调整模块302可进一步用于：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组末端时，将该数组元素置于所述组件数组末端。

具体应用中，所述层级调整指令包括层级置底指令；所述层级调整模块302可进一步用于：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组开端时，将该数组元素置于所述组件数组开端。

在一个实施例中，所述层级调整指令包括删除指令；所述层级调整模块302可进一步用于：将该数组元素从所述组件数组中删除。

在一可选实现方式中，所述层级调整指令包括复制指令；所述层级调整模块302可进一步用于：确定该数组元素在所述组件数组中的初始位置；复制该数组元素并重置复制数据中的组件标识，将得到的数据作为组件元素置于所述组件数组中该初始位置的上一位置。

具体应用场景中，所述装置300可进一步包括增加指令处理模块，其用于接收组件增加指令，根据所述组件增加指令获取组件模板数据；在所述组件模板数据中重置组件标识之后，将其作为组件元素置于所述组件数组末端并渲染所述画布。

此外，在本发明实施例中，所述画布中每一组件为HTML5网页编辑器中的组件，其定位方式为绝对定位。

根据本发明实施例的技术方案，通过预先绑定画布中的组件与组件数组中的元素，将组件层级的调整转换为数组元素的位置移动，从而利用数组的自身特性实现组件层级的连续一致，克服了现有技术中组件层级关系混乱、组件存储与网络传输成本较高的缺陷。此外，本发明的组件层级调整方法实用性较高，在删除、复制、增加组件时均无需进行层级的额外处理。

图4示出了可以应用本发明实施例的组件层级的调整方法或组件层级的调整装置的示例性系统架构400。

如图4所示，系统架构400可以包括终端设备401、402、403，网络404和服务器405(此架构仅仅是示例，具体架构中包含的组件可以根据申请具体情况调整)。网络404用以在终端设备401、402、403和服务器405之间提供通信链路的介质。网络404可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备401、402、403通过网络404与服务器405交互，以接收或发送消息等。终端设备401、402、403上可以安装有各种通讯客户端应用，例如购物类应用、网页浏览器应用、搜索类应用、即时通信工具、邮箱客户端、社交平台软件等(仅为示例)。

终端设备401、402、403可以是具有显示屏并且支持网页浏览的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携计算机和台式计算机等等。

服务器405可以是提供各种服务的服务器，例如对用户利用终端设备401、402、403所浏览的购物类网站提供支持的后台管理服务器(仅为示例)。后台管理服务器可以对接收到的产品信息查询请求等数据进行分析等处理，并将处理结果(例如目标推送信息、产品信息--仅为示例)反馈给终端设备。

需要说明的是，本发明实施例所提供的组件层级的调整方法一般由服务器405执行，相应地，组件层级的调整装置一般设置于服务器405中。

应该理解，图4中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

本发明还提供了一种电子设备。本发明实施例的电子设备包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现本发明所提供的组件层级的调整方法。

下面参考图5，其示出了适于用来实现本发明实施例的电子设备的计算机系统500的结构示意图。图5示出的电子设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图5所示，计算机系统500包括中央处理单元(CPU)501，其可以根据存储在只读存储器(ROM)502中的程序或者从存储部分508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM503中，还存储有计算机系统500操作所需的各种程序和数据。CPU501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。

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

特别地，根据本发明公开的实施例，上文的主要步骤图描述的过程可以被实现为计算机软件程序。例如，本发明实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行主要步骤图所示的方法的程序代码。在上述实施例中，该计算机程序可以通过通信部分509从网络上被下载和安装，和/或从可拆卸介质511被安装。在该计算机程序被中央处理单元501执行时，执行本发明的系统中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。在本发明中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

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

描述于本发明实施例中所涉及到的模块可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的模块也可以设置在处理器中，例如，可以描述为：一种处理器包括标识获取模块和层级调整模块。其中，这些模块的名称在某种情况下并不构成对该模块本身的限定，例如，标识获取模块还可以被描述为“向层级调整模块发送组件的标识和层级调整策略的模块”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中的。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该设备执行时，使得该设备执行的步骤包括：从层级调整指令触发的事件中，获取所述层级调整指令针对的画布中组件的标识和层级调整策略；其中，所述组件事先与预先存储的组件数组中含有所述组件的标识的数组元素绑定；按照所述层级调整策略调整该数组元素在所述组件数组中的位置；在调整完毕之后，根据该数组元素在所述组件数组中的当前位置渲染所述画布。

在本发明实施例的技术方案中，通过预先绑定画布中的组件与组件数组中的元素，将组件层级的调整转换为数组元素的位置移动，从而利用数组的自身特性实现组件层级的连续一致，克服了现有技术中组件层级关系混乱、组件存储与网络传输成本较高的缺陷。此外，本发明的组件层级调整方法实用性较高，在删除、复制、增加组件时均无需进行层级的额外处理。

上述具体实施方式，并不构成对本发明保护范围的限制。本领域技术人员应该明白的是，取决于设计要求和其他因素，可以发生各种各样的修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等，均应包含在本发明保护范围之内。

Claims (22)

1.一种组件层级的调整方法，其特征在于，包括：

从层级调整指令触发的事件中，获取所述层级调整指令针对的画布中组件的标识和层级调整策略；其中，所述组件事先与预先存储的组件数组中含有所述组件的标识的数组元素绑定；

按照所述层级调整策略调整该数组元素在所述组件数组中的位置；在调整完毕之后，根据该数组元素在所述组件数组中的当前位置渲染所述画布。

2.根据权利要求1所述的方法，其特征在于，所述方法进一步包括：

使所述画布中每一组件的堆叠顺序值z-index保持为默认值。

3.根据权利要求1所述的方法，其特征在于，所述层级调整指令包括：层级上移指令；以及，所述按照所述层级调整策略调整该数组元素在所述组件数组中的位置具体包括：

确定该数组元素在所述组件数组中的初始位置；

在该初始位置不是所述组件数组末端时，将该数组元素置于该初始位置的上一位置。

4.根据权利要求1所述的方法，其特征在于，所述层级调整指令包括：层级下移指令；以及，所述按照所述层级调整策略调整该数组元素在所述组件数组中的位置具体包括：

确定该数组元素在所述组件数组中的初始位置；

在该初始位置不是所述组件数组开端时，将该数组元素置于该初始位置的下一位置。

5.根据权利要求1所述的方法，其特征在于，所述层级调整指令包括：层级置顶指令；以及，所述按照所述层级调整策略调整该数组元素在所述组件数组中的位置具体包括：

确定该数组元素在所述组件数组中的初始位置；

在该初始位置不是所述组件数组末端时，将该数组元素置于所述组件数组末端。

6.根据权利要求1所述的方法，其特征在于，所述层级调整指令包括：层级置底指令；以及，所述按照所述层级调整策略调整该数组元素在所述组件数组中的位置具体包括：

确定该数组元素在所述组件数组中的初始位置；

在该初始位置不是所述组件数组开端时，将该数组元素置于所述组件数组开端。

7.根据权利要求1所述的方法，其特征在于，所述层级调整指令包括：删除指令；以及，

所述按照所述层级调整策略调整该数组元素在所述组件数组中的位置具体包括：将该数组元素从所述组件数组中删除。

8.根据权利要求1所述的方法，其特征在于，所述层级调整指令包括：复制指令；以及，所述按照所述层级调整策略调整该数组元素在所述组件数组中的位置具体包括：

确定该数组元素在所述组件数组中的初始位置；

复制该数组元素并重置复制数据中的组件标识，将得到的数据作为组件元素置于所述组件数组中该初始位置的上一位置。

9.根据权利要求1所述的方法，其特征在于，所述方法进一步包括：

接收组件增加指令，根据所述组件增加指令获取组件模板数据；

在所述组件模板数据中重置组件标识之后，将其作为组件元素置于所述组件数组末端；以及，

渲染所述画布。

10.根据权利要求1-9任一所述的方法，其特征在于，所述画布中每一组件为HTML5网页编辑器中的组件，其定位方式为绝对定位。

11.一种组件层级的调整装置，其特征在于，包括：

标识获取模块，用于从层级调整指令触发的事件中，获取所述层级调整指令针对的画布中组件的标识和层级调整策略；其中，所述组件事先与预先存储的组件数组中含有所述组件的标识的数组元素绑定；

层级调整模块，用于按照所述层级调整策略调整该数组元素在所述组件数组中的位置；在调整完毕之后，根据该数组元素在所述组件数组中的当前位置渲染所述画布。

12.根据权利要求11所述的装置，其特征在于，所述装置进一步包括：

配置模块，用于使所述画布中每一组件的堆叠顺序值z-index保持为默认值。

13.根据权利要求11所述的装置，其特征在于，所述层级调整指令包括：层级上移指令；以及，

所述层级调整模块进一步用于：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组末端时，将该数组元素置于该初始位置的上一位置。

14.根据权利要求11所述的装置，其特征在于，所述层级调整指令包括：层级下移指令；以及，

所述层级调整模块进一步用于：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组开端时，将该数组元素置于该初始位置的下一位置。

15.根据权利要求11所述的装置，其特征在于，所述层级调整指令包括：层级置顶指令；以及，

所述层级调整模块进一步用于：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组末端时，将该数组元素置于所述组件数组末端。

16.根据权利要求11所述的装置，其特征在于，所述层级调整指令包括：层级置底指令；以及，

所述层级调整模块进一步用于：确定该数组元素在所述组件数组中的初始位置；在该初始位置不是所述组件数组开端时，将该数组元素置于所述组件数组开端。

17.根据权利要求11所述的装置，其特征在于，所述层级调整指令包括：删除指令；以及，

所述层级调整模块进一步用于：将该数组元素从所述组件数组中删除。

18.根据权利要求11所述的装置，其特征在于，所述层级调整指令包括：复制指令；以及，

所述层级调整模块进一步用于：确定该数组元素在所述组件数组中的初始位置；复制该数组元素并重置复制数据中的组件标识，将得到的数据作为组件元素置于所述组件数组中该初始位置的上一位置。

19.根据权利要求11所述的装置，其特征在于，所述装置进一步包括：

增加指令处理模块，用于接收组件增加指令，根据所述组件增加指令获取组件模板数据；在所述组件模板数据中重置组件标识之后，将其作为组件元素置于所述组件数组末端；以及，渲染所述画布。

20.根据权利要求11-19任一所述的装置，其特征在于，所述画布中每一组件为HTML5网页编辑器中的组件，其定位方式为绝对定位。

21.一种电子设备，其特征在于，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-10中任一所述的方法。

22.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现如权利要求1-10中任一所述的方法。