CN105094755A - 用于呈现web页面中的web元素的方法和装置 - Google Patents

Abstract

本发明的各实施方式提供了用于呈现web页面中的web元素的方法和装置。在本发明的一个实施方式中，提供了一种用于在编辑web页面期间在集成开发环境中呈现web页面中的web元素的方法，包括：从web页面的代码中提取指向web元素的引用地址；响应于引用地址指示web元素为嵌入式web元素，使用引用地址获取web元素；将获取的web元素添加至资源池；以及响应于web元素存在于资源池中，在web页面中呈现web元素。在本发明的一个实施方式中，提供了一种用于在编辑web页面期间在集成开发环境中呈现web页面中的web元素的装置。采用本发明的方法和装置，可以在编辑web页面期间动态并且实时地显示开发人员正在编辑的web页面，进而提高开发人员的工作效率。

Description

用于呈现web页面中的web元素的方法和装置

技术领域

本发明的各个实施方式涉及生成web页面，更具体地，涉及在本地安装的集成开发环境(IntegratedDevelopmentEnvironment，IDE)中，用于在编辑web页面期间呈现(render)web页面中的web元素的方法和装置。

背景技术

随着计算机技术和互联网技术的发展，在互联网中已经出现了大量web站点，并且目前已经开发出各种web站点编辑器，来用于辅助开发人员生成web站点。例如，开发人员可以使用这些编辑器来生成web站点的层次结构、设计web页面的布局、并且向web页面中加入各种web元素(例如，文本、图像、JavaScript、层叠样式表(CascadingStyleSheets，CSS)，等等)。

在开发web站点期间，开发人员期望能够实时地预览正在被编辑的web页面的外观，以便能够随时调整web页面的布局进而提高工作效率。然而，尽管现有的web站点编辑器可以实时地显示出web页面中的某些web元素，然而显示的效率并不令人满意，尤其是对于大的层叠样式表而言有可能存在较大延迟；此外，由于某些类型的web元素的引用地址是在访问过程中动态地生成的，在开发人员编辑web页面的时候并不能确定指向web元素的物理位置的真实地址，因而在编辑web页面期间不能显示某些类型的web元素。

因而，在本地安装集成开发环境中，如何在编辑web页面期间动态并且实时地显示开发人员正在编辑的web页面，进而提升编辑器呈现web页面的能力，成为目前一个亟待解决的问题。

发明内容

因而，期望能够开发一种能够在编辑web页面期间动态并且实时地显示开发人员正在编辑的web页面的技术方案，并且期望该技术方案可以在尽量不改变现有的编辑器的架构的情况下，以低的延迟来显示web页面中全部类型的web元素，进而提高开发人员的工作效率。

根据本发明的一个方面，提供了一种用于在编辑web页面期间在集成开发环境中呈现web页面中的web元素的方法，该方法包括：从web页面的代码中提取指向web元素的引用地址；响应于引用地址指示web元素为嵌入式web元素，使用引用地址获取web元素；将获取的web元素添加至资源池；以及响应于web元素存在于资源池中，在web页面中呈现web元素。

根据本发明的一个方面，将获取的web元素添加至资源池包括：将web元素拷贝至资源池；以及将引用地址与web元素之间的关联关系添加至关联关系表，其中关联关系表描述web页面中的代码中的引用地址与资源池中的web元素之间的关联关系。

根据本发明的一个方面，响应于引用地址指示web元素为嵌入式web元素，使用引用地址获取web元素包括：使用引用地址，基于web页面的工程来获取web元素，工程至少包括web页面的代码以及与web页面相关联的至少一个web元素。

根据本发明的一个方面，使用引用地址，基于web页面的工程来获取web元素包括：在编辑web页面期间将工程部署至web页面控制器，web页面控制器是web页面在被编辑完成之后将在其上运行的web页面控制器；以及基于引用地址和web页面控制器的上下文信息，从web页面控制器中检索web元素。

根据本发明的一个方面，提供了一种用于在编辑web页面期间在集成开发环境中呈现web页面中的web元素的装置，包括：提取模块，配置用于从web页面的代码中提取指向web元素的引用地址；获取模块，配置用于响应于引用地址指示web元素为嵌入式web元素，使用引用地址获取web元素；添加模块，配置用于将获取的web元素添加至资源池；以及呈现模块，配置用于响应于web元素存在于资源池中，在web页面中呈现web元素。

根据本发明的一个方面，添加模块包括：拷贝模块，配置用于将web元素拷贝至资源池；以及关系添加模块，配置用于将引用地址与web元素之间的关联关系添加至关联关系表，其中关联关系表描述web页面中的代码中的引用地址与资源池中的web元素之间的关联关系。

