CN103530338A - 在计算设备上进行页面渲染的框架及生成页面的方法 - Google Patents

Abstract

本发明提供一种在计算设备上进行页面渲染的框架及生成页面的方法，涉及互联网技术。其中，在计算设备上进行页面渲染的框架包括：命令管理器，用于根据用户作用于计算设备上的动作获取用户行为，根据用户行为生成请求指令；文件对象模型DOM管理器，与命令管理器连接，用于管理构成页面的多个图层，并确定请求指令对应的目标图层；逻辑部件，分别与DOM管理器和命令管理器连接，用于根据请求指令将目标图层中的内容渲染到页面上。通过本发明的实施方式，能够实现简化单页面的生成，并降低开发过程中的出错率。

Description

在计算设备上进行页面渲染的框架及生成页面的方法

技术领域

本发明涉及互联网领域，特别涉及一种页面渲染的框架及生成页面的方法。

背景技术

单页面是一种在互联网前端开发中越来越被重视的展示形式，即在一个页面中进行多次前端展示，而无需利用不同的统一资源定位符（UniformResource Locator，简称为URL）对每次不同的前端展示进行定位，单页面因为布局清晰，易于维护以及优化而被越来越多的应用到前端开发中。

在现有技术中，开发单页面比较依赖开发人员的个人水平，因为需要将以往多个页面中的逻辑内容放在一个页面里展现，这增大了开发时出错的可能性，且对于一般的开发人员而言，会拉长开发的周期。

如何简化单页面开发是一个亟待解决的问题。

发明内容

本发明实施例提供一种在计算设备上进行页面渲染的框架及生成页面的方法，以实现对单页面开发的简化。

本发明为了实现上述目的，提供一种在计算设备上进行页面渲染的框架，包括：命令管理器，用于根据用户作用于计算设备上的动作获取用户行为，根据用户行为生成请求指令；文件对象模型DOM管理器，与命令管理器连接，用于管理构成页面的多个图层，并确定请求指令对应的目标图层；逻辑部件，分别与DOM管理器和命令管理器连接，用于根据请求指令将目标图层中的内容渲染到页面上。在一个实施例中，

在一个实施例中，逻辑部件包括：多个功能模块，每个功能模块分别对应渲染操作中的一项逻辑功能。

在一个实施例中，该架构还包括：沙箱，用于存储多个功能模块，以阻止多个功能模块互相操作。

在一个实施例中，功能模块包括通过服务器获取数据的模块，用于从服务器获取渲染操作所需的数据。

在一个实施例中，DOM管理器通过索引管理多个图层。

本发明为了实现上述目的，提供一种在计算设备上生成页面的方法，包括：根据用户作用于计算设备的动作获取用户行为，并根据用户行为生成请求指令；确定构成页面的多个图层中用户行为对应的目标图层；根据请求指令，将目标图层中的内容渲染到页面上。

在一个实施例中，将目标图层中的内容渲染到页面上包括：通过多个功能模块完成渲染操作，其中，每个功能模块对应一项逻辑功能。

在一个实施例中，多个功能模块中的每个功能模块都是独立封装的。

在一个实施例中，多个功能模块存储于沙箱中，沙箱用于阻止多个功能模块互相操作。

在一个实施例中，通过多个功能模块将目标图层中的内容渲染到页面上包括：从服务器获取目标图层所需的数据；将目标图层中的代码对应的内容渲染到页面上。

本发明为了实现上述目的，提供一种构造页面渲染框架的方法，包括：调用命令管理器，其中，命令管理器用于获取用户行为，根据用户行为生成请求指令；调用文件对象模型DOM管理器管理多个图层，并确定请求指令对应的目标图层；将逻辑功能封装为逻辑部件；在DOM管理器、逻辑部件和命令管理器之间建立两两连接的关系。

在一个实施例中，调用文件对象模型DOM管理器管理多个图层包括：接收超文本标记语言HTML代码和JavaScript脚本；获取HTML代码和JavaScript脚本的对应关系；按对应关系存储HTML代码和JavaScript脚本；在各个图层中，通过HTML代码的HTML节点拼接各组件，其中，每个图层包括多个JavaScript脚本编写的组件。

本发明通过抽象出各个图层，并分别针对各图层的代码对应的内容进行渲染操作，可以简化单页面的生成，并降低开发过程中的出错率。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，并不构成对本发明的限定。在附图中：

