一种单页应用设计方法及系统与流程

本申请涉及计算机应用技术领域，更具体地说，涉及一种单页应用设计方法及系统。

背景技术：

单页应用，顾名思义是指只有一张web(worldwideweb，万维网)页面的应用，广泛应用于机顶盒等设备中。浏览器在打开单页应用过程中，会加载必须的内容源码(hypertextmarkuplanguage，html)、样式源码(cascadingstylesheets，css)和交互逻辑源码(javascript)，之后所有的操作都在这张页面上完成。

现有技术中在开发单页应用时，通常依赖appcms和iframe进行，首先通过在appcms后台的内容管理功能中确定可用的素材内容，然后利用iframe的方式编写代码实现确定的素材内容的呈现样式，从而完成单页应用的开发。

但是利用iframe开发单页应用存在较为明显的缺点，其中较为明显的是：iframe的使用会大大降低浏览器的加载速度，并且部分机顶盒对iframe存在兼容不稳定的现象，这将使得页面的渲染速度降低，影响了用户体验。

技术实现要素：

为解决上述技术问题，本发明提供了一种单页应用设计方法及系统，以实现提升加载速度，提升页面渲染速度的目的。

为实现上述技术目的，本发明实施例提供了如下技术方案：

一种单页应用设计方法，包括：

获取单页应用数据；

拆分所述单页应用数据，获得关键字数据集合，所述关键字数据集合中包括至少一条关键字数据；

抽取所述关键字数据集合中的一条关键字数据，抽取的关键字数据从所述关键字数据集合中剔除；

根据抽取的所述关键字数据中的关键字查询预设数据库，确定与所述关键字匹配的应用模板；

判断所述关键字数据集合是否为空，如果是，则将确定的应用模板进行拼接，获得单页应用；如果否，则返回抽取所述关键字数据集合中的一条关键字数据的步骤；

所述预设数据库中存储有应用模板与关键字数据的对应关系，所述应用模板绑定有样式。

可选的，所述预设数据库的形成过程包括：

将所述应用模板与样式进行绑定；

根据所述应用模板的功能确定关键词数据，将所述应用模板与所述关键词数据的对应关系存储于所述预设数据库中。

可选的，所述应用模板包括对外接口；

将确定的应用模板进行拼接，获得应用模板包括：

将确定的应用模板通过所述对外接口进行拼接，获得应用模板。

可选的，所述获取单页应用数据包括：

通过ajax方式异步请求数据源，以获取单页应用数据。

可选的，所述应用模板为列表-图文模板或列表-视频模块或宫格-图文模块或宫格-视频模块。

一种单页应用设计系统，包括：

数据获取模块，用于获取单页应用数据；

关键字获取模块，用于拆分所述单页应用数据，获得关键字数据集合，所述关键字数据集合中包括至少一条关键字数据；

应用组合模块，用于抽取所述关键字数据集合中的一条关键字数据，抽取的关键字数据从所述关键字数据集合中剔除；

根据抽取的所述关键字数据中的关键字查询预设数据库，确定与所述关键字匹配的应用模板；

判断所述关键字数据集合是否为空，如果是，则将确定的应用模板进行拼接，获得单页应用；如果否，则返回抽取所述关键字数据集合中的一条关键字数据的步骤；

所述预设数据库中存储有应用模板与关键字数据的对应关系。

可选的，所述预设数据库由数据库形成模块形成；

所述数据库形成模块包括：

绑定单元，用于将所述应用模板与样式进行绑定；

存储单元，用于根据所述应用模板的功能确定关键词数据，将所述应用模板与所述关键词数据的对应关系存储于所述预设数据库中。

可选的，所述应用模板包括对外接口；

所述应用组合模块将确定的应用模板进行拼接，获得应用模板具体用于，将确定的应用模板通过所述对外接口进行拼接，获得应用模板。

可选的，所述数据获取模块获取单页应用数据具体用于，通过ajax方式异步请求数据源，以获取单页应用数据。

可选的，所述应用模板为列表-图文模板或列表-视频模块或宫格-图文模块或宫格-视频模块。

