CN108304169B - 针对html5应用的实现方法、装置和设备 - Google Patents

Abstract

本发明提供了一种针对HTML5应用的实现方法、装置和设备，其中方法包括：创建基于同一页面的各场景的场景文件，所述场景文件包括执行文件、模板文件和样式文件；其中，若场景的执行文件被调用，则创建视图并依据对应场景的模板文件和样式文件进行视图填充。通过这种方式，开发者仅需要针对各场景编写执行文件并设置模板文件和样式文件，即可实现对于HTML5应用的各场景开发，开发过程非常简明和友好。

Description

针对HTML5应用的实现方法、装置和设备

【技术领域】

本发明涉及计算机应用技术领域，特别涉及一种针对HTML5应用的实现方法、装置和设备。

【背景技术】

随着移动设备的不断普及，移动应用程序得到了迅猛发展，重心逐渐由互联网端应用程序转向移动设备端应用程序。目前移动应用程序主要分为三类：原生应用程序、HTML5(HyperText Markup Language 5，第5代超文本标记语言)应用程序和混合应用程序。其中，原生应用程序指的是使用移动平台支持的开发工具或语言所开发的应用程序，也就是说是特别针对某种操作系统开发的，例如iOS(苹果公司的操作系统)、Android(安卓)等操作系统。HTML5应用程序使用标准的Web(页面)技术，通常是HTML5、JavaScript和CSS(Cascading Style Sheets，层叠样式表)，其本质是为移动浏览器设计的基于Web的应用，其可以在各种操作系统的浏览器上运行。混合应用程序指的是原生应用程序和HTML5应用程序的混合体，即将HTML5应用程序嵌入到一个原生容器中。

其中HTML5应用程序因其具有的无需安装包下载、实时更新等优势，得到了越来越多的应用。但目前仅存在针对PC端的MPA(Multi-page Application，多场景应用)的开发方式，例如jQuery Mobile。针对移动设备端的SPA(Single-page Application，单页面应用)，尚没有很好的开发方式。

【发明内容】

有鉴于此，本发明提供了一种针对HTM5应用的实现方法、装置和设备，以便于实现针对HTML5SPA的开发。

具体技术方案如下：

本发明提供了一种针对HTML5应用的实现方法，该方法包括：

创建基于同一页面的各场景的场景文件，所述场景文件包括执行文件、模板文件和样式文件；

其中，若场景的执行文件被调用，则创建视图并依据对应场景的模板文件和样式文件进行视图填充。

根据本发明一优选实施方式，该方法还包括：创建入口文件，所述入口文件包括入口模板文件和入口执行文件；

其中若所述入口执行文件被调用，则执行初始化，依据所述入口模板文件创建页面，并调用初始场景的执行文件。

根据本发明一优选实施方式，该方法还包括：

若从当前场景进入下一场景，则调用所述下一场景的执行文件。

根据本发明一优选实施方式，该方法还包括：

若从当前场景回退至上一场景，则删除当前场景的视图。

根据本发明一优选实施方式，若从当前场景进入下一场景，则将下一场景的执行文件压入栈顶；

若从当前场景回退至上一场景，则将当前场景的执行文件弹出栈顶；

其中，对新压入栈顶的执行文件进行调用，对新弹出栈顶的执行文件删除其创建的视图。

根据本发明一优选实施方式，该方法还包括：

创建资源文件，所述资源文件包括多媒体资源文件，所述多媒体资源文件用于进行所述视图填充时被调用，或者用于所开发应用的图标。

根据本发明一优选实施方式，该方法还包括：

创建组件文件，所述组件文件用于进行所述视图填充时被调用。

根据本发明一优选实施方式，该方法还包括：

向用户提供生命周期事件类型；

创建各场景的生命周期事件以及各生命周期事件对应的执行函数；

其中若某场景的生命周期事件被调用，则执行该场景的生命周期事件对应的执行函数。

根据本发明一优选实施方式，所述生命周期事件类型包括以下至少一种：