根据本发明的一个方面，获取模块包括：元素获取模块，配置用于使用引用地址，基于web页面的工程来获取web元素，工程至少包括web页面的代码以及与web页面相关联的至少一个web元素。

根据本发明的一个方面，元素获取模块包括：部署模块，配置用于在编辑web页面期间将工程部署至web页面控制器，web页面控制器是web页面在被编辑完成之后将在其上运行的web页面控制器；以及第二检索模块，配置用于基于引用地址和web页面控制器的上下文信息，从web页面控制器中检索web元素。

采用本发明所述的方法和装置，可以在编辑web页面期间动态并且实时地显示开发人员正在编辑的web页面，进而提高开发人员的工作效率。

附图说明

通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其他目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的参考标号通常代表相同部件。

图1示意性示出了适于用来实现本发明实施方式的示例性计算机系统/服务器12的框图；

图2A和图2B分别示意性示出了根据一个技术方案的生成web页面的示意图以及在编辑web页面期间的界面的示意图；

图3示意性示出了根据本发明一个实施方式的用于呈现web页面中的web元素的技术方案的架构图；

图4示意性示出了根据本发明一个实施方式的用于呈现web页面中的web元素的方法的流程图；

图5示意性示出了根据本发明一个实施方式的图形化用户接口的示意图500；

图6示意性示出了根据本发明一个实施方式的用于基于web页面的工程来获取web元素的技术方案的架构图；以及

图7示意性示出了根据本发明一个实施方式的用于呈现web页面中的web元素的装置的框图。

具体实施方式

下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

图1示出了适于用来实现本发明实施方式的示例性计算机系统/服务器12的框图。图1显示的计算机系统/服务器12仅仅是一个示例，不应对本发明实施方式的功能和使用范围带来任何限制。

如图1所示，计算机系统/服务器12以通用计算设备的形式表现。计算机系统/服务器12的组件可以包括但不限于：一个或者多个处理器或者处理单元16，系统存储器28，连接不同系统组件(包括系统存储器28和处理单元16)的总线18。

总线18表示几类总线结构中的一种或多种，包括存储器总线或者存储器控制器，外围总线，图形加速端口，处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说，这些体系结构包括但不限于工业标准体系结构(ISA)总线，微通道体系结构(MAC)总线，增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。

计算机系统/服务器12典型地包括多种计算机系统可读介质。这些介质可以是任何能够被计算机系统/服务器12访问的可用介质，包括易失性和非易失性介质，可移动的和不可移动的介质。

系统存储器28可以包括易失性存储器形式的计算机系统可读介质，例如随机存取存储器(RAM)30和/或高速缓存存储器32。计算机系统/服务器12可以进一步包括其他可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例，存储系统34可以用于读写不可移动的、非易失性磁介质(图1未显示，通常称为“硬盘驱动器”)。尽管图1中未示出，可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器，以及对可移动非易失性光盘(例如CD-ROM，DVD-ROM或者其他光介质)读写的光盘驱动器。在这些情况下，每个驱动器可以通过一个或者多个数据介质接口与总线18相连。存储器28可以包括至少一个程序产品，该程序产品具有一组(例如至少一个)程序模块，这些程序模块被配置以执行本发明各实施方式的功能。

具有一组(至少一个)程序模块42的程序/实用工具40，可以存储在例如存储器28中，这样的程序模块42包括——但不限于——操作系统、一个或者多个应用程序、其他程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块42通常执行本发明所描述的实施方式中的功能和/或方法。