从上述技术方案可以看出，本发明实施例提供了一种单页应用设计方法及系统，其中，所述单页应用设计方法通过对单页应用数据进行处理获得关键字数据集合，并根据所述关键字集合中的关键字数据在所述预设数据库中确定应用模板并进行拼接，从而完成根据单页应用数据确定应用模板的过程，降低了利用iframe进行元素样式展现在单页应用开发过程中的出现次数，从而提升了单页应用的加载速度，降低了出现部分机顶盒对iframe存在兼容不稳定问题的概率，提升了页面渲染速度。

另外，所述单页应用设计方法通过单页应用数据的关键字数据即可确定所需的应用模板，确定的应用模板进行拼接获得的单页应用进行简单的测试、修改即可使用，大大降低了开发人员的工作强度。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。

图1为本申请的一个实施例提供的一种单页应用设计方法的流程示意图；

图2为本申请的另一个实施例提供的一种单页应用设计方法的流程示意图；

图3为本申请的又一个实施例提供的一种单页应用设计方法的流程示意图；

图4为本申请的一个实施例提供的一种单页应用设计系统的结构示意图；

图5为本申请的一个实施例提供的一种数据库形成模块的结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本申请实施例提供了一种单页应用设计方法，如图1所示，包括：

s101：获取单页应用数据；

s102：拆分所述单页应用数据，获得关键字数据集合，所述关键字数据集合中包括至少一条关键字数据；

s103：抽取所述关键字数据集合中的一条关键字数据，抽取的关键字数据从所述关键字数据集合中剔除；

根据抽取的所述关键字数据中的关键字查询预设数据库，确定与所述关键字匹配的应用模板；

判断所述关键字数据集合是否为空，如果是，则将确定的应用模板进行拼接，获得单页应用；如果否，则返回抽取所述关键字数据集合中的一条关键字数据的步骤；

所述预设数据库中存储有应用模板与关键字数据的对应关系，所述应用模板绑定有样式。

需要说明的是，发明人研究发现，在利用appcms进行单页应用开发时，通常需要开发人员根据功能提取元素，并为元素编写样式呈现代码，在每个单页应用开发过程中，单页应用中即使存在相同或相似的功能也需要重新编写代码，这使得开发人员不得不付出重复劳动。而在本实施例中，所述预设数据库中存储有所述应用模板，所述应用模板与其对应的关键字进行绑定，所述应用模板是指利用appcms进行单页应用开发时，素材与样式的绑定模块，利用模块化的开发思想降低开发人员所需付出的重复劳动，提升单页应用开发效率。

另外，由于所述应用模板是素材与样式的绑定模块，因此根据所述单页应用数据的关键字数据确定的应用模板，并根据确定的应用模板拼接的单页应用并需要iframe框架的嵌入，从而提升了单页应用的加载速度，降低了出现部分机顶盒对iframe存在兼容不稳定问题的概率，提升了页面渲染速度。

还需要说明的是，所述单页应用数据一般为数组数据，对数组数据拆分后，获取每一条数据中约定的关键字数据。

在上述实施例的基础上，在本申请的一个实施例中，如图2所示，所述预设数据库的形成过程包括：

s201：将所述应用模板与样式进行绑定；

s202：根据所述应用模板的功能确定关键词数据，将所述应用模板与所述关键词数据的对应关系存储于所述预设数据库中。

需要说明的是，通常在所述应用模板的开发支出，就需要保证所述应用模板的初始化时页面的样式呈现效果，一般情况下，所述应用模板的样式由样式源码(cascadingstylesheets，css)确定；所述应用模板可以控制样式，样式是应用模板操控的结果，样式依赖应用模板存在。使用不同的应用模板，就需要构建不同页面效果的样式。

每个应用模板的关键词数据是之后根据单页应用数据的关键词数据确定所需应用模板的索引数据，每个应用模板的关键词数据的确定方式可以依照约定进行，在将应用模板与样式绑定，并确定了所述应用模板的关键词数据后，即可将所述应用模板与所述关键词数据的对应关系存储于所述预设数据库中。

另外，将所述应用模板与所述关键词数据的对应关系存储于所述预设数据库中，可以是将所述应用模板与所述关键词数据的对应关系，及所述应用模板本身都存储于所述预设数据库中，还可以是只讲所述应用模板与所述关键词数据的对应关系存储于所述预设数据库中，而将所述应用模板存储于其他位置，当在所述预设数据库中确定所需的应用模板后，再从所述应用模板的存储位置查找所需的应用模板，实现降低所述预设数据库的复杂程度的目的。