场景创建事件、场景重载事件、场景被覆盖事件和场景退出事件。

本发明还提供了一种设备，包括

存储器，包括一个或者多个程序；

一个或者多个处理器，耦合到所述存储器，执行所述一个或者多个程序，以实现以下操作：

创建基于同一页面的各场景的场景文件，所述场景文件包括执行文件、模板文件和样式文件；

其中，若场景的执行文件被调用，则创建视图并依据对应场景的模板文件和样式文件进行视图填充。

根据本发明一优选实施方式，所述操作还包括：创建入口文件，所述入口文件包括入口模板文件和入口执行文件；

其中若所述入口执行文件被调用，则执行初始化，依据所述入口模板文件创建页面，并调用初始场景的执行文件。

根据本发明一优选实施方式，所述操作还包括：

若从当前场景进入下一场景，则调用所述下一场景的执行文件。

根据本发明一优选实施方式，所述操作还包括：

若从当前场景回退至上一场景，则删除当前场景的视图。

根据本发明一优选实施方式，若从当前场景进入下一场景，则将下一场景的执行文件压入栈顶；

若从当前场景回退至上一场景，则将当前场景的执行文件弹出栈顶；

其中，对新压入栈顶的执行文件进行调用，对新弹出栈顶的执行文件删除其创建的视图。

根据本发明一优选实施方式，所述操作还包括：

创建资源文件，所述资源文件包括多媒体资源文件，所述多媒体资源文件用于进行所述视图填充时被调用，或者用于所开发应用的图标。

根据本发明一优选实施方式，所述操作还包括：

创建组件文件，所述组件文件用于进行所述视图填充时被调用。

根据本发明一优选实施方式，所述操作还包括：

向用户提供生命周期事件类型；

创建各场景的生命周期事件以及各生命周期事件对应的执行函数；

其中若某场景的生命周期事件被调用，则执行该场景的生命周期事件对应的执行函数。

根据本发明一优选实施方式，所述生命周期事件类型包括以下至少一种：

场景创建事件、场景重载事件、场景被覆盖事件和场景退出事件。

本发明还提供了一种针对HTML5应用的实现装置，该装置包括：

文件创建单元，用于创建基于同一页面的各场景的场景文件，所述场景文件包括执行文件、模板文件和样式文件；

其中，所述场景的执行文件，用于被调用时创建视图，并依据对应场景的模板文件和样式文件进行视图填充。

根据本发明一优选实施方式，所述文件创建单元，还用于创建入口文件，所述入口文件包括入口模板文件和入口执行文件；

其中所述入口执行文件，用于被调用时执行初始化，依据所述入口模板文件创建页面，并调用初始场景的执行文件。

根据本发明一优选实施方式，该装置还包括：

文件调用单元，用于若从当前场景进入下一场景，则调用所述下一场景的执行文件。

根据本发明一优选实施方式，该装置还包括：

视图维护单元，用于若从当前场景回退至上一场景，则删除当前场景的视图。

根据本发明一优选实施方式，该装置还包括：

栈维护单元，用于若从当前场景进入下一场景，则将下一场景的执行文件压入栈顶；若从当前场景回退至上一场景，则将当前场景的执行文件弹出栈顶；

所述文件调用单元对新压入栈顶的执行文件进行调用；

所述视图维护单元对新弹出栈顶的执行文件删除其创建的视图。

根据本发明一优选实施方式，所述文件创建单元，还用于创建资源文件，所述资源文件包括多媒体资源文件，所述多媒体资源文件用于进行所述视图填充时被调用，或者用于所开发应用的图标。

根据本发明一优选实施方式，所述文件创建单元，还用于创建组件文件，所述组件文件用于进行所述视图填充时被调用。

根据本发明一优选实施方式，该装置还包括：

事件创建单元，用于向用户提供生命周期事件类型；创建各场景的生命周期事件以及各生命周期事件对应的执行函数；

其中若某场景的生命周期事件被调用，则执行该场景的生命周期事件对应的执行函数。

