CN102339291A

CN102339291A - 一种列表生成方法及设备

Info

Publication number: CN102339291A
Application number: CN2010102367322A
Authority: CN
Inventors: 盛鼎
Original assignee: Alibaba Group Holding Ltd
Current assignee: Alibaba Group Holding Ltd
Priority date: 2010-07-23
Filing date: 2010-07-23
Publication date: 2012-02-01
Anticipated expiration: 2030-07-23
Also published as: HK1163856A1; CN102339291B

Abstract

本申请公开了一种列表生成的方法及设备，通过结合利用后台语言生成表示HTML形式的DOM的宏函数和通过JavaScript应用插件读写数据的方式生成列表的方式，既克服了常规方式下由JavaScript应用插件生成列表时需要执行创建DOM操作而导致系统性能下降的问题，又避免了需要展示的数据与列表架构完全耦合的情况发生，在每次展示列表时不需要刷新页面，使列表的展示效果较好。

Description

一种列表生成方法及设备

技术领域

本申请涉及计算机技术领域，尤其涉及一种Web应用中的列表生成方法及设备。

背景技术

在Web业务的应用过程中，执行搜索等业务后，需要通过列表形式展示搜索结果，列表展示形式是Web业务中的常见展示方式。目前，主要有以下两种生成并展示列表的方式。

第一种方式：

利用预先设定的后台语言生成超文本标记语言(Hyper Text MarkupLanguage，HTML)形式的文档对象模型(DOM)，所述DOM中包含生成列表架构的标签，然后将需要展示的数据写入DOM中的列表架构中，并对写入数据后的DOM渲染生成页面，并将该页面向用户展示以达到通过列表形式展示数据的目的。

在上述第一种方式下，需要展示的数据与DOM中的列表架构完全耦合，即页面的显示层和数据层耦合在一起，当展示的数据发生变化时，需要重新渲染并生成页面，然后将重新生成的页面刷新原页面，由于展示的数据时常会发生变化，因此，在每次数据发生变化时都要重新生成并刷新页面，使得每次重新生成页面都要占用额外的资源，且列表展示效果较差。

第二种方式：

采用客户端脚本语言JavaScript应用插件创建DOM，然后利用异步JavaScript和XML(ajax)获取数据，将获取的数据写入DOM生成的列表架构中，并渲染生成展示列表的页面。

在上述第二种方式下，当需要通过多个列表展示大量的数据时，JavaScript应用插件需要首先创建DOM对象，然后在后台对该DOM进行渲染才能最终得到展示列表的页面，由于在JavaScript应用插件生成列表的过程中，需要执行创建DOM对象的操作，导致占用的资源量较大。

综上所述，在目前生成并展示列表的方式下，如果采用第一种方式，在每次数据发生变化时都要重新生成并刷新页面，使得每次重新生成页面都要占用额外的资源，且列表展示效果较差，如果采用第二种方式，JavaScript应用插件需要不断地创建DOM对象，导致系统性能下降，因此，迫切需要找到一种能够克服上述问题的列表生成方式。

发明内容

本申请的目的在于，提供一种列表生成的方法及设备，用以解决现有技术中存在每次数据发生变化时都要重新生成并刷新页面或需要不断地创建DOM对象，导致系统性能下降的问题。

一种列表生成的方法，所述方法包括：

利用预先设定的后台语言生成宏函数，所述宏函数用于表示超文本标记语言HTML形式的文档对象模型DOM；

通过客户端脚本语言JavaScript应用插件读取待展示的数据，并将读取的数据写入所述DOM，生成写入数据后的列表。

一种列表生成的设备，所述设备包括：

DOM生成模块，用于利用预先设定的后台语言生成宏函数，所述宏函数用于表示HTML形式的文档对象模型DOM；

JavaScript应用插件，用于读取待展示的数据，并将读取的数据写入所述DOM；

列表生成模块，用于生成写入数据后的列表。

本申请使用后台语言生成宏函数的方式来获得HTML形式的DOM，避免了由JavaScript应用插件生成列表时需要执行创建DOM操作而导致系统性能下降的问题，同时，还利用JavaScript应用插件读取数据并将读取的数据写入DOM的方式最终生成列表，克服了数据与列表架构完全耦合的问题，在每次展示列表时不需要刷新页面，使列表的展示效果较好。

附图说明

图1为本申请实施例一列表生成的方法步骤示意图；

图2为本申请实施例二列表生成的设备结构示意图。

具体实施方式

