CN117668403A - 一种页面设计器及其装置、存储介质、计算设备 - Google Patents

Abstract

本公开的实施方式提供了一种页面设计器，包括：位于底层的容器层，位于中层的iframe内嵌框架层，和位于顶层的操作层；其中，容器层作为父容器，容纳了操作层和所述iframe内嵌框架层；iframe内嵌框架层，用于基于DOM树进行渲染，以生成目标页面；其中，DOM树为用于构建目标页面的数据结构；操作层，覆盖于iframe内嵌框架层上，用于隔绝设计者与iframe内嵌框架层的交互；以及，确定与DOM树存在映射关系的组件树，并基于组件树进行渲染，以生成设计页面。

Description

一种页面设计器及其装置、存储介质、计算设备

技术领域

本公开的实施方式涉及页面设计技术领域，更具体地，本公开的实施方式涉及一种页面设计器及其装置、存储介质、计算设备。

背景技术

本部分旨在为权利要求书中陈述的本公开的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。

页面设计器，是一种用于创建和设计网页、应用程序界面等可视化页面的工具。它通常提供了一组用户界面元素和布局工具，以帮助用户设计和排列网页上的元素，比如文本、图像、表格、按钮等。基于页面设计器，用户可以通过拖拽、放置和设置属性等交互操作来构建页面布局、添加组件和定制样式等，而无需用户深入了解代码编写，降低了页面设计的门槛。

然而，目前的页面设计器通用性较低，只能适用于某个前端组件库下，不能兼容其他的组件库。

发明内容

在本上下文中，本公开的实施方式期望提供一种页面设计器。

在本公开实施方式的第一方面中，提供了一种页面设计器，包括：

位于底层的容器层，位于中层的iframe内嵌框架层，和位于顶层的操作层；其中，

所述容器层作为父容器，容纳了所述操作层和所述iframe内嵌框架层；

所述iframe内嵌框架层，用于基于DOM树进行渲染，以生成目标页面；其中，所述DOM树为用于构建目标页面的数据结构；

所述操作层，覆盖于所述iframe内嵌框架层上，用于隔绝设计者与所述iframe内嵌框架层的交互；以及，确定与所述DOM树存在映射关系的组件树，并基于所述组件树进行渲染，以生成设计页面；

其中，所述页面设计器的组件库提供了若干页面设计元素；所述设计页面用于供设计者进行交互，以在所述目标页面中布局所述页面设计元素；所述组件树用于描述所述页面设计元素在所述目标页面中的编排方式。

在本公开实施方式的第二方面中，提供了一种页面设计器装置，包括：

包含了容器层的容器模块，包含了iframe内嵌框架层的框架模块，以及包含了操作层的操作模块；其中，容器层位于底层，iframe内嵌框架层位于中层，操作层位于顶层；

所述容器层作为父容器，容纳了所述操作层和所述iframe内嵌框架层；

所述iframe内嵌框架层，用于基于DOM树进行渲染，以生成目标页面；其中，所述DOM树为用于构建目标页面的数据结构；

所述操作层，覆盖于所述iframe内嵌框架层上，用于隔绝设计者与所述iframe内嵌框架层的交互；以及，确定与所述DOM树存在映射关系的组件树，并基于所述组件树进行渲染，以生成设计页面；

其中，所述页面设计器的组件库提供了若干页面设计元素；所述设计页面用于供设计者进行交互，以在所述目标页面中布局所述页面设计元素；所述组件树用于描述所述页面设计元素在所述目标页面中的编排方式。

在本公开实施方式的第三方面中，提供了一种存储介质，其上存储有计算机指令，该指令被处理器执行时实现任一项所述的页面设计器。

在本公开实施方式的第四方面中，提供了一种计算设备，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器通过运行所述可执行指令以实现任一项所述的页面设计器。

本公开以上的实施方式，至少具有如下的有益效果：

通过以上技术方案，在iframe内嵌框架层之上，设计处于同一内的操作层来隔绝设计者与iframe内嵌框架层的交互，设计者的交互不再直接对iframe内嵌框架层的DOM树产生影响，而是改变操作层的组件树，并通过组件树与DOM树的映射关系来变更DOM树，从而基于DOM树实现目标页面的渲染，完成页面设计元素在目标页面中的布局和编排。在上述过程中，通过分层设计，由操作层来隔绝设计者与iframe内嵌框架层的交互，使得设计者的交互对iframe内嵌框架层的DOM树不产生直接影响，实现了iframe内嵌框架层中的目标页面和设计器的解耦，提高了可扩展性和通用性，使得设计器可以兼容多种前端组件库。

附图说明

通过参考附图阅读下文的详细描述，本公开示例性实施方式的上述以及其他目的、特征和优点将变得易于理解。在附图中，以示例性而非限制性的方式示出了本公开的若干实施方式，其中：

图1示意性地示出了根据本公开实施方式的一种页面设计器的示意图；

图2示意性地示出了根据本公开实施方式的一种容器层的示意图；

图3示意性地示出了根据本公开实施方式的一种目标页面的示意图；

图4示意性地示出了根据本公开实施方式的一种映射表的创建过程的流程图；

图5示意性地示出了根据本公开实施方式的一种触发拖拽事件的流程图；

图6示意性地示出了根据本公开实施方式的一种拖拽交互的示意图；

图7示意性地示出了根据本公开实施方式的又一种拖拽交互的示意图；

图8示意性地示出了根据本公开实施方式的一种页面设计器装置的框图；

图9示意性地示出了根据本公开实施方式的一种页面设计器介质的示意图；