根据本发明一优选实施方式，所述生命周期事件类型包括以下至少一种：

场景创建事件、场景重载事件、场景被覆盖事件和场景退出事件。

由以上技术方案可以看出，本发明针对HTML5应用提供了一种基于同一页面的不同场景来创建场景文件的方式，场景文件包括执行文件、模板文件和样式文件。其中场景的执行文件被调用，则创建视图并依据对应场景的模板文件和样式文件进行视图填充。通过这种方式，开发者仅需要针对各场景编写执行文件并设置模板文件和样式文件，即可实现对于HTML5应用的各场景开发，开发过程非常简明和友好。

【附图说明】

图1为本发明实施例提供的一种开发文件的组织结构实例图；

图2为本发明实施例提供的开发过程的主要示意图；

图3为本发明实施例提供的开发装置结构图；

图4为本发明实施例提供的设备结构图。

【具体实施方式】

为了使本发明的目的、技术方案和优点更加清楚，下面结合附图和具体实施例对本发明进行详细描述。

在本发明实施例中使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明实施例和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。

应当理解，本文中使用的术语“和/或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符“/”，一般表示前后关联对象是一种“或”的关系。

取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”或“响应于检测”。类似地，取决于语境，短语“如果确定”或“如果检测(陈述的条件或事件)”可以被解释成为“当确定时”或“响应于确定”或“当检测(陈述的条件或事件)时”或“响应于检测(陈述的条件或事件)”。

本发明的核心在于，针对SPA模式，分别针对基于同样页面的不同Scene(场景)来管理场景文件。即分别创建各场景的场景文件，其中场景文件包括执行文件、模板文件和样式文件。其中场景的执行文件被调用，则创建视图并依据对应场景的模板文件和样式文件进行视图填充。这样，对于开发者而言，只需要针对各场景分别编写执行文件并设置模板文件和样式文件，即可实现对于HTML5SPA的各场景开发，开发过程非常简明和友好。

本发明实施例所涉及的“场景”指的是页面上各种元素的组合所体现的内容。例如，对于智能电视而言，打开智能电视后初始界面通常是各功能类目的入口集合，诸如影视类目入口、电影类目入口、少儿类目入口、综艺类目入口等，这一初始界面上所有元素的组合就是一个场景。当进入影视类目后，又会展现一个影视类目下的界面，例如包括各种类影视的类别入口，这一界面上所有的元素组合又是一个场景。再进入一个具体影视的类别后，界面上展示该类别下各具体视频的缩略图和入口，该界面上所有元素组合又是一个场景。

下面结合实施例对提供的整个开发方法进行详述。

SPA顾名思义，就是只有一个Web的应用，浏览器一开始会加载必须的HTML、CSS和JavaScript，之后所有的操作都在这个Web页面上完成，一切都由JavaScript控制。因此，对于SPA的开发而言，最好的HTML、CSS和JavaScript文件组织方式就是针对同一页面的各场景分别组织，其中的HTML对应的就是本发明实施例中的模板文件，css对应的就是本发明实施例中的样式文件，JavaScript对应的就是本发明实施例中的执行文件，即执行文件实际上包含的是JavaScript代码。

各场景的场景文件可以分别依据预设文件组织形式创建于对应文件类型的目录下，各场景的场景文件分别采用对应的场景标识进行标识。例如图1所示。需要说明的是，图1中，project root是本实例中根目录的名称，src、page、index、lib、tpl、img、component、values分别是外部脚本文件、页面文件、索引文件、库文件、模板文件、图片资源文件、组件文件、适配文件在该本实例的目录中的名称，这些名称仅仅是本实例中所举的名称，在实际应用中也可以采用其他名称，本发明对目录中文件的名称并不加以限制。下面对本发明涉及的目录文件中包含的文件内容具体如下：