计算机系统/服务器12也可以与一个或多个外部设备14(例如键盘、指向设备、显示器24等)通信，还可与一个或者多个使得用户能与该计算机系统/服务器12交互的设备通信，和/或与使得该计算机系统/服务器12能与一个或多个其他计算设备进行通信的任何设备(例如网卡，调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口22进行。并且，计算机系统/服务器12还可以通过网络适配器20与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。如图所示，网络适配器20通过总线18与计算机系统/服务器12的其他模块通信。应当明白，尽管图中未示出，可以结合计算机系统/服务器12使用其他硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗佘处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

在本发明的上下文中，将在集成开发环境中描述如何实现本发明的方法和装置。集成开发环境是用于提供程序开发环境的应用程序，一般可以包括代码编辑器、编译器、调试器和图形用户界面工具。本发明中所述的web站点编辑器即为集成开发环境的一个示例。可以通过扩展现有的web站点编辑器的功能来实现本发明的各个实施方式的技术方案。

目前的web编辑器提供的所见即所得的能力依赖于编辑器的实现机制，而编辑器本身的图形用户界面不同于浏览器对web元素的渲染机制。这将导致在web编辑器中的渲染能力不同于该页面在浏览器中的实际渲染效果。

图2A示意性示出了根据一个技术方案的生成web页面的示意图200A。如图2A所示，需要将开发人员所开发的web站点部署至web页面控制器220A(如箭头A所示)之后，才能由web站点编辑器210A肉的呈现模块来进行呈现(如箭头B所示)。在如图2A所示的示例中，开发人员使用编辑器210A来编辑web站点中的各个页面，在web页面的代码中调用的某些web元素可能并不位于web站点编辑器210A的本地，或者可能由于路径匹配等原因而不能找到本地的web元素，导致在开发人员编辑web页面期间，不能预览所编辑的web页面中的每个web元素进而无法查看web页面的全貌。

图2B示意性示出了根据一个技术方案的、在编辑web页面期间的界面的示意图200B。如图2B所示，用户正在编辑的web页面的代码中存在语句：

<diVstyle＝′background-image：url(″/txs/images/background.jpg")；height：600px；′>

Thisisatext

</div>

然而，由于现有的web站点编辑器的局限性，在编辑器的预览界面中并不能显示由“/txs/images/background.jpg”定义的背景图片，而是只能显示如图2B中如210B中的文本。应当注意，尽管将开发人员所编辑的web站点部署至web页面控制器之后，可以使用浏览器查看到正确显示的web元素，然而目前的编辑器并不能实时地显示web页面的内容。

因而，基于现有技术中的上述不足，本发明的各个实施方式提供了一种能够在编辑web页面期间动态并且实时地显示开发人员正在编辑的web页面的技术方案。图3示意性示出了根据本发明一个实施方式的用于呈现web页面中的web元素的技术方案的架构图300。

如图3所示，本发明的实施方式提供了一种用于呈现web页面中的web元素的技术方案。在此技术方案中，通过设置资源池来缓存当前正在被编辑的web页面中涉及的web元素，并且在加载web页面的代码时，可以首先将当前web页面中的、按照现有技术不能在编辑器中实时呈现的web元素拷贝至资源池，以便允许在编辑器中正确地预览当前正在被编辑的web页面。

具体而言，首先提取器310从正在被编辑的web页面的代码中提取指向web元素的引用地址(如箭头B所示，例如上文所示的语句“<diVstyle＝′background-image：url(″/txs/images/background.jpg″)；height：600px；′>Thisisatext</div>)，当发现该语句涉及嵌入式web元素(如，“/txs/images/background.jpg”)时，则基于引用地址来由获取器320来获取该引用地址对应的web元素(如箭头C所示)。继而，将该web元素添加至子资源池330中，以便基于资源池330中的各个web元素来在web页面中呈现原本不能被显示的web元素。根据本发明的一个实施方式，当发现待显示的web元素已经存在于资源池330中时(如箭头B1所示，还可以直接基于引用地址，从资源池330中获取该web元素并将其呈现在web页面中。

具体地，本发明的各个实施方式提供了一种用于在编辑web页面期间在集成开发环境中呈现web页面中的web元素的方法，包括：从web页面的代码中提取指向web元素的引用地址；响应于引用地址指示web元素为嵌入式web元素，使用引用地址获取web元素；将获取的web元素添加至资源池；以及响应于web元素存在于资源池中，在web页面中呈现web元素。

图4示意性示出了根据本发明一个实施方式的用于呈现web页面中的web元素的方法的流程图400。具体地，在步骤S402中，从web页面的代码中提取指向web元素的引用地址。可以通过解析web页面的代码的方式，提取指向web元素的引用地址。例如，本领域技术人员例如可以通过分析web页面代码中的关键字的方式来提取引用地址，或者本领域技术人员还可以通过其他方式来提取引用地址，在此不再赘述。

在步骤S404中，响应于引用地址指示web元素为嵌入式web元素，使用引用地址获取web元素。应当注意，在本发明的实施方式中，可以仅针对采用常规的web站点编辑器不能显示的那些web元素进行处理，而对于采用常规web站点编辑器可以显示的web元素，则可以继续使用现有的方式。以此方式，可以最大限度地降低对于现有web站点编辑器的修改。

在步骤S406中，将获取的web元素添加至资源池。在此实施方式中，“添加”的含义是指将获取的web元素拷贝至资源池。以此方式，在资源池中存在web元素的副本，因而在预览时可以直接基于资源池中的web元素的副本来呈现该web元素。本发明的实施方式通过在资源池中保持原本不能显示的web元素的副本的方式，来在提供待显示的内容。应当注意，在此实施方式中，资源池可以位于web站点编辑器本地，或者位于经由网络可访问的其他物理位置。优选地，为了提高预览效率，资源池可以位于实现本发明的方法的计算机设备的内存中。

在步骤S408中，响应于web元素存在于资源池中，在web页面中呈现web元素。在此实施方式中，可以直接调用资源池中的web元素，来在web页面中进行显示。采用上文所述的方法，可以在编辑web页面期间动态并且实时地显示开发人员正在编辑的web页面，进而提高开发人员的开发效率。

应当注意，尽管在上文参见图4描述的具体实施方式中示出了在步骤S406之后执行步骤S408的操作流程，由于在步骤S404中已经获取了待呈现的web元素，因而还可以首先执行步骤S408继而执行步骤S406。在调整后的实施方式中，可以基于获取的web元素来直接在web页面中显示该web元素，继而再将该web元素添加至资源池；或者还可以与在web元素中呈现web元素的同时，将该web元素添加至资源池。

图5示意性示出了根据本发明一个实施方式的图形化用户接口的示意图500。以此方式，采用上文参见图4所述的技术方案，可以在编辑web页面期间动态并且实时地显示开发人员正在编辑的web页面。如图5中所示，在界面上部的预览窗口510中示意性示出了正在被编辑的web页面的显示效果，而在界面500下部的编码窗口520中示意性示出了web页面的代码。在图5中，通过应用本发明的实施方式的技术方案，可以在预览窗口510中显示背景图像。

应当注意，在图5中仅仅示意性示出了用于实现本发明的一个实施方式的图形化用户界面的示意图，本领域技术人员还可以根据具体应用环境来采用其他的界面。例如，可以向该界面中添加用于激活/解激活根据本发明的实施方式的功能的按钮，或者还可以向界面中添加“刷新”按钮，以便在用户修改了web页面的代码之后，基于修改后的代码来重新执行如上文参见附图4中所示的各个步骤，进而实现刷新web元素的呈现的功能。

在本发明的一个实施方式中，将获取的web元素添加至资源池包括：将web元素拷贝至资源池；以及将引用地址与web元素之间的关联关系添加至关联关系表，其中关联关系表描述web页面中的代码中的引用地址与资源池中的web元素之间的关联关系。

在本发明的一个实施方式中，可以设置关联关系表来描述web页面中的代码中的引用地址与资源池中的web元素之间的关联关系。例如，可以采用如下文表1中所示的方式来实现关联关系表。

表1关联关系表的示例

序号	引用地址	Web元素
			1	/transactiohS/transactions-grid.js	transactions-grid.js
2	/txs/transactions-gridj.j	transactions-grid.js
			...	...	...

应当注意，上文表1中仅仅示意性示出了一个具体示例，本领域技术人员可以基于具体应用环境来定义关联关系表的数据结构，只要能够描述代码中的引用地址与资源池中的web元素之间的关联关系即可。还应当注意，在本发明的实施方式中，多个引用地址可以对应于同一个web元素，例如，上文表1中所示的序号分别为1和2的两个引用地址即对应于相同的web元素。

在本发明的一个实施方式中，进一步包括：在web页面中呈现web元素之前，基于引用地址和关联关系表，在资源池中查找web元素。

在已经构建了关联关系表的情况下，可以基于关联关系表来查找在资源池中是否存在某个引用地址所指向的web元素。例如，目前已经构建了如上文表1所示的关联关系表，假设从web页面代码<scripttype＝″text/javascript″src＝"/txs/transactions-grid.js″>中解析出引用地址为“/txs/transactions-grid.js”时，从上文表1中可以获知，该引用地址对应的web元素“transactions-grid.js”已经存储在于资源池中，因而可以执行后续的程序步骤。

在本发明的一个实施方式中，响应于引用地址指示web元素为嵌入式web元素，使用引用地址获取web元素包括：使用引用地址，基于web页面的工程来获取web元素，工程至少包括web页面的代码以及与web页面相关联的至少一个web元素。

在下文中将详细描述如何基于与web页面相关联的工程来获取web元素。应当注意，工程是用于生成一个web站点的工作空间，并且至少包括web页面的代码以及与web页面相关联的至少一个web元素。假设开发人员正在开发一个购物网站，此时用于购物网站的工程例如可以包括该购物网站中的各个web页面以及各个页面中所引用的web元素，例如，图像、视频、JavaScript和CSS等等。此时，则可以在相应工程中查找web元素。

在本发明的一个实施方式中，使用引用地址，基于web页面的工程来获取web元素包括：基于引用地址，从工程包括的至少一个web元素中检索web元素。具体地，假设被加载的web页面代码transactions.html中存在如下代码段：

<scripttype＝"text/javascript″src＝"/transactionS/transactions-grid.js">

通过解析该代码段，可以从中提取出引用地址“/transactions/transactions-grid.js”，并且本领域技术人员可以知道，该引用地址所指向的web元素为“transactions-grid.js”，属于JavaScript文件(即，本发明中所述的嵌入式web元素)。因而，在后续步骤中可以基于引用地址“/transactions/transactions-grid.js”来获取相应的JavaScript文件。

根据工程的定义，假设该JavaScript文件位于与web页面transactions.html同级别的transactions目录下面，则直接根据该引用地址即可找到对应的JavaScript文件。此时可以将transactions-grid.js文件直接添加至资源池中，并且在关联关系表中加入如下条目：

/transactions/transactions-grid.js<->transactions-grid.js

以此方式，当开发人员下一次打开文件transactions.html时，因为transactions-grid.js对象已经存在于资源池中，因而可以直接基于web页面代码中的引用地址“/transactiohS/transactions-grid.js”，从资源池中找到transactions-grid.js，并在web页面中进行呈现，而无需再从工程中获取该web元素。

应当注意，工程中并不一定包括web页面中所引用的全部web元素，因而，在某些情况下直接基于web页面的代码中的引用地址并不能确定web元素的物理位置。由于开发完成的web站点的代码最终将被部署到web页面控制器中，因而直接基于在web页面代码中的某些类型引用地址并不能访问对应的web元素。通常而言，这种类型的引用地址还需要与web页面控制器的上下文信息相结合，获取访问相应的web元素的物理地址。在下文中将参见图6详细描述如何基于web页面控制器的上下文信息来获取相应的web元素。在此实施方式中，web页面控制器可以是嵌入到web站点编辑器内的组件。

图6示意性示出了根据本发明一个实施方式的用于基于web页面的工程来获取web元素的技术方案的架构图600。如图6中箭头A所示，可以将工程610部署至web页面控制器660中，并且基于web页面控制器的上下文信息来在web页面控制器中查找相应的web元素。继而，如箭头B所示将找到的web元素添加至资源池330中。

应当注意，尽管在图6中以独立的方框示出了web页面控制器660，在本发明的各个实施方式中并不限定web页面控制器660的物理位置。在集成开发环境中，web页面控制器660可以位于用于执行本发明的实施方式的计算设备上。换言之，为了降低网络传输的延迟进而提高开发人员的工作效率，工程610、资源池330和web页面控制器660可以位于相同的计算设备上，或者还可以将资源池330部署在不同的计算设备上，或者当多个开发人员协作开发时，还可以由该多个开发人员共享资源池330。

在本发明的一个实施方式中，使用引用地址，基于web页面的工程来获取web元素包括：在编辑web页面期间将工程部署至web页面控制器，web页面控制器是web页面在被编辑完成之后将在其上运行的web页面控制器；以及基于引用地址和web页面控制器的上下文信息，从web页面控制器中检索web元素。

因而，在本发明的一个实施方式中，还需要将工程部署到web页面控制器，之后基于引用地址和web页面控制器的上下文信息，从web页面控制器中检索web元素。

在本发明的一个实施方式中，基于引用地址和web页面控制器的上下文信息，从web页面控制器中检索web元素包括：基于上下文信息，将引用地址映射至web页面控制器中的物理地址；以及基于物理地址从web页面控制器中获取web元素。在下文中，将参见具体示例描述实现细节。

假设web页面的代码transactions.html中存在如下代码段：

<scripttype＝″text/javascript"src＝″/txs/transactions-grid.js">

通过解析该代码段，可以从中提取出引用地址“/txs/transactions-grid.js，”，并且本领域技术人员可以知道，该引用地址所指向的web元素为“transactions-grid.js”，属于JavaScript文件(即，本发明中所述的嵌入式web元素)。然而，该引用地址并非可以直接映射到物理路径的标准的统一资源定位符(UniformResourceLocator，URL)，使得在web页面的代码transactions.html的同级目录下无法找到txs文件夹，进而无法定位该引用地址指向的JavaScript文件。

此时，可以将transactions.html所在的工程部署到web页面控制器端，并且在服务器端根据请求上下文识别该引用地址对应的路径。在此示例中，假设上下文信息指示目录“txs”实际上对应于web页面控制器中的“transactions”目录，则基于上下文信息指示的对应关系，来将将引用地址(即，“/txs/transactions-grid.js，，)映射至Web页面控制器中可识别的物理地址(即“/transactions/transactioas-grid.js”)。

继而，可以基于该物理地址找到待呈现的web元素(即，transactions-grid.js)，此时可以将transactionS-grid.js文件加载并添加至资源池中，并且在关联关系表中加入如下条目：

/txs/transactions-grid.js<->transactions-grid.js

以此方式，当开发人员下一次打开文件transactions.html并进行编辑时，因为transactions-grid.js对象已经存在于资源池中，因而可以直接基于web页面代码中的引用地址“/txs/transactions-grid.js，”，从资源池中找到transactions-grid.js并在web页面中进行呈现，而无需再从web页面控制器端获取该web元素。

在本发明的一个实施方式中，还可能会存在如下情况，引用地址所指向的web元素即不在相应的工程中也不在Web页面控制器端，而是位于第三方的服务器上。此时尽管可以经由网络来访问位于第三方服务器上的web元素，然而由于网络延迟等因素，此时的预览效率并不理想。因而，还可以在加载web页面的代码时，从第三方服务器上获取相应的web元素并将该web元素添加至资源池中，以提高预览效率。

具体地，假设被加载的web页面代码transactiohS.html中存在如下代码段：

<scripttype＝″text/javascript"src＝"http：//sample.com/txs/dojo.js">

通过解析该代码段，可以从中提取出引用地址“http：//sample.com/txs/dojo.js”，并且本领域技术人员可以知道，该引用地址所指向的web元素为“dojo.js”，属于JavaScript文件(即，本发明中所述的嵌入式web元素)。由于该引用地址“http：//sampIe.com/txs/dojo.js”是可直接访问的URL，因而可以基于该URL从第三方服务器中获取待显示的web元素。此时可以将dojo.js文件直接添加至资源池中，并且在关联关系表中加入如下条目：

http：//sample.com/txs/dojo.js<->dojo.js

以此方式，当开发人员下一次打开文件transactions.html并进行编辑时，因为dojo.js对象已经存在于资源池中，因而可以直接基于web页面代码中的引用地址“http：//sample.com/txs/dojo.js”，从资源池中找到dojo.js并在web页面中进行呈现，而无需再从第三方服务器端获取该web元素。

在本发明的一个实施方式中，嵌入式web元素是以下中的至少任一项：JavaScript、层叠样式表、图像、文本、音频以及视频。本发明的各个实施方式旨在解决采用现有的web站点编辑器不能正常预览某些类型的web元素的问题，由于JavaScript文件的物理地址需要在将web页面部署到web页面控制器之后动态地生成，而层叠样式表通常包括较大的数据量，因而按照现有的技术方案，这在web站点编辑器中并不能实时地显示这两种类型的web元素，或者显示效率极低。类似地，还可以将本发明所述的方法应用于诸如图像、文本、音频和视频等web元素。

因而在本发明的实施方式中，主要针对JavaScript和层叠样式表这两种类型的web元素提出了改进的技术方案，以便在编辑web页面期间动态地并且实时地显示开发人员正在编辑的web页面。

在本发明的一个实施方式中，进一步包括：响应于web元素存在于资源池中，在web页面中呈现web元素。采用上文所述的技术方案，已经在加载web页面期间将与该web页面相关联的web元素存储在资源池中，因而后续可以直接使用在资源池中的web元素来进行呈现。

在本发明的一个实施方式中，响应于web页面的代码被更新，还可以基于上文所述的方法，来基于更新后的web页面执行操作。

前面已经参考附图描述了实现本发明的方法的各个实施方式。本领域技术人员可以理解的是，上述方法既可以以软件方式实现，也可以以硬件方式实现，或者通过软件与硬件相结合的方式实现。并且，本领域技术人员可以理解，通过以软件、硬件或者软硬件相结合的方式实现上述方法中的各个步骤，可以提供一种基于相同发明构思的一种设备。即使该设备在硬件结构上与通用处理设备相同，由于其中所包含的软件的作用，使得该设备表现出区别于通用处理设备的特性，从而形成本发明的各个实施方式的设备。本发明中所述设备包括若干装置或模块，所述装置或模块被配置为执行相应步骤。本领域的所述技术人员通过阅读本说明书可以理解如何编写程序实现所述装置或模块执行的动作。由于所述设备与方法基于相同的发明构思，因此其中相同或相应的实现细节同样适用于与上述方法对应的装置或模块，由于其在上文中已经进行了详细和完整的描述，因此在下文中可能不再进行赘述。

图7示意性示出了根据本发明一个实施方式的用于呈现web页面中的web元素的装置的框图700。具体地，提供了一种用于在编辑web页面期间在集成开发环境中呈现web页面中的web元素的装置，包括：提取模块710，配置用于从web页面的代码中提取指向web元素的引用地址；获取模块720，配置用于响应于引用地址指示web元素为嵌入式web元素，使用引用地址获取web元素；添加模块730，配置用于将获取的web元素添加至资源池；以及呈现模块740，配置用于响应于web元素存在于资源池中，在web页面中呈现web元素。

在本发明的一个实施方式中，添加模块730包括：拷贝模块，配置用于将web元素拷贝至资源池；以及关系添加模块，配置用于将引用地址与web元素之间的关联关系添加至关联关系表，其中关联关系表描述web页面中的代码中的引用地址与资源池中的web元素之间的关联关系。

在本发明的一个实施方式中，进一步包括：查找模块，配置用于在web页面中呈现web元素之前，基于引用地址和关联关系表，在资源池中查找web元素。

在本发明的一个实施方式中，获取模块710包括：元素获取模块，配置用于使用引用地址，基于web页面的工程来获取web元素，工程至少包括web页面的代码以及与web页面相关联的至少一个web元素。

在本发明的一个实施方式中，元素获取模块包括：第一检索模块，配置用于基于引用地址，从工程包括的至少一个web元素中检索web元素。

在本发明的一个实施方式中，元素获取模块包括：部署模块，配置用于在编辑web页面期间将工程部署至web页面控制器，web页面控制器是web页面在被编辑完成之后将在其上运行的web页面控制器；以及第二检索模块，配置用于基于引用地址和web页面控制器的上下文信息，从web页面控制器中检索web元素。

在本发明的一个实施方式中，第二检索模块包括：映射模块，配置用于基于上下文信息，将引用地址映射至web页面控制器中的物理地址；以及web元素获取模块，配置用于基于物理地址从web页面控制器中获取web元素。

在本发明的一个实施方式中，嵌入式web元素是JavaScript和层叠样式表中的至少任一项。

在本发明的一个实施方式中，进一步包括：第二呈现模块，配置用于响应于web元素存在于资源池中，在web页面中呈现web元素。

采用上文所述的技术方案，可以提供一种能够在编辑web页面期间动态并且实时地显示开发人员正在编辑的web页面的技术方案，并且期望该技术方案可以在尽量不改变现有的编辑器的架构的情况下，以低延迟地显示web页面中全部类型的web元素，进而提高开发人员的开发效率。

本发明可以是系统、方法和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质，其上载有用于使处理器实现本发明的各个方面的计算机可读程序指令。

计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是——但不限于——电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、静态随机存取存储器(SRAM)、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身，诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如，通过光纤电缆的光脉冲)、或者通过电线传输的电信号。

这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备，或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令，并转发该计算机可读程序指令，以供存储在各个计算/处理设备中的计算机可读存储介质中。

用于执行本发明操作的计算机程序指令可以是汇编指令、指令集架构(ISA)指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码，所述编程语言包括面向对象的编程语言—诸如Java、Smalltalk、C++等，以及常规的过程式编程语言—诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。在—些实施方式中，通过利用计算机可读程序指令的状态信息来个性化定制电子电路，例如可编程逻辑电路、现场可编程门阵列(FPGA)或可编程逻辑阵列(PLA)，该电子电路可以执行计算机可读程序指令，从而实现本发明的各个方面。

这里参照根据本发明实施方式的方法、装置(系统)和计算机程序产品的流程图和/或框图描述了本发明的各个方面。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合，都可以由计算机可读程序指令实现。

这些计算机可读程序指令可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，从而生产出一种机器，使得这些指令在通过计算机或其他可编程数据处理装置的处理器执行时，产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中，这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作，从而，存储有指令的计算机可读介质则包括一个制造品，其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。

也可以把计算机可读程序指令加载到计算机、其他可编程数据处理装置、或其他设备上，使得在计算机、其他可编程数据处理装置或其他设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机、其他可编程数据处理装置、或其他设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。

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

以上已经描述了本发明的各实施方式，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施方式。在不偏离所说明的各实施方式的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施方式的原理、实际应用或对市场中的技术的技术改进，或者使本技术领域的其他普通技术人员能理解本文披露的各实施方式。

Claims (16)

1.一种用于在编辑web页面期间在集成开发环境中呈现所述web页面中的web元素的方法，包括：

从所述web页面的代码中提取指向所述web元素的引用地址；

响应于所述引用地址指示所述web元素为嵌入式web元素，使用所述引用地址获取所述web元素；

将获取的所述web元素添加至资源池；以及

响应于所述web元素存在于所述资源池中，在所述web页面中呈现所述web元素。

2.根据权利要求1所述的方法，其中将获取的所述web元素添加至所述资源池包括：

将所述web元素拷贝至所述资源池；以及

将所述引用地址与所述web元素之间的关联关系添加至关联关系表，其中所述关联关系表描述所述web页面中的所述代码中的所述引用地址与所述资源池中的web元素之间的关联关系。

3.根据权利要求2所述的方法，进一步包括：

在所述web页面中呈现所述web元素之前，基于所述引用地址和所述关联关系表，在所述资源池中查找所述web元素。

4.根据权利要求1-3中的任一项所述的方法，其中响应于所述引用地址指示所述web元素为嵌入式web元素，使用所述引用地址获取所述web元素包括：

使用所述引用地址，基于所述web页面的工程来获取所述web元素，所述工程至少包括所述web页面的所述代码以及与所述web页面相关联的至少一个web元素。

5.根据权利要求4所述的方法，其中使用所述引用地址，基于所述web页面的所述工程来获取所述web元素包括：

基于所述引用地址，从所述工程包括的所述至少一个web元素中检索所述web元素。

6.根据权利要求4所述的方法，其中使用所述引用地址，基于所述web页面的所述工程来获取所述web元素包括：

在编辑所述web页面期间将所述工程部署至web页面控制器，所述web页面控制器是所述web页面在被编辑完成之后将在其上运行的web页面控制器；以及

基于所述引用地址和所述web页面控制器的上下文信息，从所述web页面控制器中检索所述web元素。

7.根据权利要求6所述的方法，其中基于所述引用地址和所述web页面控制器的所述上下文信息，从所述web页面控制器中检索所述web元素包括：

基于所述上下文信息，将所述引用地址映射至所述web页面控制器中的物理地址；以及

基于所述物理地址从所述web页面控制器中获取所述web元素。

8.根据权利要求1-3中的任一项所述的方法，其中所述嵌入式web元素是以下中的至少任一项：

JavaScript、层叠样式表、图像、文本、音频以及视频。

9.一种用于在编辑web页面期间在集成开发环境中呈现所述web页面中的web元素的装置，包括：

提取模块，配置用于从所述web页面的代码中提取指向所述web元素的引用地址；

获取模块，配置用于响应于所述引用地址指示所述web元素为嵌入式web元素，使用所述引用地址获取所述web元素；

添加模块，配置用于将获取的所述web元素添加至资源池；以及

呈现模块，配置用于响应于所述web元素存在于所述资源池中，在所述web页面中呈现所述web元素。

10.根据权利要求9所述的装置，其中所述添加模块包括：

拷贝模块，配置用于将所述web元素拷贝至所述资源池；以及

关系添加模块，配置用于将所述引用地址与所述web元素之间的关联关系添加至关联关系表，其中所述关联关系表描述所述web页面中的所述代码中的所述引用地址与所述资源池中的web元素之间的关联关系。

11.根据权利要求10所述的装置，进一步包括：

查找模块，配置用于在所述web页面中呈现所述web元素之前，基于所述引用地址和所述关联关系表，在所述资源池中查找所述web元素。

12.根据权利要求9-11中的任一项所述的装置，其中所述获取模块包括：

元素获取模块，配置用于使用所述引用地址，基于所述web页面的工程来获取所述web元素，所述工程至少包括所述web页面的所述代码以及与所述web页面相关联的至少一个web元素。

13.根据权利要求12所述的装置，其中所述元素获取模块包括：

第一检索模块，配置用于基于所述引用地址，从所述工程包括的所述至少一个web元素中检索所述web元素。

14.根据权利要求12所述的装置，其中所述元素获取模块包括：

部署模块，配置用于在编辑所述web页面期间将所述工程部署至web页面控制器，所述web页面控制器是所述web页面在被编辑完成之后将在其上运行的web页面控制器；以及

第二检索模块，配置用于基于所述引用地址和所述web页面控制器的上下文信息，从所述web页面控制器中检索所述web元素。

15.根据权利要求14所述的装置，其中所述第二检索模块包括：

映射模块，配置用于基于所述上下文信息，将所述引用地址映射至所述web页面控制器中的物理地址；以及

web元素获取模块，配置用于基于所述物理地址从所述web页面控制器中获取所述web元素。

16.根据权利要求9-11中的任一项所述的装置，其中所述嵌入式web元素是以下中的至少任一项：

JavaScript、层叠样式表、图像、文本、音频以及视频。