图10示意性地示出了根据本公开实施方式的一种能够实现上述页面设计器的电子设备的示意图。

在附图中，相同或对应的标号表示相同或对应的部分。

具体实施方式

下面将参考若干示例性实施方式来描述本公开的原理和精神。应当理解，给出这些实施方式仅仅是为了使本领域技术人员能够更好地理解进而实现本公开，而并非以任何方式限制本公开的范围。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

本领域技术人员知道，本公开的实施方式可以实现为一种系统、装置、设备、方法或计算机可读存储介质。因此，本公开可以具体实现为以下形式，即：完全的硬件、完全的软件(包括固件、驻留软件、微代码等)，或者硬件和软件结合的形式。

根据本公开的实施方式，提出了一种页面设计器、装置、介质和计算设备。

在本文中，需要理解的是，附图中的任何元素数量均用于示例而非限制，以及任何命名都仅用于区分，而不具有任何限制含义。并且，本公开所涉及的数据可以为经用户授权或经过各方充分授权的数据。

下面参考本公开的若干代表性实施方式，详细阐释本公开的原理和精神。

应用场景总览

目前，页面设计器中通常可以包括外层的设计器工具，和内层的iframe内嵌框架层，iframe内嵌框架层用于展示设计出的目标页面，iframe内嵌框架层与外部设计器工具存在通信机制，内层可以通过捕获事件来唤起外层设计器工具，设计器工具可以通过调用能够改变内部元素的方法或接口来改变页面结构。

主流的页面设计器包含以下两种：

一种是基于DOM(Document Object Model，文档对象模型)结构的页面设计器，DOM是一种用于表示HTML(HyperText Markup Language，超文本标记语言)或XML(eXtensibleMarkup Language，可扩展标记语言)文档中元素的层次结构的方式，页面设计器可以通过直接操作DOM结构来生成静态的页面。

以GrapeJS(JavaScript)为例，当用户在画布上添加、删除或修改组件时，GrapeJS可以通过调用DOM的接口来实时更新DOM结构，确保用户在画布上所见即所得。

然而，由于GrapeJS是基于原生的DOM的接口，无法与成熟的前端组件库共同使用，因此只能用于编辑静态的HTML网页。

其中，前端组件库是一组已经构建好的可重用的代码块，包含了常见的前端UI(User Interface，用户界面)元素(如按钮、文本框、下拉菜单等)以及与之相应的样式、交互行为和逻辑。

另一种是通过设定一些JSON Schema(JavaScript Object Notation Schema，对象表示法模式)的页面设计器，JSON Schema是一种用于描述和验证JSON数据结构的规范，它定义了一个JSON对象的结构、属性和约束，可以用于确保数据的完整性、准确性和一致性。

JSON Schema可以通过结合前端组件库，控制前端组件进行编排，类似于DOM结构中的子节点，来描述和控制页面生成。

然而，上述两种方式的本质在于通过直接控制底层结构来绘制页面，即通过改变iframe内嵌框架层的结构来完成页面的设计。由于设计器需要通过注入的方式侵入页面的具体元素或组件中，通过事件机制来与具体的控件交互，这就导致了设计器和要设计的目标页面之间无法解耦，降低了可扩展性。当设计者想要使用其他前端组件库时，会由于设计器并不具有通用性而无法兼容。

另外，由于属性注入或事件注入导致目标页面与真实构建出的页面在属性和事件上存在差异，也可能会出现实际页面不一致的情况。

需要注意的是，上述应用场景仅是为了便于理解本公开的精神和原理而示出，本公开的实施方式在此方面不受任何限制。相反，本公开的实施方式可以应用于适用的任何场景。

发明概述

由于目前的设计器结构无法独立于前端组件库存在，需要通过属性注入与事件捕获的方式侵入页面具体元素或组件中，因而存在通用性低，无法适配多种前端组件库的问题。

有鉴于此，本说明书提供一种分层的页面设计器，通过位于iframe内嵌框架层之上的操作层，隔绝设计者与iframe内嵌框架层的交互，并通过操作层中与iframe内嵌框架层中的DOM存在映射关系的组件树来实现交互，从而解耦数据结构和设计器的强绑定的技术方案。

本说明书的核心技术构思在于：

通过设计器的分层设计方案，设计一套能够独立于前端组件库而存在的，不通过属性注入与事件捕获的方式侵入页面具体元素或组件中的，不同于前述直接操作DOM结构或设定JSON Schema来直接控制底层结构以完成页面绘制，而是通过操作层中与iframe内嵌框架层中的DOM存在映射关系的组件树来实现交互，并基于组件树和DOM树分别渲染设计页面和目标页面以完成页面绘制的页面设计器。

通过以上技术方案，在iframe内嵌框架层之上，设计处于同一内的操作层来隔绝设计者与iframe内嵌框架层的交互，设计者的交互不再直接对iframe内嵌框架层的DOM树产生影响，而是改变操作层的组件树，并通过组件树与DOM树的映射关系来变更DOM树，从而基于DOM树实现目标页面的渲染，完成页面设计元素在目标页面中的布局和编排。在上述过程中，通过分层设计，由操作层来隔绝设计者与iframe内嵌框架层的交互，使得设计者的交互对iframe内嵌框架层的DOM树不产生直接影响，实现了iframe内嵌框架层中的目标页面和设计器的解耦，提高了可扩展性和通用性，使得设计器可以兼容多种前端组件库。

在介绍了本公开的基本原理之后，下面具体介绍本公开的各种非限制性实施方式。

示例性方法