在上述实施例的基础上，在本申请的另一个实施例中，所述应用模板包括对外接口；

将确定的应用模板进行拼接，获得应用模板包括：

将确定的应用模板通过所述对外接口进行拼接，获得应用模板。

需要说明的是，所述应用模板的对外接口包括但不限于数据源接口、信息字段获取接口、初始化接口和销毁接口；其中，所述数据源即可欧用于获取appcms后台系统生成的完整素材文件；所述信息字段获取接口用于获取每一条素材文件里控制板式的关键字，方便后期确定使用的目标；所述初始化接口用于对页面的清理和原有数据的清空，方便导入新数据进行处理；所述销毁接口用于清空现有素材的记录列表，清理页面已有效果。

还需要说明的是，一般情况下，在根据所述关键字数据确定所述应用模板时通常需要建立一个函数来实现该功能，我们可以把它称之为模板选择函数；该函数在使用时选获取所述关键字数据，根据不同的关键字数据来调用不同的模板。为了办证应用模板的对外接口的公用，我们为不同的应用模板的同一功能接口采用了相同的变量名，保证在使用不同的应用模板时传递的成员变量名称相同，也方便了不同的应用模板的数据访问。在外部对应用模板进行操作时，统一采用公共对象，做法是将不同的应用模板对象传递给公共对象，这样的话，即使使用的应用模板不同了，但是对外层而言处理的动作仍然是作用于同一公共对象。为了拓展模板功能，所述应用模板内部优选预留成员变量，方便以后功能的添加拓展。

在上述实施例的基础上，在本申请的又一个实施例中，如图3所示，所述获取单页应用数据包括：

s1011：通过ajax方式异步请求数据源，以获取单页应用数据。

需要说明的是，在appcms中，所述单页应用数据一般存储于文件夹content.js中，即所述数据源为命名为content.js的文件夹。在本实施例中，通过ajax方式异步请求数据源，可以避免影响对数据源的其他操作。

在上述实施例的基础上，在本申请的又一个实施例中，所述应用模板为列表-图文模板或列表-视频模块或宫格-图文模块或宫格-视频模块。

相应的，本申请实施例还提供了一种单页应用设计系统，如图4所示，包括：

数据获取模块100，用于获取单页应用数据；

关键字获取模块200，用于拆分所述单页应用数据，获得关键字数据集合，所述关键字数据集合中包括至少一条关键字数据；

应用组合模块300，用于抽取所述关键字数据集合中的一条关键字数据，抽取的关键字数据从所述关键字数据集合中剔除；

根据抽取的所述关键字数据中的关键字查询预设数据库，确定与所述关键字匹配的应用模板；

判断所述关键字数据集合是否为空，如果是，则将确定的应用模板进行拼接，获得单页应用；如果否，则返回抽取所述关键字数据集合中的一条关键字数据的步骤；

所述预设数据库中存储有应用模板与关键字数据的对应关系。

需要说明的是，发明人研究发现，在利用appcms进行单页应用开发时，通常需要开发人员根据功能提取元素，并为元素编写样式呈现代码，在每个单页应用开发过程中，单页应用中即使存在相同或相似的功能也需要重新编写代码，这使得开发人员不得不付出重复劳动。而在本实施例中，所述预设数据库中存储有所述应用模板，所述应用模板与其对应的关键字进行绑定，所述应用模板是指利用appcms进行单页应用开发时，素材与样式的绑定模块，利用模块化的开发思想降低开发人员所需付出的重复劳动，提升单页应用开发效率。

另外，由于所述应用模板是素材与样式的绑定模块，因此根据所述单页应用数据的关键字数据确定的应用模板，并根据确定的应用模板拼接的单页应用并需要iframe框架的嵌入，从而提升了单页应用的加载速度，降低了出现部分机顶盒对iframe存在兼容不稳定问题的概率，提升了页面渲染速度。

还需要说明的是，所述单页应用数据一般为数组数据，对数组数据拆分后，获取每一条数据中约定的关键字数据。

在上述实施例的基础上，在本申请的一个实施例中，所述预设数据库由数据库形成模块形成；

如图5所示，所述数据库形成模块包括：

绑定单元a10，用于将所述应用模板与样式进行绑定；