执行文件被创建于project root->src->page->index目录的scene子目录下，scene1.js、scene2.js、scene3.js等分别标识场景Scene1、Scene2和Scene3的执行文件。对于模板文件可以创建于project root->src->tpl目录下，scene1.html、scene2.html、scene3.html等分别标识场景Scene1、Scene2和Scene3的模板文件。对于样式文件，可以创建于project root->src->lib目录下，scene1.less、scene2.less、scene3.less等分别标识场景Scene1、Scene2和Scene3的样式文件。

当场景Scene1的scene1.js被调用时，scene1.js的代码执行创建视图，并从指定目录下获取scene1.html和scene1.less，并依据scene1.html和scene1.less进行视图填充，最终形成场景Scene1。

场景文件的创建是基于开发者指令执行的，即接收到开发者创建场景文件的指令后，创建场景文件。其中创建场景文件的指令可以包括：创建的场景标识、场景的执行文件、模板文件以及样式文件所包含的内容，还可以包括场景文件的创建位置(即在那个目录下)，等等。其中场景文件的创建位置和组织形式也可以由开发框架预先定义，在创建场景文件时，按照开发框架预先定义的位置和组织形式进行创建。

在进行应用开发时，除了需要开发同一页面的不同场景之外，还需要对应用入口进行开发。因此，还需要创建入口文件，同样入口文件的创建也依据开发者的指令，入口文件可以包括入口模板文件和入口执行文件。入口执行文件包含的也是开发人员编写的JavaScript代码，当入口执行文件被调用时，执行初始化，依据入口模板文件创建页面，并调用初始场景的执行文件。初始化的过程实际上是应用开发平台的启动过程，应用开发平台实际上提供了一个承载和运行开发人员所创建文件的执行环境，主要包括执行引擎，负责执行各种执行文件所包含的代码。

入口模板文件，如图1中所示，可以创建于project root->src->page->index目录下，例如采用index.html标识。入口模板文件用于创建一个空的页面，即打开一个系统窗口后，依据入口模板文件创建一个空的页面，该空的页面用于后续各种场景的填充。

另外，从“入口”进入之后，需要打开一个初始页面，初始页面可以在入口执行文件中指定。如图1中所示，入口执行文件可以创建于project root->src->page->index目录下，采用index.js标识。

各场景的执行文件在什么事件的触发下被调用可以由开发人员指定，例如初始页面默认由index.js调用，其他各场景可以由上一场景中的某个组件被点击的事件触发下被调用，等等。

举一个例子，若从Scene1进入Scene2，则Scene2的执行文件scene2.js被调用。那么原本在页面上显示Scene1对应的视图，scene2.js被调用后，会新建一个视图，并依据scene2.html和scene2.less填充该视图，形成Scene2对应的视图。至此，Scene2对应的视图就覆盖了Scene1对应的视图。若从Scene2继续进入Scene3，则过程类似，最终Scene3对应的视图覆盖Scene2对应的视图。

但若从Scene2回退至Scene1，则需要删除Scene2对应的视图，这样Scene1对应的视图重新显示。

具体调用哪个场景的执行文件，可以由一个栈进行控制，若进入到哪个场景，就将哪个场景的执行文件压入栈顶；从哪个场景回退，则将哪个场景弹出栈顶。对新压入栈顶的执行文件进行调用，对新弹出栈顶的执行文件删除其创建的视图。那么当前显示的场景就是当前位于栈顶的执行文件对应的场景。

除了上述几种文件类型之外，还可以包括但不限于以下几种文件类型：

资源文件。开发人员可以通过开发指令创建资源文件，应用开发平台接收到该开发指令后，创建资源文件。资源文件可以包括诸如图片、视频、音乐等多媒体资源文件。这些资源文件可以在依据场景模板文件进行视图填充时被调用，例如某个场景模板中需要加载一个图片，那么就从资源文件中找到对应图片，将其填充至视图中。资源文件还可以用于应用图标的显示。如图1所示，资源文件可以创建于project root->src目录下，例如图片资源文件可以存放于该目录下的img文件夹。