图1是为本发明实施例示出的一种页面渲染的框架；

图2A示出了沙箱的一种示意图；

图2B是本发明实施例示出的沙箱的示意图；

图2C是本发明优选实施例示出的一种基于沙箱的页面渲染的框架；

图3是本发明实施例示出的构造页面渲染框架的方法的流程图；

图4是本发明实施例示出的生成页面方法的流程图；以及

图5是本发明优选实施例示出的生成页面方法的流程图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，下面结合附图对本发明实施例作进一步详细说明。在此，本发明的示意性实施例及其说明用于解释本发明，但并不作为对本发明的限定。

现在将参考附图进一步详细描述本发明。本发明可以许多不同的形式来实现，不应该被理解为仅限于此处所阐述的实施例。这些实施例只作为示例提供，以便为本领域技术人员提供对本发明的完全理解。

本发明实施例所指的页面均为基于互联网的单页面应用（webapp）。

图1为本发明实施例示出的一种页面渲染的框架100。如图1所示，该框架100包括命令管理器CmdManager110、文件对象模型（Document Object Model，简称为DOM）管理器120、和逻辑部件130等。

CmdManager110用于根据用户作用于计算设备上的动作获取用户行为，并根据获取到的用户行为生成请求指令。

本实施例中，CmdManager110可以通过各种命令（Cmd）115管理用户行为，用户行为包括点击、拖动等，这些行为对应不同的命令提示符Cmd，Cmdmanager110接收到Cmd后，生成相应的请求指令。

DOM管理器120与CmdManager110连接,用于管理多个图层125,例如图层125-1、图层125-2...图层125-n（n为自然数，且n大于等于2），并确定CmdManager110生成的请求指令对应的目标图层。

图层是一个代码层面的概念，计算设备上的一次前端展示对应一个图层，即每次计算设备上构成一次前端展示的所有代码对应一个图层。计算设备指台式电脑、笔记本电脑、平板电脑（PAD）、掌上电脑（PDA）和手机等带有计算功能、且有显示单元（如显示屏等）可以进行前端展示并可与服务器进行远程通信的终端设备。一个图层中可以包括多个组件，组件是以Javascript编写的脚本文件的代码，组件之间通过超文本标记语言（Hypertext MarkupLanguage，简称为HTML）编写的代码联系在一起，图层就是这些JavaScript代码和HTML代码的集合，DOM管理器120可以通过索引功能管理多个图层。

逻辑部件130分别与DOM管理器120和CmdManager110连接，用于根据请求指令将目标图层中的内容渲染到页面上，从而在计算设备上形成对应的前端展示。其中，请求指令是由CmdManager120生成的，目标图层由DOM管理器110管理。

逻辑部件130在一定程度上减小了页面开发的工作量的复杂程度，但是对于占用更多开发时间的页面展示部分，现有技术没能提供更高效的开发手段。本实施例中，展示内容以组件为单位，分布在多个图层上，页面渲染的框架100通过对用户行为的管理，确定目标图层，将目标图层中的内容渲染到页面上，这种分层渲染的结构一方面使页面渲染的框架100更加清晰，减小开发过程中出现错误的可能性，另一方面可以仅对需要展示的内容进行渲染，相比于现有技术将所有内容进行渲染并对不展示内容进行隐藏的方式，减小了页面展示的工作量，因此，通过本实施例提供的框架100，可以简化页面生成的流程。

进一步地，本实施例还可以根据具体功能将逻辑部件130细化为多个功能模块135-1、135-2…135-n(其中n为自然数，且n大于等于2)，每个功能模块分别对应渲染操作中的一项逻辑功能，例如：获取数据、构图和着色等，每个功能模块都是独立封装的，封装后的功能模块对应计算设备的本地系统里的一段功能定义代码，通过改变本地系统里的功能定义代码可以对该功能模块进行操作。本地系统是指已安装/运行于该计算设备之上而无需通过联网进行远程下载的系统/软件/应用等。因此对于CmdManager110的请求指令，每次仅由特定的功能模块进行响应即可。