存储单元a20，用于根据所述应用模板的功能确定关键词数据，将所述应用模板与所述关键词数据的对应关系存储于所述预设数据库中。

需要说明的是，通常在所述应用模板的开发支出，就需要保证所述应用模板的初始化时页面的样式呈现效果，一般情况下，所述应用模板的样式由样式源码(cascadingstylesheets，css)确定；所述应用模板可以控制样式，样式是应用模板操控的结果，样式依赖应用模板存在。使用不同的应用模板，就需要构建不同页面效果的样式。

每个应用模板的关键词数据是之后根据单页应用数据的关键词数据确定所需应用模板的索引数据，每个应用模板的关键词数据的确定方式可以依照约定进行，在将应用模板与样式绑定，并确定了所述应用模板的关键词数据后，即可将所述应用模板与所述关键词数据的对应关系存储于所述预设数据库中。

另外，将所述应用模板与所述关键词数据的对应关系存储于所述预设数据库中，可以是将所述应用模板与所述关键词数据的对应关系，及所述应用模板本身都存储于所述预设数据库中，还可以是只讲所述应用模板与所述关键词数据的对应关系存储于所述预设数据库中，而将所述应用模板存储于其他位置，当在所述预设数据库中确定所需的应用模板后，再从所述应用模板的存储位置查找所需的应用模板，实现降低所述预设数据库的复杂程度的目的。

在上述实施例的基础上，在本申请的另一个实施例中，所述应用模板包括对外接口；

所述应用组合模块300将确定的应用模板进行拼接，获得应用模板具体用于，将确定的应用模板通过所述对外接口进行拼接，获得应用模板。

需要说明的是，所述应用模板的对外接口包括但不限于数据源接口、信息字段获取接口、初始化接口和销毁接口；其中，所述数据源即可欧用于获取appcms后台系统生成的完整素材文件；所述信息字段获取接口用于获取每一条素材文件里控制板式的关键字，方便后期确定使用的目标；所述初始化接口用于对页面的清理和原有数据的清空，方便导入新数据进行处理；所述销毁接口用于清空现有素材的记录列表，清理页面已有效果。

还需要说明的是，一般情况下，在根据所述关键字数据确定所述应用模板时通常需要建立一个函数来实现该功能，我们可以把它称之为模板选择函数；该函数在使用时选获取所述关键字数据，根据不同的关键字数据来调用不同的模板。为了办证应用模板的对外接口的公用，我们为不同的应用模板的同一功能接口采用了相同的变量名，保证在使用不同的应用模板时传递的成员变量名称相同，也方便了不同的应用模板的数据访问。在外部对应用模板进行操作时，统一采用公共对象，做法是将不同的应用模板对象传递给公共对象，这样的话，即使使用的应用模板不同了，但是对外层而言处理的动作仍然是作用于同一公共对象。为了拓展模板功能，所述应用模板内部优选预留成员变量，方便以后功能的添加拓展。

在上述实施例的基础上，在本申请的又一个实施例中，所述数据获取模块获取单页应用数据具体用于，通过ajax方式异步请求数据源，以获取单页应用数据。

需要说明的是，在appcms中，所述单页应用数据一般存储于文件夹content.js中，即所述数据源为命名为content.js的文件夹。在本实施例中，通过ajax方式异步请求数据源，可以避免影响对数据源的其他操作。

在上述实施例的基础上，在本申请的又一个实施例中，所述应用模板为列表-图文模板或列表-视频模块或宫格-图文模块或宫格-视频模块。

综上所述，本申请实施例提供了一种单页应用设计方法及系统，其中，所述单页应用设计方法通过对单页应用数据进行处理获得关键字数据集合，并根据所述关键字集合中的关键字数据在所述预设数据库中确定应用模板并进行拼接，从而完成根据单页应用数据确定应用模板的过程，降低了利用iframe进行元素样式展现在单页应用开发过程中的出现次数，从而提升了单页应用的加载速度，降低了出现部分机顶盒对iframe存在兼容不稳定问题的概率，提升了页面渲染速度。

另外，所述单页应用设计方法通过单页应用数据的关键字数据即可确定所需的应用模板，确定的应用模板进行拼接获得的单页应用进行简单的测试、修改即可使用，大大降低了开发人员的工作强度。

本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。