下面将通过具体的实施例对本说明书的技术构思进行详细描述。

本公开旨在提供一种分层的页面设计器以解耦数据结构和设计器的强绑定，实现兼容多种前端组件库的技术方案。

在实现时，页面设计器可以包括位于底层的容器层，位于中层的iframe内嵌框架层，和位于顶层的操作层。

上述容器层，可以作为父容器，容纳了所述操作层和所述iframe内嵌框架层。

上述iframe内嵌框架层，可以用于基于DOM树进行渲染，以生成目标页面。

其中，所述DOM树为用于构建目标页面的数据结构。

上述操作层，可以覆盖于所述iframe内嵌框架层上，用于隔绝设计者与所述iframe内嵌框架层的交互；以及，确定与所述DOM树存在映射关系的组件树，并基于所述组件树进行渲染，以生成设计页面。

其中，所述页面设计器的组件库提供了若干页面设计元素；所述设计页面用于供设计者进行交互，以在所述目标页面中布局所述页面设计元素；所述组件树用于描述所述页面设计元素在所述目标页面中的编排方式。

通过以上技术方案，在iframe内嵌框架层之上，设计处于同一内的操作层来隔绝设计者与iframe内嵌框架层的交互，设计者的交互不再直接对iframe内嵌框架层的DOM树产生影响，而是改变操作层的组件树，并通过组件树与DOM树的映射关系来变更DOM树，从而基于DOM树实现目标页面的渲染，完成页面设计元素在目标页面中的布局和编排。在上述过程中，通过分层设计，由操作层来隔绝设计者与iframe内嵌框架层的交互，使得设计者的交互对iframe内嵌框架层的DOM树不产生直接影响，实现了iframe内嵌框架层中的目标页面和设计器的解耦，提高了可扩展性和通用性，使得设计器可以兼容多种前端组件库。

请参见图1，图1是一示例性实施例提供的一种页面设计器的示意图。如图1所示，页面设计器可以包括：

容器层101，iframe内嵌框架层102，以及操作层103。

其中，如图1所示，容器层101位于底层，iframe内嵌框架层102位于中层，操作层103位于顶层。

上述容器层101可以作为父容器，容器层101中可以容纳操作层103和iframe内嵌框架层102。

以图2为例，图2是一示例性实施例提供的一种容器层的示意图。如图2所示，容器层101内部的灰色区域代表iframe内嵌框架层102，以及覆盖于其上的操作层103。

上述iframe内嵌框架层102，可以用于基于DOM树进行渲染，以生成目标页面；其中，所述DOM树为用于构建目标页面的数据结构。

需要说明的是，上述DOM树是一种用于表示网页文档中元素的层次结构的方式，可以用来构建目标页面的数据结构，通过DOM树中所表示的数据结构，按照相应的渲染方式对DOM树进行渲染，以生成目标页面。

例如，iframe内嵌框架层102，可以基于DOM树中包含的节点对应的内容，以及节点之间的层级关系，来渲染目标界面。比如，当目标页面中有一个图片的颜色发生改变时，DOM树中的与该图片对应的节点的内容也会发生改变，可以基于改变后的DOM树重新渲染，生成新的目标页面，实现页面内容的更新和样式的改变。

上述操作层103，可以覆盖于所述iframe内嵌框架层102上，可以用于隔绝设计者与所述iframe内嵌框架层102的交互；以及，可以确定与所述DOM树存在映射关系的组件树，并基于所述组件树进行渲染，以生成设计页面。

其中，所述页面设计器的组件库提供了若干页面设计元素；所述设计页面用于供设计者进行交互，以在所述目标页面中布局所述页面设计元素；所述组件树用于描述所述页面设计元素在所述目标页面中的编排方式。

需要说明的是，设计页面可以帮助设计者设计和排列网页上的各种元素，比如文本、图像、表格、按钮等。而由于本公开中为了实现设计者和iframe内嵌框架层102之间交互的隔离，引入了操作层103，因此，可以由操作层103提供用于供设计者进行交互的设计页面。

举例来说，为了展示iframe内嵌框架层102的目标页面，操作层103可以通过与iframe内嵌框架层102的DOM存在映射关系的组件树，来描述页面设计元素在目标页面中的编排方式。

继续举例，设计者可以通过设计页面，与组件库提供的若干页面设计元素进行交互，从而变更设计页面对应的组件树，再基于变更的组件树进行重新渲染，得到最新的设计页面反馈给设计者。相应的，由于组件树和DOM存在映射关系，DOM也会相应的发生改变，通过基于改变后的DOM树重新渲染，可以得到新的目标页面，实现以在目标页面中布局页面设计元素。

在示出的一种实施方式中，上述容器层101，可以用于基于CSS的transform属性控制所述操作层103的平移和缩放，以及控制所述iframe内嵌框架层102的平移和缩放；所述操作层103和所述iframe内嵌框架层102完全重合。

以图2为例，假设灰色区域内操作层103的坐标为P(x，y)，则其与容器层101对应的坐标P’(x’，y’)存在如下关系：

其中，px、py为P(x，y)相对于P’(x’，y’)平移的距离，scale为操作层103的缩放参数，如图2所示，如果缩放比例越大，则灰色区域面积越小。

在一个例子中，当得到容器层101的坐标P’之后，可以通过上述公式求得操作层103的坐标P，而由于操作层103和iframe内嵌框架层102完全重合，因此坐标P也是P点在iframe内嵌框架层102中的坐标。