每次渲染操作包括多个步骤，为了简化对整个渲染操作的描述，本实施例将渲染操作抽象为两个步骤，获取数据和页面渲染。例如：当前页面需要在前端分别展示含有某特定页面内容（如用户排行榜）的详情页和列表页（分别对应图层125-1及图层125-2）。因该用户排行榜内容需从服务器获取，则负责获取数据的功能模块135-1可以从服务器140上获取相应排行榜的数据。负责渲染详情页面结构的功能模块135-2可以将图层125-1上的内容渲染到页面上，从而在前端展示含有用户排行榜的详情页。负责渲染列表的功能模块135-3可以将图层125-2上的内容渲染到页面上，从而在前端展示含有用户排行榜的详情页。

将逻辑部件划分为多个功能模块后，各功能的逻辑关系会更加清晰。

在一示例性的实施例中，为了保证各功能模块135-1至135-n的独立性，可以通过沙箱阻止多个功能模块互相操作。

沙箱是一个虚拟的执行环境，在沙箱内所做的任何写磁盘操作，都将重定向到一个特定的文件夹中，沙箱的实质在于对预设的代码进行隔离，例如，预设对下载的远程代码（例如Applet）进行隔离，那么本地代码可以访问重要的系统资源（例如：文件系统），而下载的远程代码（Applet）只能访问沙箱内提供的有限资源。

图2A示出了沙箱的一种示意图沙箱210。如图2A所示，本地代码202，如Java应用程序是不被隔离的，因此可以任意地访问本地系统206中的所有资源，本地系统206也可对其进行操作；而对于经远程下载后通过浏览器运行的远程代码204，如Applet，则是被隔离的，被放在沙箱210中运行，在沙箱210中运行的Applet没有读写文件、监听和读写Socket以及退出Java系统的权限。沙箱210的这一功能使计算设备的本地系统206具有较高的安全性。

本实施例将多个功能模块存储在沙箱里，图2B是本发明实施例示出的沙箱的示意图，如图2B所示，位于沙箱210中的功能模块135-1至135-n由于权限较低，无法访问当前计算设备的本地系统中的功能定义代码220，而本地系统中的功能定义代码220可用于操作各个功能模块135-1至135-n,因此沙箱210起到了阻止各功能模块135-1至135-n之间的互相操作的作用，从而保证了各功能模块不会受到其他模块的干扰。

出于安全性考虑，要求各功能模块之间不能相互操作，但是在有些情况下需要进行通讯，本实施例中各功能模块通过事件分发的机制完成通讯。具体地，可以通过发布/订阅的方式，即功能模块对通讯消息进行发布和订阅，发布及接收通讯消息的功能模块仅按照消息分类对相应消息进行发布及接收，而无需指定发布及接收对象。例如，如前所述，功能模块135-1用于获取数据，功能模块135-2和135-3分别进行不同结构的渲染，功能模块135-1作为消息的发送者（发布者）时，将发布的消息分为不同的类别，如功能模块135-1已获取功能模块135-2所需的数据，或功能模块135-1已获取功能模块135-3所需的数据，而不需要知道什么样的订阅者订阅。作为订阅者的功能模块如果需要获知其中的一个或多个类别的信息，只需接收其需要获知的消息，而不需要知道是什么样的发布者发布的消息，例如功能模块135-2只接收与之相关的消息。这种关系可以允许功能模块更好的可扩展性和更为动态的网络拓扑，在该框架中添加一个功能模块或减少一个功能模块对其他的功能模块不会产生影响，且后被调用的功能模块可以接收到先被调用的功能模块发出的信息，从而实现各功能模块的“即插即用”，即需要实现某一项功能时，仅调用对应的功能模块即可。

图2C为本发明另一实施例示出的一种页面渲染的框架200。图2C中与图1附图标记相同的部件有相同/相似的作用，在此不再赘述。如图2C所示，页面渲染的架构200通过沙箱210调用相应的功能模块135-1至135-n。例如，通过调用负责获取数据的功能模块135-1从服务器140上请求相应的数据，利用相应数据实现渲染操作中的各项功能，从而实现了将图层125-1至125-n中的某一图层的内容渲染到页面上。

本发明实施例还提供了一种构造页面渲染框架的方法300，图3是本发明实施例示出的构造页面渲染框架的方法的流程图，对图3的说明是结合图1及图2C进行的。如图3所示，该方法包括如下步骤：

步骤310，调用命令管理器110，其中，命令管理器110用于根据用户作用于计算设备上的动作获取用户行为，根据用户行为生成请求指令115。