组件文件。开发人员可以通过开发指令创建组件文件，应用开发平台接收到该开发指令后，创建组件文件。组件文件可以用于进行各场景的视图填充时使用，例如依据场景的模板文件获知在该场景的视图中存在某个或某些组件，则需要从对应组件文件中获取对应组件填充至视图中。如图1所示，组件文件可以创建于project root->src->component目录下。

国际化适配文件。该文件主要用于支持多语言的切换，可以在该文件中设置各场景所包含文字对应的多种语言表述。如图1所示，国际化适配文件可以创建于projectroot->src->res->values目录下。

应用配置文件。该文件主要用于所开发应用在启动运行过程中所需要的配置参数。如图1所示，应用配置文件可以创建于project root->src目录下，标识为manifest.json。

需要说明的是，在图1中除了上述文件之外，还可以包括但不限于一些包含其他辅助信息的文件，例如package.json、README.md、service和util。其中package.json可以用于描述所开发应用的基本信息和节点的依赖关系配置。README.md可以包含所开发应用的说明性文档。service可以用于包含该应用后台需要执行的服务代码。util可以用于存放一些应用级别的可重用的方法集，例如用户可以将一些常用的功能代码作为统一的方法放入util，在应用运行过程中直接从util中调用。

开发平台除了控制各类文件的创建、执行、获取和填充之外，对于不同场景而言，其之间的切换会触发场景的生命周期事件，开发平台可以向开发者提供支持的生命周期事件类型。开发人员可以依据这些生命周期事件类型，通过向开发平台发送开发指令的方式，创建各场景的生命周期事件以及各生命周期事件对应的执行函数。

其中，开发平台提供的生命周期事件类型可以包括但不限于以下几种：

场景创建事件，例如表示为onCreate，指的是场景第一次被加载的事件，包括初始场景的加载调用，即场景的视图被创建。

场景重载事件，例如表示为onResume，指的是场景除了第一次被加载之后的其他加载事件，即场景的视图重新被显示。

场景被覆盖事件，例如表示为onPause，指的是场景的视图被覆盖。

场景退出事件，例如表示为onDestory，指的是场景的视图被删除。

生命周期事件及其对应的执行函数之间的关系为：若某场景的生命周期事件被调用，则执行该场景的生命周期事件对应的执行函数。举一个简单的例子：假设Scene1的视图为播放一个视频，那么可以定义该Scene1的onPause对应的执行函数为：暂停视频播放。那么当从Scene1进入到其他Scene后，Scene1被覆盖，即Scene1的onPause事件被调用，就触发执行暂停视频播放的函数。

上述开发过程的主要示意图可以如图2中所示。入口执行文件index.js被调用，index.js执行初始化，并依据入口模板文件index.html创建一个空的页面容器，并调用初始场景Scene1的执行文件scene1.js。各场景的场景文件主要包括：模板文件、样式文件和执行文件，以Scene1为例，包括scene1.html、scene1.less和scene1.js。scene1.js被调用后，创建Scene1的视图，并依据scene1.html、scene1.less进行视图填充，从而显示出Scene1的视图。

从Scene1可以进入Scene2，进入Scene2时，Scene2的执行文件被调用。Scene2.js被调用后，创建视图，并依据scene2.html、scene2.less进行视图填充，从而显示出Scene2的视图，Scene1的视图被覆盖。从Scene2可以进入Scene3，等等。另外，从Scene2可以回退至Scene1，回退时，Scene2的视图被删除，Scene1的视图重新显示。

对于开发人员利用该开发平台开发的应用，开发平台可以进一步进行编译，并在浏览器上进行调试。该部分内容可以采用现有实现方式，本发明对此并不加以限制。

上述方法的执行主体可以为开发平台，可以体现为一种针对HTML5应用的开发装置，该装置可以位于本地终端的应用，或者还可以为位于本地终端的应用中的插件或软件开发工具包(Software Development Kit，SDK)等功能单元，或者，还可以位于服务器端，本发明实施例对此不进行特别限定。

图3为本发明实施例提供的开发装置结构图，如图3所示，该装置可以包括：文件创建单元01，还可以包括文件调用单元02、视图维护单元03、栈维护单元04和事件创建单元05。其中各组成单元的主要功能如下：