在示出的一种实施方式中，所述渲染生成的设计页面，包含了实例化的块对象；所述块对象与所述目标页面的数据结构中的DOM节点对应，所述实例化的块对象用于描述所述DOM节点包含的DOM元素在所述目标页面中所占据的空间。

以图3为例，图3是一示例性实施例提供的一种目标页面的示意图。如图3所示，假设目标页面的DOM树包含了10个DOM节点，节点0为根节点，是节点1的父节点；节点1为界面元素，是节点2、节点3和节点4的父节点；节点2为列表元素，是节点5、节点8和节点9的父节点；节点3为列表元素，是节点6的父节点；节点4为列表元素，是节点7的父节点。其中，节点5、节点8和节点9分别对应了元素“aaa”、“atata”和“tsaa”；节点6和节点7分别对应了元素“bbb”和“ccc”。

继续举例，由于图3中包含了10个DOM节点，而块对象与DOM节点对应，因此块对象的数量也为10个，并且渲染生成的设计页面中，可以包含了实例化的块对象，这些实例化的块对象用于描述DOM节点包含的DOM元素在目标页面中所占据的空间，比如DOM节点5包含的文本元素“aaa”在图3中所占据的空间。

通过块对象来表示DOM节点，并通过实例化块对象，可以使目标页面的数据结构中的DOM节点在设计页面中进行可视化的呈现，便于设计者进行设计。

在示出的一种实施方式中，所述操作层103，还可以用于创建包含有所述映射关系的映射表。其中，所述映射表的创建过程包括：

所述操作层103遍历组件树中的组件节点，针对任一组件节点，确定所述DOM树中是否存在与所述组件节点对应的DOM节点；

如果存在，确定所述DOM节点包含的DOM元素，并创建与所述DOM元素对应的块对象；

将所述组件节点、与所述组件节点对应的DOM节点，以及基于所述DOM节点包含的DOM元素创建的块对象，以键值对形式存入映射表中；

其中，所述映射表中的键为所述组件节点，所述映射表中的值为与所述组件节点对应的DOM节点，以及基于所述DOM节点包含的DOM元素创建的块对象。

请参见图4，图4是一示例性实施例提供的一种映射表的创建过程的流程图。如图4所示，包括以下步骤：

S410，操作层103遍历组件树中的组件节点，针对任一组件节点，确定所述DOM树中是否存在与所述组件节点对应的DOM节点。

举例来说，操作层103可以通过遍历操作层对应的组件树，确定组件树中存在的组件节点，并且，针对其中任一组件节点，可以进一步确定iframe内嵌框架层102对应的DOM树中是否存在与该组件节点对应的DOM节点。

S420，如果存在，确定所述DOM节点包含的DOM元素，并创建与所述DOM元素对应的块对象。

例如，假设S410中确定出与组件节点P3对应的DOM节点D5，那么可以确定DOM节点D5包含的DOM元素，并基于该DOM元素，创建相应的块对象。

S430，将所述组件节点、与所述组件节点对应的DOM节点，以及基于所述DOM节点包含的DOM元素创建的块对象，以键值对形式存入映射表中；

其中，所述映射表中的键为所述组件节点，所述映射表中的值为与所述组件节点对应的DOM节点，以及基于所述DOM节点包含的DOM元素创建的块对象。

继续举例，可以将组件节点P3、相应的DOM节点D5，以及DOM节点D5包含的DOM元素创建的块对象，以键值对形式存入映射表中。该映射表的键可以为组件节点P3，而相应的值可以为DOM节点D5，以及DOM节点D5包含的DOM元素创建的块对象。

在示出的一种实施方式中，所述设计页面为透明页面，所述DOM节点包含的DOM元素在所述目标页面中所占据的空间的边界用虚线表示。

在一个例子中，为了便于设计者观察iframe内嵌框架层102中的目标页面，可以将位于iframe内嵌框架层102上层的操作层103中的设计页面配置为透明页面。并且，为了便于感知实例化的块对象，达到可视化的效果，可以将DOM节点包含的DOM元素在目标页面中所占据的空间的边界用虚线表示。

以图3为例，节点2包含的DOM元素为文本“aaa”、“atata”和“tsaa”，可以用虚线表示其占据的空间的边界，构成虚线框K3；而节点5包含的DOM元素为文本“aaa”，可以用虚线表示其占据的空间的边界，构成虚线框K6。

在示出的一种实施方式中，所述操作层103，还可以用于根据与所述块对象对应的所述DOM元素在所述目标页面中的位置和大小，确定所述实例化的块对象在所述设计页面中的位置和大小；以及，确定所述设计页面中针对不同实例化的块对象进行渲染的渲染顺序。

以图3为例，操作层103，可以根据图3中的各个DOM元素在目标页面中的位置和大小，确定实例化的块对象，比如图3中的虚线框在设计页面中的位置和大小，图3中的虚线框包括K1-K10(图中未全部示出)。

其中，在确定针对不同实例化的块对象进行渲染的渲染顺序时，可以按照数据的结构广度优先遍历决定，比如按照元素从外层到内层的顺序来决定虚线框的渲染先后顺序。

在示出的一种实施方式中，所述块对象内部署有第一观察器，以及第二观察器；其中，

所述第一观察器，用于监视DOM树的变化，并在所述DOM树发生变化时，触发第一回调函数，重新创建所述块对象；

所述第二观察器，用于监视DOM元素的大小的变化，并在所述DOM元素的大小发生变化时，触发第二回调函数，更新所述DOM元素对应的块对象的位置和大小。

举例来说，上述第一观察器可以是MutataionObserver(变动观察器)，可以用于监视DOM树的变化，并在DOM树发生变化时进行响应，触发第一回调函数，重新创建变化后的DOM节点对应的块对象。