步骤320，生成支持多图层管理的DOM管理器120，并确定请求指令115对应的目标图层。

通过HTML代码和JavaScript脚本的对应关系可以划分出各图层并对其进行管理，优选地，本实施例通过HTML和JavaScript的高度耦合实现对图层准确地管理和划分，一般而言，HTML和JavaScript应该尽量解耦以提高可扩展性和灵活性，本实施例使HTML和JavaScript高度耦合，提高了架构的规范性，从而DOM管理器可以清晰地抽象出图层。具体操作包括以下步骤1至步骤4：

步骤1，接收HTML代码和JavaScript脚本。

步骤2，获取HTML代码和JavaScript脚本的对应关系。

由于编写的HTML代码和JavaScript脚本是高度耦合的，所以HTML代码和JavaScript脚本的对应关系比较清晰，易于识别。

步骤3，按对应关系存储HTML代码和JavaScript脚本。

步骤4，在各个图层中，通过HTML代码的HTML节点拼接各组件，其中，每个图层包括多个JavaScript脚本编写的组件。

如前所述，图层是由多个拼接的组件组成，组件是以Javascript编写的脚本文件的代码，组件之间通过HTML编写的代码联系在一起，图层就是这些JavaScript代码和HTML代码的集合。在每个组件里聚合了一个HTML节点，即该组件的根节点，通过拼接这些节点可以完成对各组件的拼接，拼接在一起的组件组成一个图层。

每个图层也会聚合一个HTML节点，作为该图层的根节点。命令管理器在生成请求指令的过程中，会计算出下一个图层的HTML节点，并将该HTML节点的标识置于该请求指令中，DOM管理器根据该请求指令中HTML节点的标识，即可确定目标图层。

步骤330，将逻辑功能封装为逻辑部件130。

优选地，为了减少对资源的占用，还可以将逻辑功能封装为多个功能模块，每种逻辑功能对应一个功能模块，从而对特定的逻辑功能仅用调用特定的功能模块即可。为了避免各功能模块相互操作，还可以创建沙箱210，并将功能模块放在沙箱210中。

340，在DOM管理器120、逻辑部件130和命令管理器110之间建立两两连接的关系。连接后的框架结构如图1或图2C所示。

本发明实施例还提供了一种生成页面的方法400。图4是本发明实施例示出的生成页面方法的流程图，图4结合图1及图2C进行描述。如图4所示，该方法包括如下步骤：

步骤410，根据用户作用于计算设备的动作获取用户行为。

用户行为可以是点击、拖动等操作。

步骤420，根据用户行为生成请求指令。

步骤430，确定构成页面的多个图层中用户行为对应的目标图层。

步骤440，根据请求指令，将目标图层中的内容渲染到页面上。

执行渲染操作的过程是通过多个功能模块实现的，每个封装好的功能模块都可以完成一定的功能，例如获取数据、搜索数据等，通过多个功能的组合，可以实现对该页面的渲染。

本发明实施例对不同图层的代码所对应的内容分别进行渲染，逻辑结构更加清晰，减小了进行前端开发时出错的概率。

图5是本发明优选实施例示出的生成页面方法的流程图500，图5结合图1及图2C进行描述。如图5所示，该方法包括如下步骤：

步骤501，获取到用户的点击行为。

结合实例，例如用户点击视频频道的详情页。

步骤502，根据该行为生成请求指令。

步骤503，确定图层125-1为目标图层。

DOM管理器根据该请求指令可以得出，请求开始渲染的是“详情页”图层中的代码对应的内容，而该“详情页”对应的图层为图层125-1。

步骤504，调用获取数据的功能模块135-1。

功能模块135-1向服务器140发出请求，希望获取到详情页的数据。

步骤505，接收功能模块135-1发出的消息，获知功能模块135-1已经获取到所需的数据。

功能模块135-1获取到所需数据后，会向渲染的框架100或200发出消息。

步骤506，调用展示图层A的功能模块135-2，使功能模块135-2将功能模块135-1获取的数据和图层125-1上的其他内容渲染到页面上。

功能模块135-1和功能模块135-2都是独立封装的，且功能模块135-1和功能模块135-2均存储于沙箱中，渲染的框架在得知已获取到展示页面所需的数据后，调用进行渲染操作的功能模块135-2，功能模块135-2开始渲染。

具体地，渲染和展示页面的操作可以细分为对多个组件的展示，一个页面上可以包括多个组件。