本申请的方案应用于Web环境，特别是应用于Web搜索环境，用户通过搜索引擎搜索出需要的数据后，搜索引擎将该数据存储在后台，然后利用本申请提供的列表生成方法以及列表生成设备生成包含存储在后台中的数据的列表，并将该列表以页面形式向用户展示。

为了实现本申请目的，本申请实施例提出的生成列表的方法以及设备是利用预先设定的后台语言生成的宏函数来表示HTML形式的DOM，并通过JavaScript应用插件读取待展示的数据后，将该数据写入所述DOM以生成列表。在本申请实施例的方式下，由于利用预先设定的后台语言生成的宏函数直接绘制HTML形式DOM，在后台直接渲染绘制出的DOM，避免了采用JavaScript应用插件创建列表时需要先执行创建DOM对象的操作导致该操作占用的资源量较大的问题；同时，在本申请实施例的方式下，通过JavaScript应用插件读取待展示的数据，由于JavaScript应用插件分别读取列表中各显示部分中待展示的数据，在向DOM对象写入数据时也是分别将各显示部分中待展示的数据写入对应的显示部分中，因此，实现了页面的显示层和数据层分离，避免了需要展示的数据与DOM中的列表架构完全耦合的情况发生，在每次列表中有需要更新的数据时，只需要确定该更新的数据所在的显示部分，然后将该更新的数据写入其所在的显示部分即可，不需要刷新页面，使列表的展示效果较好。

下面结合说明书附图对本申请各实施例进行详细描述。

实施例一：

如图1所示，为本申请实施例一中列表生成的方法步骤示意图，所述方法包括以下步骤：

步骤101：利用预先设定的后台语言生成宏函数，所述宏函数用于表示HTML形式的DOM。

本申请各实施例中涉及的后台语言可以是任意能够用于生成表示HTML形式的DOM宏函数的计算机语言，如Velocit模板语言(基于java的模板语言)、Java语言等。

本步骤中生成的宏函数表示的DOM中包含生成列表架构的标签，如表示列表块状结构的Div标签，表示列表表格结构的Table标签等。

在本步骤中生成的DOM相当于搭建了一个HTML形式的列表架构，在通过宏函数表示DOM时，可以在该宏函数中设置列表头、列表主体、列表行、列表表格等参数。

步骤102：为待写入所述DOM中列表架构各部分的数据分别设置展示样式。

在本步骤中，列表架构的各部分可以是指列表头部分和列表主体部分，为待写入列表头的数据设置展示样式后，后续写入的列表头的数据将按照该展示样式展示。列表主体部分的展示与列表头部分的展示方式相同。

本步骤中所述的展示样式包括但不限于：该列表架构部分的显示背景色、数据展示的字体、段落、颜色等。

本步骤可以是实现本申请目的的优选步骤，本申请的方案中也可以不分别设置展示样式，按照默认的展示样式展示写入数据后的列表。

步骤103：为待写入DOM中的数据进行的操作设置至少一个应用编程接口(Application Program Interface，API)。

在步骤102的优选步骤中，是以列表架构为单位，分别设置展示样式的，为了给用户提供更加多元化、细粒度的列表生成方式，在步骤103的优选步骤中，通过定义一个列表的实体类，来控制列表的行为和数据。所述对数据进行的操作包括但不限于翻页、排序、选择到指定行、从后往前显示等，为每一个操作设置一个API，通过调用API的方式以满足操作需要。

步骤104：通过JavaScript应用插件读取待展示的数据。

在本步骤中，待展示的数据已保存在后台中，通过JavaScript应用插件读取数据。

JavaScript应用插件在读取数据时，需要确定读取的数据是列表中哪一显示部分中待展示的数据，以便于在下一步向DOM写入数据时将数据写入其所在的显示部分中。

步骤105：JavaScript应用插件将读取的数据写入所述DOM，生成写入数据后的列表。

在本步骤中，JavaScript应用插件根据上一步骤中确定的数据所在的显示部分，将读取的数据写入列表中相应的显示部分的位置。

在本步骤中，JavaScript应用插件具体地将按照所述DOM中列表结构各部分设置的展示样式，将读取的数据根据列表架构的标签写入所述DOM中列表结构的各部分，使得写入各部分的数据最终按照设置的展示样式展示。

本实施例中涉及的显示部分和列表架构可以表示列表中相同的部分，或是有重叠的部分，或是不相关的部分。