上述第二观察器可以是ResizeObserver(尺寸观察器)，可以用于监视DOM元素的大小的变化，并在所述DOM元素的大小发生变化时，进行响应，触发二回调函数，更新变化后的DOM元素对应的块对象的位置和大小。

通过上述基于Web接口的观察器，可以及时观察到DOM树中的变化，并针对这些变化做出相应的反应，达到自适应调整设计页面的效果。

在示出的一种实施方式中，所述容器层101，还用于响应于所述设计者针对所述页面设计元素的拖拽交互，触发拖拽事件。

以图3为例，虽然设计者不能直接和目标页面进行交互，但可以通过拖拽设计页面中的页面设计元素来实现交互，其中容器层101，可以用于对设计者的拖拽交互进行响应，触发拖拽事件。

在示出的一种实施方式中，所述拖拽事件包括拖拽开始事件和拖拽结束事件；所述响应于所述设计者针对所述页面设计元素的拖拽交互，触发拖拽事件，包括：

响应于所述设计者针对所述页面设计元素的拖拽交互，触发拖拽开始事件，确定所述设计者拖拽的目标元素；

响应于所述设计者拖拽结束，触发拖拽结束事件，确定拖拽结束时所述目标元素的释放位置在容器层中的第一坐标；

根据操作层在所述容器层中的相对位置，对所述第一坐标进行坐标转换，确定所述释放位置在所述操作层中的第二坐标。

以图5为例，图5是一示例性实施例提供的一种触发拖拽事件的流程图。如图5所示，包括以下步骤：

S510，响应于所述设计者针对所述页面设计元素的拖拽交互，触发拖拽开始事件，确定所述设计者拖拽的目标元素。

例如，容器层101可以响应于设计者针对页面设计元素的拖拽交互(比如长按鼠标左键拖动、手指长按拖动等)，触发拖拽开始事件，确定设计者当前拖拽的目标元素。

S520，响应于所述设计者拖拽结束，触发拖拽结束事件，确定拖拽结束时所述目标元素的释放位置在容器层中的第一坐标。

例如，容器层101可以响应于设计者拖拽结束(比如释放鼠标左键、松开手指等)，触发拖拽结束事件，确定拖拽结束时目标元素的释放位置在容器层中的第一坐标。

S530，根据操作层在所述容器层中的相对位置，对所述第一坐标进行坐标转换，确定所述释放位置在所述操作层中的第二坐标。

例如，容器层101可以根据操作层103在容器层101中的相对位置，对第一坐标进行坐标转换，转换公式可以参见前述示例的公式1，确定出释放位置在操作层103中的第二坐标。

在示出的一种实施方式中，所述操作层103，还用于根据所述第二坐标确定所述释放位置是否位于任一块对象内部，以及响应于所述释放位置位于块对象内部，将容纳所述释放位置的块对象确定为目标块对象。

举例来说，容器层101可以将第二坐标传递给操作层103，操作层103可以根据第二坐标确定释放位置是否位于任一块对象内部，以及响应于释放位置位于块对象内部，将容纳释放位置的块对象确定为目标块对象。

在示出的一种实施方式中，操作层103，可以响应于所述第二坐标，处于所述设计页面中的任一块对象的坐标范围内，确定所述释放位置位于任一块对象内部；响应于所述释放位置位于块对象内部，将容纳所述释放位置的块对象确定为目标块对象。

请参见图6，图6是一示例性实施例提供的一种拖拽交互的示意图。如图6所示，设计者想要改变文本“atata”的位置，那么设计者可以通过和设计界面中实例化的块对象，即虚线框K7的拖拽交互来实现。从设计者角度来看，只需要将虚线框K7拖拽至虚线框K4范围内即可完成。而从设计器的角度来看，则是由操作层103确定设计者拖拽的目标元素对应的释放位置的第二坐标，位于块对象内部，并且响应于释放位置位于块对象内部，将可以容纳释放位置的块对象确定为目标块对象。也就是将虚线框K4对应的块对象确定为目标块对象。

在示出的一种实施方式中，所述操作层103，还用于确定所述目标元素在所述目标块对象中的排列顺序，并根据所述排列顺序更新所述组件树中组件节点的顺序，通过基于更新后的组件树重新渲染，以生成拖拽后的设计页面。

如图6所示，操作层103，可以确定目标元素在目标块对象中的排列顺序在“bbb”对应的块对象之后，因此，可以根据排列顺序更新所述组件树中组件节点的顺序，通过基于更新后的组件树重新渲染，以生成拖拽后的设计页面。如图6所示，重新生成的设计页面中，实例化的块对象的位置发生了改变。

在示出的一种实施方式中，所述操作层103，还用于根据所述组件树确定所述目标块对象允许插入的元素类型中，是否包含所述目标元素的元素类型；如果包含，确定所述目标元素的数据结构被所述目标块对象的数据结构所接受，允许所述目标元素插入至所述目标块对象。

例如，操作层103，可以根据组件树确定目标块对象允许插入的元素类型中，是否包含目标元素的元素类型(比如图片、按钮、文本等)。如果包含，则确定目标元素的数据结构被目标块对象的数据结构所接受，允许目标元素插入至目标块对象。

在示出的一种实施方式中，所述iframe内嵌框架层102，还用于基于组件树与所述DOM树的映射关系，对所述DOM树进行更新，并基于更新后的DOM树进行重新渲染，以生成拖拽后的目标页面。