步骤507，获取到用户的拖动行为。

用户看完详情页的内容后，通过划屏进入列表页。

步骤508，根据该行为生成请求指令。

步骤509，确定图层125-2为目标图层。

DOM管理器根据该请求指令可以得出，请求开始渲染的是“列表页”图层中的代码对应的内容。

步骤510，接收功能模块135-1新发出的消息，获知功能模块135-1已经获取到展示图层125-2所需的数据。

功能模块135-1向服务器发出新的请求，希望获取到列表页的数据。

步骤511，调用展示图层125-2的功能模块135-3，使功能模块135-3将功能模块135-1获取的数据和图层125-2上的其他内容渲染到页面上。

渲染的架构在得知已获取到展示页面所需的数据后，调用该进行渲染操作的功能模块135-3，功能模块135-3开始渲染该页面。

通过本实施例，可以简化页面展示的流程，并减小出错率，提高了前端页面展示的开发效率。

本领域技术人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。本领域技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。

结合本文中所公开的实施例描述的方法或算法的步骤可以用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器（RAM）、内存、只读存储器（ROM）、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。

以上的具体实施方式，对本发明的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上仅为本发明的具体实施方式而已，并不用于限定本发明的保护范围，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (12)

1.一种在计算设备上进行页面渲染的框架，其特征在于，包括：

命令管理器，用于根据用户作用于所述计算设备上的动作获取用户行为，根据所述用户行为生成请求指令；

文件对象模型DOM管理器，与所述命令管理器连接，用于管理构成所述页面的多个图层，并确定所述请求指令对应的目标图层；

逻辑部件，分别与所述DOM管理器和所述命令管理器连接，用于根据所述请求指令将所述目标图层中的内容渲染到所述页面上。

2.根据权利要求1所述的框架，其特征在于，所述逻辑部件包括：

多个功能模块，每个功能模块分别对应渲染操作中的一项逻辑功能。

3.根据权利要求2所述的框架，其特征在于，还包括：

沙箱，用于存储所述多个功能模块，以阻止所述多个功能模块互相操作。

4.根据权利要求2所述的框架，其特征在于，所述多个功能模块包括通过服务器获取数据的功能模块，用于从服务器获取所述页面渲染所需的数据。

5.根据权利要求1所述的框架，其特征在于，所述DOM管理器通过索引管理所述多个图层。

6.一种在计算设备上生成页面的方法，其特征在于，包括：

根据用户作用于所述计算设备的动作获取用户行为，并根据所述用户行为生成请求指令；

确定构成所述页面的多个图层中所述用户行为对应的目标图层；

根据所述请求指令，将所述目标图层中的内容渲染到所述页面上。

7.根据权利要求6所述的方法，其特征在于，将所述目标图层中的内容渲染到所述页面上包括：

通过多个功能模块完成所述渲染操作，其中，每个所述功能模块对应一项逻辑功能。

8.根据权利要求7所述的方法，其特征在于，所述多个功能模块中的每个功能模块都是独立封装的。

9.根据权利要求8所述的方法，其特征在于，所述多个功能模块存储于沙箱中，所述沙箱用于阻止所述多个功能模块互相操作。

10.根据权利要求6所述的方法，其特征在于，通过多个功能模块将所述目标图层中的内容渲染到所述页面上包括：

从服务器获取所述目标图层所需的数据；

根据所述数据，将所述目标图层中的代码对应的内容渲染到所述页面上。

11.一种构造页面渲染框架的方法，其特征在于，包括：

调用命令管理器，其中，所述命令管理器用于获取用户行为，根据所述用户行为生成请求指令；

调用文件对象模型DOM管理器管理多个图层，并确定所述请求指令对应的目标图层；

将逻辑功能封装为逻辑部件；

在所述DOM管理器、所述逻辑部件和所述命令管理器之间建立两两连接的关系。

12.根据权利要求11所述的方法，其特征在于，调用文件对象模型DOM管理器管理多个图层包括：

接收超文本标记语言HTML代码和JavaScript脚本；

获取所述HTML代码和所述JavaScript脚本的对应关系；

按所述对应关系存储所述HTML代码和所述JavaScript脚本；

在各个图层中，通过所述HTML代码的HTML节点拼接各组件，其中，每个图层包括多个所述JavaScript脚本编写的组件。

Images