文件创建单元01主要负责创建以下文件：

1)创建基于同一页面的各场景的场景文件，场景文件包括执行文件、模板文件和样式文件。其中，场景的执行文件，用于被调用时创建视图，并依据对应场景的模板文件和样式文件进行视图填充。

2)创建入口文件，入口文件包括入口模板文件和入口执行文件。其中入口执行文件，用于被调用时执行初始化，依据入口模板文件创建页面，并调用初始场景的执行文件。

3)创建资源文件，资源文件包括多媒体资源文件，多媒体资源文件用于进行视图填充时被调用，或者用于所开发应用的图标。

4)创建组件文件，组件文件用于进行视图填充时被调用。

除了上述几种文件之外，还可以创建如下文件：

5)国际化适配文件。该文件主要用于支持多语言的切换，可以在该文件中设置各场景所包含文字对应的多种语言表述。

6)应用配置文件。该文件主要用于所开发应用在启动运行过程中所需要的配置参数。

上述文件的创建均基于开发人员的创建指令。

在同一页面窗口下，若从当前场景进入下一场景，则文件调用单元02负责调用下一场景的执行文件，由下一场景的执行文件创建视图，并依据下一场景的模板文件和样式文件填充视图，这样下一场景的视图就覆盖了当前场景的视图。若从当前场景回退至上一场景，则视图维护单元03删除当前场景的视图。

对于执行文件的调用维护可以由栈维护单元04实现，具体地，若从当前场景进入下一场景，则栈维护单元04将下一场景的执行文件压入栈顶；若从当前场景回退至上一场景，则栈维护单元04将当前场景的执行文件弹出栈顶。其中，文件调用单元02负责对新压入栈顶的执行文件进行调用；视图维护单元03负责对新弹出栈顶的执行文件删除其创建的视图。

对于不同场景而言，其之间的切换会触发场景的生命周期事件，事件创建单元05负责向开发者提供生命周期事件类型；可以依据开发人员的开发指令，创建各场景的生命周期事件以及各生命周期事件对应的执行函数。其中若某场景的生命周期事件被调用，则执行该场景的生命周期事件对应的执行函数。

其中，生命周期事件类型可以包括以下至少一种：

场景创建事件，例如表示为onCreate，指的是场景第一次被加载的事件，包括初始场景的加载调用，即场景的视图被创建。

场景重载事件，例如表示为onResume，指的是场景除了第一次被加载之后的其他加载事件，即场景的视图重新被显示。

场景被覆盖事件，例如表示为onPause，指的是场景的视图被覆盖。

场景退出事件，例如表示为onDestory，指的是场景的视图被删除。

生命周期事件及其对应的执行函数之间的关系为：若某场景的生命周期事件被调用，则执行该场景的生命周期事件对应的执行函数。

本发明实施例提供的上述方法和装置可以以设置并运行于设备中的计算机程序体现。该设备可以包括一个或多个处理器，还包括存储器和一个或多个程序，如图4中所示。其中该一个或多个程序存储于存储器中，被上述一个或多个处理器执行以实现本发明上述实施例中所示的方法流程和/或装置操作。例如，被上述一个或多个处理器执行的方法流程，可以包括：

创建基于同一页面的各场景的场景文件，所述场景文件包括执行文件、模板文件和样式文件；

其中，若场景的执行文件被调用，则创建视图并依据对应场景的模板文件和样式文件进行视图填充。

举一个应用场景：

智能电视因其硬件功能的限制，使得智能电视端的应用适合于比较典型的HTML5SPA，那么就可以采用本发明实施例中所采用的上述开发方法和开发平台，对智能电视端的应用进行开发。