如图6所示，基于更新后的组件树重新渲染，生成的是新的设计页面，但目标页面还没有改变，需要由iframe内嵌框架层102，基于组件树与DOM树的映射关系，对DOM树进行更新，并基于更新后的DOM树进行重新渲染，以生成拖拽后的目标页面。如图6所示，重新生成的目标页面中，文本元素“atata”出现在了拖拽后的位置。

在示出的一种实施方式中，所述设计页面中以第一颜色对目标块对象进行显示，并以第二颜色对所述目标元素的释放位置进行显示，其中，所述第一颜色与所述第二颜色不相同。

例如，为了提高体验，便于设计者进行区分，可以在设计页面中以第一颜色对目标块对象进行显示，并以第二颜色对目标元素的释放位置进行显示，其中，第一颜色与第二颜色可以不相同。

在示出的一种实施方式中，所述操作层103，还用于响应于所述释放位置与任一块对象的边界相交，根据所述组件树确定出与所述释放位置相交的块对象对应的组件节点的父节点，将与所述父节点对应的块对象确定为目标块对象。

请参见图7，图7是一示例性实施例提供的又一种拖拽交互的示意图。如图7所示，设计者拖拽虚线框K7时的释放位置为其他虚线框的边界，此时，操作层103可以响应于释放位置与任一块对象的边界相交，根据组件树确定出与释放位置相交的块对象对应的组件节点的父节点，根据前述示例可知，图7中的父节点为节点1，因此，可以将节点1对应的块对象确定为目标块对象。

如前所述，操作层103，可以基于更新后的组件树重新渲染，以生成拖拽后的设计页面。iframe内嵌框架层102，可以基于组件树与DOM树的映射关系，对DOM树进行更新，并基于更新后的DOM树进行重新渲染，以生成拖拽后的目标页面。如图7所示，重新生成的设计页面中，实例化的块对象的位置发生了改变，而重新生成的目标页面中，文本元素“atata”出现在了拖拽后的位置。

通过以上技术方案，在iframe内嵌框架层之上，设计处于同一内的操作层来隔绝设计者与iframe内嵌框架层的交互，设计者的交互不再直接对iframe内嵌框架层的DOM树产生影响，而是改变操作层的组件树，并通过组件树与DOM树的映射关系来变更DOM树，从而基于DOM树实现目标页面的渲染，完成页面设计元素在目标页面中的布局和编排。在上述过程中，通过分层设计，由操作层来隔绝设计者与iframe内嵌框架层的交互，使得设计者的交互对iframe内嵌框架层的DOM树不产生直接影响，实现了iframe内嵌框架层中的目标页面和设计器的解耦，提高了可扩展性和通用性，使得设计器可以兼容多种前端组件库。

示例性装置

在介绍了本公开示例性实施方式的页面设计器之后，接下来，请参见图8，图8是一示例性实施例提供的一种页面设计器装置的框图。

下述装置中各个模块的功能和作用的实现过程具体详见上述页面设计器中对应的实现过程，在此不再赘述。对于装置实施例而言，由于其基本对应于页面设计器实施例，所以相关之处参见页面设计器实施例的部分说明即可。

如图8所示，页面设计器装置800，可以包括：

包含了容器层的容器模块801，包含了iframe内嵌框架层的框架模块802，以及包含了操作层的操作模块803；其中，容器层位于底层，iframe内嵌框架层位于中层，操作层位于顶层；

所述容器层作为父容器，容纳了所述操作层和所述iframe内嵌框架层；

所述iframe内嵌框架层，用于基于DOM树进行渲染，以生成目标页面；其中，所述DOM树为用于构建目标页面的数据结构；

所述操作层，覆盖于所述iframe内嵌框架层上，用于隔绝设计者与所述iframe内嵌框架层的交互；以及，确定与所述DOM树存在映射关系的组件树，并基于所述组件树进行渲染，以生成设计页面；

其中，所述页面设计器的组件库提供了若干页面设计元素；所述设计页面用于供设计者进行交互，以在所述目标页面中布局所述页面设计元素；所述组件树用于描述所述页面设计元素在所述目标页面中的编排方式。

可选的，所述容器层，用于基于CSS的transform属性控制所述操作层的平移和缩放，以及控制所述iframe内嵌框架层的平移和缩放；所述操作层和所述iframe内嵌框架层完全重合。

可选的，所述渲染生成的设计页面，包含了实例化的块对象；所述块对象与所述目标页面的数据结构中的DOM节点对应，所述实例化的块对象用于描述所述DOM节点包含的DOM元素在所述目标页面中所占据的空间。

可选的，所述操作层，还用于创建包含有所述映射关系的映射表；

进一步的，所述操作模块803，用于：

所述操作层遍历组件树中的组件节点，针对任一组件节点，确定所述DOM树中是否存在与所述组件节点对应的DOM节点；

如果存在，确定所述DOM节点包含的DOM元素，并创建与所述DOM元素对应的块对象；

将所述组件节点、与所述组件节点对应的DOM节点，以及基于所述DOM节点包含的DOM元素创建的块对象，以键值对形式存入映射表中；

其中，所述映射表中的键为所述组件节点，所述映射表中的值为与所述组件节点对应的DOM节点，以及基于所述DOM节点包含的DOM元素创建的块对象。

可选的，所述设计页面为透明页面，所述DOM节点包含的DOM元素在所述目标页面中所占据的空间的边界用虚线表示。

可选的，所述操作层，还用于根据与所述块对象对应的所述DOM元素在所述目标页面中的位置和大小，确定所述实例化的块对象在所述设计页面中的位置和大小；以及，确定所述设计页面中针对不同实例化的块对象进行渲染的渲染顺序。