在向用户展示本步骤生成的列表后，可以进一步通过JavaScript应用插件调用API，对生成的列表中的数据进行相应的操作后进一步得到对数据操作后的列表。

步骤106：对生成的列表中的数据进行更新，得到数据更新后的列表。

在本步骤中，当有数据发生变化时，将变化后的数据替换之前已写入所述DOM中的数据，或者，当有新增的数据需要展示时，将新增的数据继续写入所述DOM中，得到数据更新后的列表。

在更新过程中，JavaScript应用插件需要确定更新的数据所在的显示部分，然后将该更新的数据写入其所在的显示部分即可。

实施例二：

本申请实施例二以Velocit模板语言为例，结合JavaScript应用插件读写数据的方式来说明本申请实施例一方案的具体实现方式。

本实施例二的方案包括以下步骤：

第一步：利用Velocit模板语言生成一个宏函数，用于描述HTML形式的DOM。

由于Velocit模板语言允许通过简单的使用模板语言(template language)来引用由java代码定义的对象，因此，可以将所述宏函数的表现形式设置为：macro(SimpleGrid $id $attrs)，其中，$id表示待生成的列表的唯一标识符，$attrs中的参数表示该列表的结构特征，如列表的设置宽度、每页显示条数、列模型等。

以宏函数中表示的列表头为例，该列表头的HTML结构如下：

//定义此段程序表示的块状结构是列表头

//定义列表头的表格宽度

<tbody>

//定义列表头的行

#if($checkbox)

//定义列表头中是否设置选择框(所述选择框用于表示该选择框指代

的内容是否被选中)

<td class＝″xui-simpleGrid-hd-checkbox xui-simpleGrid-cell″

style＝″WIDTH:17px；″>

<div class＝″xui-simpleGrid-hd-inner xui-simpleGrid-hd-inner-default″

unselectable＝″on″><input class＝″xui-simpleGrid-hd-checkbox″name＝″″

type＝″checkbox″value＝″″/></div>

//定义选择框的格式

</td>

#end

#foreach($col in $colModel)

<td class＝″xui-simpleGrid-hd-$col.get(0) xui-simpleGrid-cell″

style＝″WIDTH:$col.get(1)；″>

<div class＝″xui-simpleGrid-hd-inner xui-simpleGrid-hd-inner-default″

unselectable＝″on″>$col.get(2)<button class＝″xui-simpleGrid-sort″

></button></div>

//定义列表头的各列

</td>

#end

</tr>

</tbody>

</table>

</div>

以上是通过具体的实例说明针对列表头的定义，也可以按照类似方式定义列表的其他部分。

在定义完成列表的DOM后，可以根据宏函数中的$attrs的配置属性填充希望展示的内容和样式，例如，可以根据实际内容得到以下形式的宏函数：

#SimpleGrid(″sample(列表的唯一标识符)″，[[″width″，″600px″](表示列表的宽度占用600象素)，[″limit″，″10″](表示列表每页显示10行)，[″hasPagebar″，false](表示是否需要翻页)，[″checkbox″，true](表示是否需要选择框)，[″colModel″，[[″sex″，″150px″，″性别″]，[″age″，″75px″，″年龄″]，[″birthday″，″75px″，″生日″]，[″name″，″75px″，″姓名″]]]](表示每列中显示的内容是：性别：占用150象素、年龄：占用75象素、生日：占用75象素、姓名：占用75象素))。

第二步：创建css文件，用于为列表架构各部分的数据分别设置展示样式。

由于在第一步中高度抽象了DOM，而DOM中每一个标签都有一个独立的class文件来控制，因此，在本步骤中创建一个css文件，在该css文件中设置各class文件，然后分别为各class文件设置展示样式。

第三步：根据需要的操作设置API。

第四步：JavaScript应用插件获取后台存储的数据。

在本步骤中，JavaScript应用插件采用init初始化方法获取数据，来描述显示列的模型和数据的列模型。

第五步：后台以JSON的格式返回数据，JavaScript应用插件将该数据写入DOM。

例如，在本步骤中最终显示的列表可以为：

{totalCount:35，data:

[{sex:″男″，age:″10″，birthday:″2008-10-11″，name:″王五″，status:″1″}，

{sex:″男″，age:″30″，birthday:″2008-10-11″，name:″小明″，status:″2″}，

{sex:″女″，age:″50″，birthday:″2008-10-11″，name:″张三″，status:″1″}，

{sex:″女″，age:″44″，birthday:″2008-10-11″，name:″李四″，status:″0″}，

{sex:″女″，age:″33″，birthday:″2008-10-11″，name:″李红″，status:″1″}]

}