但需要说明的是，该应用场景并不用于限制本发明，除了智能电视之外，本发明实施例提供的开发方法和开发平台可以适用于各种用户设备的HTML5SPA开发，包括但不限于：智能移动终端、智能家居设备、网络设备、可穿戴式设备、智能医疗设备、PC(个人计算机)等。其中智能移动设备可以包括诸如手机、平板电脑、笔记本电脑、PDA(个人数字助理)、互联网汽车等。智能家居设备可以包括智能家电设备，诸如智能电视、智能空调、智能热水器、智能冰箱、智能空气净化器等等，智能家居设备还可以包括智能门锁、智能插座、智能电灯、智能摄像头等。网络设备可以包括诸如交换机、无线AP、服务器等。可穿戴式设备可以包括诸如智能手表、智能眼镜、智能手环、虚拟现实设备、增强现实设备、混合现实设备(即可以支持虚拟现实和增强现实的设备)等等。智能医疗设备可以包括诸如智能体温计、智能血压仪、智能血糖仪等等。

由以上描述可以看出，本发明实施例提供的上述方法、装置和设备可以具备以下优点：

1)针对HTML5SPA提供了一种简明、友好的开发方式和开发平台。

2)在文件组织方式上，优选各类型文件分离的组织方式，使得开发过程更友好。

3)针对同一页面的各场景分别提供了生命周期式的管理模式。

在本发明所提供的几个实施例中，应该理解到，所揭露的装置、设备和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(processor)执行本发明各个实施例所述方法的部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (27)

1.一种针对HTML5单页面应用的实现方法，其特征在于，该方法包括：

创建基于同一页面的各场景的场景文件，以针对基于同一页面的各场景来管理场景文件，所述场景文件包括执行文件、模板文件和样式文件，所述执行文件是针对各场景分别编写的；

其中，若场景的执行文件被调用，则创建视图并依据对应场景的模板文件和样式文件进行视图填充。

2.根据权利要求1所述的方法，其特征在于，该方法还包括：创建入口文件，所述入口文件包括入口模板文件和入口执行文件；

其中若所述入口执行文件被调用，则执行初始化，依据所述入口模板文件创建页面，并调用初始场景的执行文件。

3.根据权利要求1所述的方法，其特征在于，该方法还包括：

若从当前场景进入下一场景，则调用所述下一场景的执行文件。

4.根据权利要求3所述的方法，其特征在于，该方法还包括：

若从当前场景回退至上一场景，则删除当前场景的视图。

5.根据权利要求4所述的方法，其特征在于，若从当前场景进入下一场景，则将下一场景的执行文件压入栈顶；

若从当前场景回退至上一场景，则将当前场景的执行文件弹出栈顶；

其中，对新压入栈顶的执行文件进行调用，对新弹出栈顶的执行文件删除其创建的视图。

6.根据权利要求1所述的方法，其特征在于，该方法还包括：

创建资源文件，所述资源文件包括多媒体资源文件，所述多媒体资源文件用于进行所述视图填充时被调用，或者用于所开发应用的图标。

7.根据权利要求1所述的方法，其特征在于，该方法还包括：

创建组件文件，所述组件文件用于进行所述视图填充时被调用。

8.根据权利要求1所述的方法，其特征在于，该方法还包括：

向用户提供生命周期事件类型；

创建各场景的生命周期事件以及各生命周期事件对应的执行函数；

其中若某场景的生命周期事件被调用，则执行该场景的生命周期事件对应的执行函数。

9.根据权利要求8所述的方法，其特征在于，所述生命周期事件类型包括以下至少一种：

场景创建事件、场景重载事件、场景被覆盖事件和场景退出事件。

10.一种针对HTML5单页面应用的实现设备，包括

存储器，包括一个或者多个程序；

一个或者多个处理器，耦合到所述存储器，执行所述一个或者多个程序，以实现以下操作：

创建基于同一页面的各场景的场景文件，以针对基于同一页面的各场景来管理场景文件，所述场景文件包括执行文件、模板文件和样式文件，所述执行文件是针对各场景分别编写的；

其中，若场景的执行文件被调用，则创建视图并依据对应场景的模板文件和样式文件进行视图填充。

11.根据权利要求10所述的设备，其特征在于，所述操作还包括：创建入口文件，所述入口文件包括入口模板文件和入口执行文件；