可选的，所述块对象内部署有第一观察器，以及第二观察器；其中，

所述第一观察器，用于监视DOM树的变化，并在所述DOM树发生变化时，触发第一回调函数，重新创建所述块对象；

所述第二观察器，用于监视DOM元素的大小的变化，并在所述DOM元素的大小发生变化时，触发第二回调函数，更新所述DOM元素对应的块对象的位置和大小。

可选的，所述容器层，还用于响应于所述设计者针对所述页面设计元素的拖拽交互，触发拖拽事件。

可选的，所述拖拽事件包括拖拽开始事件和拖拽结束事件；

进一步的，所述容器模块801，用于：

响应于所述设计者针对所述页面设计元素的拖拽交互，触发拖拽开始事件，确定所述设计者拖拽的目标元素；

响应于所述设计者拖拽结束，触发拖拽结束事件，确定拖拽结束时所述目标元素的释放位置在容器层中的第一坐标；

根据操作层在所述容器层中的相对位置，对所述第一坐标进行坐标转换，确定所述释放位置在所述操作层中的第二坐标。

可选的，所述操作层，还用于根据所述第二坐标确定所述释放位置是否位于任一块对象内部，以及响应于所述释放位置位于块对象内部，将容纳所述释放位置的块对象确定为目标块对象。

可选的，所述操作层，还用于响应于所述释放位置与任一块对象的边界相交，根据所述组件树确定出与所述释放位置相交的块对象对应的组件节点的父节点，将与所述父节点对应的块对象确定为目标块对象。

可选的，所述操作层，还用于确定所述目标元素在所述目标块对象中的排列顺序，并根据所述排列顺序更新所述组件树中组件节点的顺序，通过基于更新后的组件树重新渲染，以生成拖拽后的设计页面。

可选的，所述操作层，还用于根据所述组件树确定所述目标块对象允许插入的元素类型中，是否包含所述目标元素的元素类型；如果包含，确定所述目标元素的数据结构被所述目标块对象的数据结构所接受，允许所述目标元素插入至所述目标块对象。

可选的，所述iframe内嵌框架层，还用于基于组件树与所述DOM树的映射关系，对所述DOM树进行更新，并基于更新后的DOM树进行重新渲染，以生成拖拽后的目标页面。

可选的，所述设计页面中以第一颜色对目标块对象进行显示，并以第二颜色对所述目标元素的释放位置进行显示，其中，所述第一颜色与所述第二颜色不相同。

可选的，所述操作模块803，用于：

响应于所述第二坐标，处于所述设计页面中的任一块对象的坐标范围内，确定所述释放位置位于任一块对象内部；

响应于所述释放位置位于块对象内部，将容纳所述释放位置的块对象确定为目标块对象。

上述页面设计器装置800的各个模块的具体细节已经在之前描述页面设计器中进行了详细的描述，因此，此处不再赘述。

应当注意，尽管在上文详细描述中提及页面设计器装置800的若干模块或者单元，但是这种划分并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多模块或者单元的特征和功能可以在一个模块或者单元中具体化。反之，上文描述的一个模块或者单元的特征和功能可以进一步划分为由多个模块或者单元来具体化。

示例性介质

在介绍了本公开示例性实施方式的装置之后，接下来，请参见图9，图9是一示例性实施例提供的一种页面设计器介质的示意图。

在本公开的示例性实施例中，还提供了一种计算机可读存储介质，其上存储有能够实现本说明书上述页面设计器的程序产品。在一些可能的实施例中，本公开的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上运行时，所述程序代码用于使所述终端设备执行本说明书上述“页面设计器”部分中描述的根据本公开各种示例性实施例的步骤。

参考图9所示，描述了根据本公开的实施例的用于实现上述页面设计器的可读存储介质900，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上运行。然而，本公开的可读存储介质不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读信号介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。

可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本公开操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

示例性计算设备

请参见图10，图10是一示例性实施例提供的一种能够实现上述页面设计器的电子设备的示意图。

下面参照图10来描述根据本公开的这种实施例的电子设备1000。图10显示的电子设备1000仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图10所示，电子设备1000以通用计算设备的形式表现。电子设备1000的组件可以包括但不限于：上述至少一个处理单元1001、上述至少一个存储单元1002、连接不同系统组件(包括存储单元1002和处理单元1001)的总线1003。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元1001执行，使得所述处理单元1001执行本说明书上述各种实施例的步骤。

存储单元1002可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)10021和/或高速缓存存储单元10022，还可以进一步包括只读存储单元(ROM)10023。

存储单元1002还可以包括具有一组(至少一个)程序模块10025的程序/使用工具10024，这样的程序模块10025包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包含网络环境的现实。

总线1003可以包括控制总线、地址总线和数据总线。

电子设备1000也可以与一个或多个外部设备1004(例如键盘、指向设备、蓝牙设备等)通信。这种通信可以通过输入/输出(I/O)接口1005进行。并且，电子设备1000还可以通过网络适配器1006与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器1006通过总线1003与电子设备1000的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备1000使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

通过以上的实施例的描述，本领域的技术人员易于理解，这里描述的示例实施例可以通过软件实现，也可以通过软件结合必要的硬件的方式来实现。因此，根据本公开实施例的技术方案可以以软件产品的形式体现出来，该软件产品可以存储在一个非易失性存储介质(可以是CD-ROM，U盘，移动硬盘等)中或网络上，包括若干指令以使得一台计算设备(可以是个人计算机、服务器、终端装置、或者网络设备等)执行根据本公开实施例的方法。