实施例三：

本申请实施例三还提供一种与实施例一和实施例二属于同一发明构思下的列表生成的设备，如图2所示，所述设备包括DOM生成模块11、JavaScript应用插件12和列表生成模块13，其中：DOM生成模块11用于利用预先设定的后台语言生成宏函数，所述宏函数用于表示HTML形式的DOM；JavaScript应用插件12用于读取待展示的数据，并将读取的数据写入所述DOM；列表生成模块13用于生成写入数据后的列表。

所述设备还包括样式设置模块14，用于在所述DOM中包含生成列表架构的标签时，为待写入所述列表架构各部分的数据分别设置展示样式；JavaScript应用插件12具体用于读取待展示的数据，并按照所述DOM中列表结构各部分设置的展示样式，将读取的数据根据列表架构的标签写入所述DOM中列表结构的各部分。

所述设备还包括API设置模块15，用于为对待写入DOM中的数据进行的操作设置至少一个API；JavaScript应用插件12还用于调用所述至少一个API，对生成的列表中的数据进行操作进一步得到对数据操作后的列表。

另外，JavaScript应用插件12还用于对生成的列表中的数据进行更新，具体地，当有数据发生变化时，将变化后的数据替换之前已写入所述DOM中的数据，或者，当有新增的数据需要展示时，将新增的数据继续写入所述DOM中，得到数据更新后的列表。

本实施例三中的样式设置模块14和API设置模块15可以是独立于JavaScript应用插件12的逻辑部件，也可以是JavaScript应用插件12中的一部分。

通过本申请实施例提供的方法及设备，结合利用后台语言生成表示HTML形式的DOM宏函数和通过JavaScript应用插件读写数据的方式生成列表，既克服了常规方式下由JavaScript应用插件创建DOM时需要执行创建DOM操作而导致占用的资源量较大的问题，又避免了需要展示的数据与列表架构完全耦合的情况发生，在每次展示列表时不需要刷新页面，使列表的展示效果较好；较优地，通过为列表架构各部分分别设置展示样式以及设置API，可以更好地根据用户需求设置展示样式，且实现方式简单，并且在有数据更新的情况发生时，也能够在不占用额外系统资源的情况下快速实现列表更新。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

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

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims

1.一种列表生成的方法，其特征在于，所述方法包括：

2.如权利要求1所述的方法，其特征在于，所述DOM中包含生成列表架构的标签；

生成所述DOM之后，且将读取的数据写入所述DOM之前，所述方法还包括：

为待写入所述DOM中列表架构各部分的数据分别设置展示样式；

将读取的数据写入所述DOM，具体包括：

按照所述DOM中列表结构各部分设置的展示样式，将读取的数据根据列表架构的标签写入所述DOM中列表结构的各部分。

3.如权利要求1或2所述的方法，其特征在于，生成所述DOM之后，且将读取的数据写入所述DOM之前，所述方法还包括：

为对待写入DOM中的数据进行的操作设置至少一个应用编程接口API；

生成写入数据后的列表之后，所述方法还包括：

调用所述至少一个API，对生成的列表中的数据进行操作进一步得到对数据操作后的列表。

4.如权利要求1或2所述的方法，其特征在于，生成写入数据后的列表之后，所述方法还包括：

对生成的列表中的数据进行更新。

5.一种列表生成的设备，其特征在于，所述设备包括：

DOM生成模块，用于利用预先设定的后台语言生成宏函数，所述宏函数用于表示HTML形式的DOM；

列表生成模块，用于生成写入数据后的列表。

6.如权利要求5所述的设备，其特征在于，所述设备还包括：

样式设置模块，用于在所述DOM中包含生成列表架构的标签时，为待写入所述列表架构各部分的数据分别设置展示样式；

JavaScript应用插件，具体用于读取待展示的数据，并按照所述DOM中列表结构各部分设置的展示样式，将读取的数据根据列表架构的标签写入所述DOM中列表结构的各部分。

7.如权利要求5或6所述的设备，其特征在于，所述设备还包括：

API设置模块，用于为对待写入DOM中的数据进行的操作设置至少一个API；

JavaScript应用插件，还用于调用所述至少一个API，对生成的列表中的数据进行操作进一步得到对数据操作后的列表。

8.如权利要求5或6所述的设备，其特征在于，

JavaScript应用插件，还用于对生成的列表中的数据进行更新。