其中若所述入口执行文件被调用，则执行初始化，依据所述入口模板文件创建页面，并调用初始场景的执行文件。

12.根据权利要求10所述的设备，其特征在于，所述操作还包括：

若从当前场景进入下一场景，则调用所述下一场景的执行文件。

13.根据权利要求12所述的设备，其特征在于，所述操作还包括：

若从当前场景回退至上一场景，则删除当前场景的视图。

14.根据权利要求13所述的设备，其特征在于，若从当前场景进入下一场景，则将下一场景的执行文件压入栈顶；

若从当前场景回退至上一场景，则将当前场景的执行文件弹出栈顶；

其中，对新压入栈顶的执行文件进行调用，对新弹出栈顶的执行文件删除其创建的视图。

15.根据权利要求10所述的设备，其特征在于，所述操作还包括：

创建资源文件，所述资源文件包括多媒体资源文件，所述多媒体资源文件用于进行所述视图填充时被调用，或者用于所开发应用的图标。

16.根据权利要求10所述的设备，其特征在于，所述操作还包括：

创建组件文件，所述组件文件用于进行所述视图填充时被调用。

17.根据权利要求10所述的设备，其特征在于，所述操作还包括：

向用户提供生命周期事件类型；

创建各场景的生命周期事件以及各生命周期事件对应的执行函数；

其中若某场景的生命周期事件被调用，则执行该场景的生命周期事件对应的执行函数。

18.根据权利要求17所述的设备，其特征在于，所述生命周期事件类型包括以下至少一种：

场景创建事件、场景重载事件、场景被覆盖事件和场景退出事件。

19.一种针对HTML5单页面应用的实现装置，其特征在于，该装置包括：

文件创建单元，用于创建基于同一页面的各场景的场景文件，以针对基于同一页面的各场景来管理场景文件，所述场景文件包括执行文件、模板文件和样式文件，所述执行文件是针对各场景分别编写的；

其中，所述场景的执行文件，用于被调用时创建视图，并依据对应场景的模板文件和样式文件进行视图填充。

20.根据权利要求19所述的装置，其特征在于，所述文件创建单元，还用于创建入口文件，所述入口文件包括入口模板文件和入口执行文件；

其中所述入口执行文件，用于被调用时执行初始化，依据所述入口模板文件创建页面，并调用初始场景的执行文件。

21.根据权利要求19所述的装置，其特征在于，该装置还包括：

文件调用单元，用于若从当前场景进入下一场景，则调用所述下一场景的执行文件。

22.根据权利要求21所述的装置，其特征在于，该装置还包括：

视图维护单元，用于若从当前场景回退至上一场景，则删除当前场景的视图。

23.根据权利要求22所述的装置，其特征在于，该装置还包括：

栈维护单元，用于若从当前场景进入下一场景，则将下一场景的执行文件压入栈顶；若从当前场景回退至上一场景，则将当前场景的执行文件弹出栈顶；

所述文件调用单元对新压入栈顶的执行文件进行调用；

所述视图维护单元对新弹出栈顶的执行文件删除其创建的视图。

24.根据权利要求19所述的装置，其特征在于，所述文件创建单元，还用于创建资源文件，所述资源文件包括多媒体资源文件，所述多媒体资源文件用于进行所述视图填充时被调用，或者用于所开发应用的图标。

25.根据权利要求19所述的装置，其特征在于，所述文件创建单元，还用于创建组件文件，所述组件文件用于进行所述视图填充时被调用。

26.根据权利要求19所述的装置，其特征在于，该装置还包括：

事件创建单元，用于向用户提供生命周期事件类型；创建各场景的生命周期事件以及各生命周期事件对应的执行函数；

其中若某场景的生命周期事件被调用，则执行该场景的生命周期事件对应的执行函数。

27.根据权利要求26所述的装置，其特征在于，所述生命周期事件类型包括以下至少一种：

场景创建事件、场景重载事件、场景被覆盖事件和场景退出事件。

Images