应当注意，尽管在上文详细描述中提及了装置的若干单元/模块或子单元/子模块，但是这种划分仅仅是示例性的并非强制性的。实际上，根据本公开的实施方式，上文描述的两个或更多单元/模块的特征和功能可以在一个单元/模块中具体化。反之，上文描述的一个单元/模块的特征和功能可以进一步划分为由多个单元/模块来具体化。

此外，尽管在附图中以特定顺序描述了本公开方法的操作，但是，这并非要求或者暗示必须按照该特定顺序来执行这些操作，或是必须执行全部所示的操作才能实现期望的结果。附加地或备选地，可以省略某些步骤，将多个步骤合并为一个步骤执行，和/或将一个步骤分解为多个步骤执行。

虽然已经参考若干具体实施方式描述了本公开的精神和原理，但是应该理解，本公开并不限于所公开的具体实施方式，对各方面的划分也不意味着这些方面中的特征不能组合以进行受益，这种划分仅是为了表述的方便。本公开旨在涵盖所附权利要求的精神和范围内所包括的各种修改和等同布置。

Claims (10)

1.一种页面设计器，包括：

位于底层的容器层，位于中层的iframe内嵌框架层，和位于顶层的操作层；其中，

所述容器层作为父容器，容纳了所述操作层和所述iframe内嵌框架层；

所述iframe内嵌框架层，用于基于DOM树进行渲染，以生成目标页面；其中，所述DOM树为用于构建目标页面的数据结构；

所述操作层，覆盖于所述iframe内嵌框架层上，用于隔绝设计者与所述iframe内嵌框架层的交互；以及，确定与所述DOM树存在映射关系的组件树，并基于所述组件树进行渲染，以生成设计页面；

其中，所述页面设计器的组件库提供了若干页面设计元素；所述设计页面用于供设计者进行交互，以在所述目标页面中布局所述页面设计元素；所述组件树用于描述所述页面设计元素在所述目标页面中的编排方式。

2.根据权利要求1所述的页面设计器，所述容器层，用于基于CSS的transform属性控制所述操作层的平移和缩放，以及控制所述iframe内嵌框架层的平移和缩放；所述操作层和所述iframe内嵌框架层完全重合。

3.根据权利要求1所述的设计器，所述渲染生成的设计页面，包含了实例化的块对象；所述块对象与所述目标页面的数据结构中的DOM节点对应，所述实例化的块对象用于描述所述DOM节点包含的DOM元素在所述目标页面中所占据的空间。

4.根据权利要求3所述的页面设计器，所述操作层，还用于创建包含有所述映射关系的映射表；其中，所述映射表的创建过程包括：

所述操作层遍历组件树中的组件节点，针对任一组件节点，确定所述DOM树中是否存在与所述组件节点对应的DOM节点；

如果存在，确定所述DOM节点包含的DOM元素，并创建与所述DOM元素对应的块对象；

将所述组件节点、与所述组件节点对应的DOM节点，以及基于所述DOM节点包含的DOM元素创建的块对象，以键值对形式存入映射表中；

其中，所述映射表中的键为所述组件节点，所述映射表中的值为与所述组件节点对应的DOM节点，以及基于所述DOM节点包含的DOM元素创建的块对象。

5.根据权利要求1所述的页面设计器，所述容器层，还用于响应于所述设计者针对所述页面设计元素的拖拽交互，触发拖拽事件。

6.根据权利要求5所述的页面设计器，所述拖拽事件包括拖拽开始事件和拖拽结束事件；

所述响应于所述设计者针对所述页面设计元素的拖拽交互，触发拖拽事件，包括：

响应于所述设计者针对所述页面设计元素的拖拽交互，触发拖拽开始事件，确定所述设计者拖拽的目标元素；

响应于所述设计者拖拽结束，触发拖拽结束事件，确定拖拽结束时所述目标元素的释放位置在容器层中的第一坐标；

根据操作层在所述容器层中的相对位置，对所述第一坐标进行坐标转换，确定所述释放位置在所述操作层中的第二坐标。

7.根据权利要求6所述的页面设计器，所述操作层，还用于根据所述第二坐标确定所述释放位置是否位于任一块对象内部，以及响应于所述释放位置位于块对象内部，将容纳所述释放位置的块对象确定为目标块对象。

8.一种页面设计器装置，所述装置包括：

包含了容器层的容器模块，包含了iframe内嵌框架层的框架模块，以及包含了操作层的操作模块；其中，容器层位于底层，iframe内嵌框架层位于中层，操作层位于顶层；

所述容器层作为父容器，容纳了所述操作层和所述iframe内嵌框架层；

所述iframe内嵌框架层，用于基于DOM树进行渲染，以生成目标页面；其中，所述DOM树为用于构建目标页面的数据结构；

所述操作层，覆盖于所述iframe内嵌框架层上，用于隔绝设计者与所述iframe内嵌框架层的交互；以及，确定与所述DOM树存在映射关系的组件树，并基于所述组件树进行渲染，以生成设计页面；

其中，所述页面设计器的组件库提供了若干页面设计元素；所述设计页面用于供设计者进行交互，以在所述目标页面中布局所述页面设计元素；所述组件树用于描述所述页面设计元素在所述目标页面中的编排方式。

9.一种存储介质，其上存储有计算机指令，该指令被处理器执行时实现如权利要求1-7中任一项所述的页面设计器。

10.一种计算设备，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器通过运行所述可执行指令以实现如权利要求1-7中任一项所述的页面设计器。