CN111143729B - 基于单页面应用的优化方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及研发管理领域，公开了一种基于单页面应用的优化方法、装置、设备及存储介质。基于单页面应用的优化方法包括：根据渐进式框架生成目标业务系统的至少一个单页面应用，目标业务系统的单页面应用用于提供目标业务的报价、交互对象和批改功能；当获取到懒加载请求时，根据预置代码分割算法对单页面应用进行懒加载；当检测到单页面应用被加载时，根据预置缓存机制对已加载的单页面应用进行缓存；根据超级文本标记语言和界面设计组件库对缓存的单页面应用进行页面布局和优化处理。本发明通过对目标业务系统构建单页面应用，并对单页面应用进行懒加载和缓存处理，增强目标业务系统的浏览器兼容性，提高业务运行效率。

Description

基于单页面应用的优化方法、装置、设备及存储介质

技术领域

本发明涉及事务处理过程优化领域，尤其涉及基于单页面应用的优化方法、装置、设备及存储介质。

背景技术

单页面应用能够动态重写当前的页面来与用户交互，而不需要重新加载整个页面。相对于传统的互联网应用，单页面应用采用前后端分离方式，后端只负责处理数据并提供接口，由前端负责页面逻辑和页面渲染。

现有技术中，单页面应用会一次性载入页面资源，利用本地计算能力渲染页面，提高页面切换速度与用户体验，因此导致首屏加载缓慢耗时的问题，并且，目前传统的业务系统只支持老版本的IE浏览器，浏览器兼容性差，与此同时，业务系统中的页面因页面布局差，例如，页面中表单字段较多或者页面冗长，在加载业务系统网页或者频繁请求某一页面时，通常展示所有信息，导致经常出现网页卡死或者加载速度慢的情况。

发明内容

本发明的主要目的在于解决了传统的业务系统对浏览器兼容性差，并且解决了由于页面展示大量信息导致页面加载速度慢的技术问题。

为实现上述目的，本发明第一方面提供了一种基于单页面应用的优化方法，包括：根据渐进式框架生成目标业务系统的至少一个单页面应用，所述目标业务系统的单页面应用用于提供所述目标业务的报价、交互对象和批改功能；当获取到懒加载请求时，根据预置代码分割算法对所述目标业务系统的单页面应用进行懒加载；当检测到所述目标业务系统的单页面应用被加载时，根据预置缓存机制对所述已加载的目标业务系统的单页面应用进行缓存；根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理。

可选的，在本发明第一方面的第一种实现方式中，所述根据渐进式框架生成目标业务系统的至少一个单页面应用，所述目标业务系统的单页面应用用于提供所述目标业务的报价、交互对象和批改功能包括：将渐进式框架和路由管理器加载到预置主页面中；根据所述渐进式框架在所述预置主页面中初始化一个根视图实例，所述根视图实例包括所述路由管理器对应的路由对象，所述路由对象为根据预置语法规则创建的对象；根据所述渐进式框架对目标业务系统中所述目标业务的报价、交互对象和批改功能生成对应的子视图实例；通过所述路由管理器对每个子视图实例映射路由，得到不同的路由地址；通过所述不同的路由地址将每个子视图实例挂载到所述预置主页面中；对所述根视图实例和多个子视图实例进行数据处理，得到多个单页面应用。

可选的，在本发明第一方面的第二种实现方式中，所述当获取到懒加载请求时，根据预置代码分割算法对所述目标业务系统的单页面应用进行懒加载包括：当获取到懒加载请求时，对所述目标业务系统的单页面应用构建异步组件；根据预置代码分割算法设置所述异步组件的代码分块点，得到被代码分割的异步组件；通过所述路由管理器对所述被代码分割的异步组件进行路由配置。

可选的，在本发明第一方面的第三种实现方式中，所述当检测到所述目标业务系统的单页面应用被加载时，根据预置缓存机制对所述已加载的目标业务系统的单页面应用进行缓存包括：确定预置缓存机制为所述渐进式框架的持久连接抽象组件；当检测到所述目标业务系统的单页面应用被加载时，通过所述持久连接抽象组件对所述已加载的目标业务系统的单页面应用进行缓存，得到缓存页面；当检测到所述缓存页面的数量大于预置阈值，并且存在新的子视图实例时，从所述缓存页面中去除在最长时长内从未访问过的单页面应用，预置阈值为根据所述持久连接抽象组件的第一属性设置的数值；通过所述持久连接抽象组件中的第二属性配置非缓存的单页面应用。

可选的，在本发明第一方面的第四种实现方式中，所述当检测到所述目标业务系统的单页面应用被加载时，通过所述持久连接抽象组件对所述已加载的目标业务系统的单页面应用进行缓存，得到缓存页面包括：将所述已加载的目标业务系统的单页面应用增加到所述持久连接抽象组件的第三属性中，得到缓存页面；当检测到请求的单页面应用存在所述缓存页面中时，从所述第三属性中读取所述请求的单页面应用；当检测到所述请求的单页面应用不存在所述缓存页面中时，将所述请求的单页面应用增加到所述第三属性中。

可选的，在本发明第一方面的第五种实现方式中，所述根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理包括：根据界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局，所述页面布局包括菜单和多个标签；根据超级文本标记语言的预置控件对所述缓存的目标业务系统的单页面应用增加文件批量上传功能；对所述缓存的目标业务系统的单页面应用增加模糊查询、批改变更集和数据存贮功能，所述模糊查询用于按照预置目标查找数据，所述批改变更集用于展示已批改记录。

可选的，在本发明第一方面的第六种实现方式中，所述对所述根视图实例和多个子视图实例进行数据处理，得到多个单页面应用包括：通过所述根视图实例和所述多个子视图实例生成单页面应用；在所述预置主页面中加载状态管理器；根据所述状态管理器生成目标对象；将所述目标对象添加到所述根视图实例中；通过所述状态管理器触发所述单页面应用之间的事件执行，所述事件执行用于指示所述根视图实例和所述多个子视图实例之间的数据处理状态。

本发明第二方面提供了一种基于单页面应用的优化装置，包括：生成单元，用于根据渐进式框架生成目标业务系统的至少一个单页面应用，所述目标业务系统的单页面应用用于提供所述目标业务的报价、交互对象和批改功能；懒加载单元，当获取到懒加载请求时，用于根据预置代码分割算法对所述目标业务系统的单页面应用进行懒加载；缓存单元，当检测到所述目标业务系统的单页面应用被加载时，用于根据预置缓存机制对所述已加载的目标业务系统的单页面应用进行缓存；布局优化单元，用于根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理。

可选的，在本发明第二方面的第一种实现方式中，所述生成单元还包括：加载子单元，用于将渐进式框架和路由管理器加载到预置主页面中；初始化子单元，用于根据所述渐进式框架在所述预置主页面中初始化一个根视图实例，所述根视图实例包括所述路由管理器对应的路由对象，所述路由对象为根据预置语法规则创建的对象；生成子单元，用于根据所述渐进式框架对目标业务系统中所述目标业务的报价、交互对象和批改功能生成对应的子视图实例；映射子单元，用于通过所述路由管理器对每个子视图实例映射路由，得到不同的路由地址；挂载子单元，用于通过所述不同的路由地址将每个子视图实例挂载到所述预置主页面中；处理子单元，用于对所述根视图实例和多个子视图实例进行数据处理，得到多个单页面应用。

可选的，在本发明第二方面的第二种实现方式中，所述懒加载单元具体用于：当获取到懒加载请求时，对所述目标业务系统的单页面应用构建异步组件；根据预置代码分割算法设置所述异步组件的代码分块点，得到被代码分割的异步组件；通过所述路由管理器对所述被代码分割的异步组件进行路由配置。

可选的，在本发明第二方面的第三种实现方式中，所述缓存单元还包括：确定子单元，用于确定预置缓存机制为所述渐进式框架的持久连接抽象组件；缓存子单元，当检测到所述目标业务系统的单页面应用被加载时，用于通过所述持久连接抽象组件对所述已加载的目标业务系统的单页面应用进行缓存，得到缓存页面；去除子单元，当检测到所述缓存页面的数量大于预置阈值，并且存在新的子视图实例时，用于从所述缓存页面中去除在最长时长内从未访问过的单页面应用，预置阈值为根据所述持久连接抽象组件的第一属性设置的数值；配置子单元，用于通过所述持久连接抽象组件中的第二属性配置非缓存的单页面应用。

可选的，在本发明第二方面的第四种实现方式中，所述缓存子单元具体用于：将所述已加载的目标业务系统的单页面应用增加到所述持久连接抽象组件的第三属性中，得到缓存页面；当检测到请求的单页面应用存在所述缓存页面中时，从所述第三属性中读取所述请求的单页面应用；当检测到所述请求的单页面应用不存在所述缓存页面中时，将所述请求的单页面应用增加到所述第三属性中。

可选的，在本发明第二方面的第五种实现方式中，所述布局优化单元具体用于：根据界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局，所述页面布局包括菜单和多个标签；根据超级文本标记语言的预置控件对所述缓存的目标业务系统的单页面应用增加文件批量上传功能；对所述缓存的目标业务系统的单页面应用增加模糊查询、批改变更集和数据存贮功能，所述模糊查询用于按照预置目标查找数据，所述批改变更集用于展示已批改记录。

可选的，在本发明第二方面的第六种实现方式中，所述处理子单元具体用于：通过所述根视图实例和所述多个子视图实例生成单页面应用；在所述预置主页面中加载状态管理器；根据所述状态管理器生成目标对象；将所述目标对象添加到所述根视图实例中；通过所述状态管理器触发所述单页面应用之间的事件执行，所述事件执行用于指示所述根视图实例和所述多个子视图实例之间的数据处理状态。

本发明第三方面提供了一种基于单页面应用的优化设备，包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互联；所述至少一个处理器调用所述存储器中的所述指令，以使得所述基于单页面应用的优化设备执行上述第一方面所述的方法。

本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述第一方面所述的方法。

本发明提供的技术方案中，根据渐进式框架生成目标业务系统的至少一个单页面应用，所述目标业务系统的单页面应用用于提供所述目标业务的报价、交互对象和批改功能；当获取到懒加载请求时，根据预置代码分割算法对所述目标业务系统的单页面应用进行懒加载；当检测到所述目标业务系统的单页面应用被加载时，根据预置缓存机制对所述已加载的目标业务系统的单页面应用进行缓存；根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理。本发明实施例中，通过对目标业务系统中目标业务的报价、交互对象和批改功能构建多个单页面应用，并对单页面应用进行懒加载、缓存处理和页面布局优化，增强了目标业务系统的浏览器兼容性，提高目标业务系统的页面加载速度和运行效率。

附图说明

图1为本发明实施例中基于单页面应用的优化方法的一个实施例示意图；

图2为本发明实施例中基于单页面应用的优化方法的另一个实施例示意图；

图3为本发明实施例中基于单页面应用的优化装置的一个实施例示意图；

图4为本发明实施例中基于单页面应用的优化装置的另一个实施例示意图；

图5为本发明实施例中基于单页面应用的优化设备的一个实施例示意图。

具体实施方式

本发明实施例提供了一种基于单页面应用的优化方法、装置、设备及存储介质，用于通过对目标业务系统中目标业务的报价、交互对象和批改功能构建多个单页面应用，并对单页面应用进行懒加载、缓存处理和页面布局优化，增强了目标业务系统的浏览器兼容性，提高目标业务系统的页面加载速度和运行效率。

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例进行描述。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”或“具有”及其任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为便于理解，下面对本发明实施例的具体流程进行描述，请参阅图1，本发明实施例中基于单页面应用的优化方法的一个实施例包括：

101、根据渐进式框架生成目标业务系统的至少一个单页面应用，目标业务系统的单页面应用用于提供目标业务的报价、交互对象和批改功能；

终端根据渐进式框架生成目标业务系统的至少一个单页面应用，目标业务系统的单页面应用用于提供目标业务的报价、交互对象和批改功能，其中，目标业务系统包括货运业务系统，报价、交互对象和批改功能主要应用于进出口、国内(公路、铁路、水路、航空)以及邮包货运业务中，单页面应用是指页面之间不存在跳转。具体的，终端加载渐进式框架vue.js；终端根据vue.js生成根视图实例和子视图实例，目标业务系统的单页面应用主要由根视图实例和子视图实例组成。

需要说明的是，Vue.js是一套用于构建用户界面的渐进式框架，Vue.js采用自底向上增量开发的设计模式。Vue.js能够驱动采用单文件组件和根据Vue生态系统支持的库开发的复杂单页面应用，也就是说，Vue.js通过简洁的应用程序编程接口(applicationprogramming interface，API)实现响应的数据绑定和组合的视图组件。

102、当获取到懒加载请求时，根据预置代码分割算法对目标业务系统的单页面应用进行懒加载；

当获取到懒加载请求时，终端根据预置代码分割算法对目标业务系统的单页面应用进行懒加载，其中，懒加载也叫延迟加载，也就是在需要的时候进行加载，随用随载。具体的，当获取到懒加载请求时，终端根据预置代码分割算法将单页面应用中异步组件打包成单独的脚本语言(JavaScript，js)文件，并将js文件存储到预置文件目录static/js文件夹中；终端在调用时使用异步(Asynchronous Javascript And XML，ajax)请求插入到对应的单页面应用中，实现懒加载。

可以理解的是，当终端打包目标业务系统的单页面应用时，单页面应用中加载的js文件包导致页面加载速度慢，终端根据预置代码分割算法实现路由组件的懒加载，提高目标业务系统的单页面的加载速度，避免了启动占用较高系统资源的问题。

103、当检测到目标业务系统的单页面应用被加载时，根据预置缓存机制对已加载的目标业务系统的单页面应用进行缓存；

当检测到目标业务系统的单页面应用被加载时，终端根据预置缓存机制对已加载的目标业务系统的单页面应用进行缓存。具体的，终端确定预置缓存机制为持续连接抽象组件；终端将单页面应用添加到持续连接抽象组件中，实现页面缓存，终端会缓存不活动的视图实例，并不是销毁它们，用于保留单页面应用中视图实例状态，避免重新渲染。

需要说明的是，缓存机制减少操作重载单页面应用时长，避免多次进入同一单页面应用时多次加载的问题，提高目标业务系统的运行效率。

104、根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理。

终端根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理。具体的，终端根据界面设计组件库iView对缓存的目标业务系统的单页面应用进行页面布局，页面布局包括菜单和多个标签，其中，菜单用于指示目标业务系统的报价、交互对象和批改功能入口页面，标签用于各个功能之间切换，页面布局还包括其他布局，具体此处不做限定，进一步地，终端在预置主页面引入iView相关的层叠样式表css和js文件；终端添加iView中的menu组件和tab组件；终端为menu组件和tab组件绑定数据；终端为绑定的数据添加触发事件，由触发事件将绑定的数据提交到服务器；终端超级文本标记语言HTML5对缓存的目标业务系统的单页面应用增加文件批量上传功能，进一步地，终端采用HTML5的拖放drag和drop对文件进行拖放；终端对缓存的目标业务系统的单页面应用增加模糊查询、批改变更集和数据存贮功能，模糊查询用于按照预置目标查找数据，批改变更集用于展示已批改记录，进一步地，终端使用iView中的桌面table组件渲染出目标用户的批改变更集，终端采用预置模型弹出框显示批改变更集列表，减少页面之间的来回跳转，终端通过数据存贮功能为目标用户提供已存储的信息。

需要说明的是，单页面应用就是只有一张页面的应用，加载单个HTML5页面并在目标用户与目标业务系统交互时动态更新该页面。终端加载必需的文件，文件类型包括html、css和js，所有操作都在该页面上完成，由脚本语言来控制操作。

本发明实施例中，通过对目标业务系统中目标业务的报价、交互对象和批改功能构建多个单页面应用，并对单页面应用进行懒加载、缓存处理和页面布局优化，增强了目标业务系统的浏览器兼容性，提高目标业务系统的页面加载速度和运行效率。

请参阅图2，本发明实施例中基于单页面应用的优化方法的另一个实施例包括：

201、将渐进式框架和路由管理器加载到预置主页面中；

终端将渐进式框架和路由管理器加载到预置主页面中。其中，渐进式框架为vue.js，路由管理器为vue-router，具体的，终端加载vue.js和vue-router.js文件，或者终端在部署视图文件脚手架vue-cli以后，根据导入import函数将vue和vue-router引入到预置主页面中，具体此处不做限定。

需要说明的是，vue.js是一套用于构建用户界面的渐进式框架，vue.js采用自底向上增量开发的设计模式。Vue.js的核心库仅关注视图层，易与第三方库或已有项目进行整合，另外，Vue.js能够驱动采用单文件组件和根据Vue生态系统支持的库开发的复杂单页面应用，也就是说，Vue.js通过简洁的应用程序编程接口实现响应的数据绑定和组合的视图组件。

202、根据渐进式框架在预置主页面中初始化一个根视图实例，根视图实例包括路由管理器对应的路由对象，路由对象为根据预置语法规则创建的对象；

终端根据渐进式框架在预置主页面中初始化一个根视图实例，根视图实例包括路由管理器对应的路由对象，路由对象为根据预置语法规则创建的对象。具体的，终端根据渐进式框架在预置主页面中初始化一个根视图实例，例如，new Vue({})；终端根据预置语法规则创建路由管理器对应的路由对象，该预置语法规则为new Router({})，该路由对象为router；终端将路由对象添加到根视图实例中，例如，new Vue({router})。

可以理解的是，vue-router主要用于对单页面应用进行路由管理，根据不同单页面应用的统一资源定位符格式(uniform resource locator，URL)地址展示不同的内容和页面，vue-router是Vue.js的路由管理器，用于提供URL路由跳转，与vue.js深度集成，适合用于构建单页面应用和访问页面功能。

203、根据渐进式框架对目标业务系统中目标业务的报价、交互对象和批改功能生成对应的子视图实例；

终端根据渐进式框架对目标业务系统中目标业务的报价、交互对象和批改功能生成对应的子视图实例。具体的，终端在目标业务系统的预置主页面中加载Vue.js文件后，终端根据vue的语法规则设置子视图实例，例如，var vm＝new Vue({})，其中，vm是变量名，表示子视图实例，具体业务功能在Vue({})内进行添加。

可以理解的是，子视图实例的创建方式和根视图实例的创建方式相同，都是根据vue的语法规则进行设置。

204、通过路由管理器对每个子视图实例映射路由，得到不同的路由地址；

终端通过路由管理器对每个子视图实例映射路由，得到不同的路由地址。具体的，终端使用哈希hash模式的vue-router对每个子视图实例映射路由，得到路由地址，路由地址是指终端通过浏览器地址路由来访问各个单页面应用功能。

需要说明的是，路由用于设定不同的路由地址，并将不同的路由地址和视图实例映射起来。传统的页面应用是用一些超链接来实现页面切换和跳转的，但在单页面应用中，则是通过不同的路由地址之间的切换，也就是视图实例进行切换，路由管理器的本质就是建立URL和单页面应用之间的映射关系。

205、通过不同的路由地址将每个子视图实例挂载到预置主页面中；

终端通过不同的路由地址将每个子视图实例挂载到预置主页面中。可以理解的是，一个单页面应用由一个根视图实例以及可组合复用的子视图实例树组成，终端通过启动路由地址，实现对子视图实例在预置主页面中的挂载，预置主页面是目标业务系统的入口页面，例如，终端将预置主页面命名为index或者main页面。

206、对根视图实例和多个子视图实例进行数据处理，得到多个单页面应用；

终端对根视图实例和多个子视图实例进行数据处理，得到多个单页面应用。具体的，终端通过根视图实例和多个子视图实例生成单页面应用；终端在预置主页面中加载状态管理器；终端根据状态管理器生成目标对象；终端将目标对象添加到根视图实例中；终端通过状态管理器触发单页面应用之间的事件执行，事件执行用于指示根视图实例和多个子视图实例之间的数据处理状态。

需要说明的是，状态管理器为vuex，vuex是一个专为vue.js应用程序开发的状态管理模式，采用集中式存储管理应用的所有视图实例的状态，并以相应的规则保证状态以一种可预测的方式发生变化，确保生成的单页面应用是符合脚本程序设计语言ES5语法的文件，兼容所有支持ES5语法的浏览器，增强了目标业务系统的浏览器兼容性。

207、当获取到懒加载请求时，根据预置代码分割算法对目标业务系统的单页面应用进行懒加载；

当获取到懒加载请求时，终端根据预置代码分割算法对目标业务系统的单页面应用进行懒加载。当终端打包目标业务系统的单页面应用时，单页面应用中加载的js文件包影响页面加载速度，其中，懒加载也叫延迟加载，也就是在需要的时候进行加载，随用随载。

具体的，当获取到懒加载请求时，首先，终端对目标业务系统的单页面应用构建异步组件，可选的，终端将目标业务系统的单页面应用构建的异步组件设置为许诺Promis的工厂函数的返回值，该Promise工厂函数应该是resolve组件本身，例如，

const Foo＝()＝>Promise.resolve({/*组件定义对象*/})；

其次，终端根据预置代码分割算法的import函数设置vue异步组件的代码分块点，得到被代码分割的异步组件，可选的，终端使用模块打包器webpack的import函数设置代码分块点，得到被webpack自动代码分割的异步组件，例如，

const Foo＝()＝>import('./Foo.vue')，

其中，import('./Foo.vue')为返回Promise。

终端通过webpack.optimize.CommonsChunkPlugin插件对vendor实体的js文件进行分割，如下所示：

var webpack＝require("webpack")；

module.exports＝{

entry:{

app:"./app.js",

vendor:["lodash","jquery"],

},

output:{

path:"release",

filename:"[name].[chunkhash].js"

},

plugins:[

new webpack.optimize.CommonsChunkPlugin({names:["vendor"]})

]

}；

其中，终端在webpack配置文件中的output路径配置chunkFilename属性，chunkFilename路径将会作为被代码分割的异步组件懒加载的路径；

最后，终端通过vue-router对被代码分割的异步组件进行路由配置，例如：

const router＝new VueRouter({

routes:[

{path:'/foo',component:Foo}

]

})。

需要说明的是，在单页面应用中，若没有应用懒加载，运用webpack打包后的文件将会异常的大，导致终端展示首页时，加载内容过多，延时过长，不利于用户体验，而终端采用懒加载将单页面应用进行划分，页面加载速度快，减轻服务器压力。

208、当检测到目标业务系统的单页面应用被加载时，根据预置缓存机制对已加载的目标业务系统的单页面应用进行缓存；

当检测到目标业务系统的单页面应用被加载时，终端根据预置缓存机制对已加载的目标业务系统的单页面应用进行缓存。具体的，终端确定预置缓存机制为持久连接抽象组件，其中持久连接抽象组件为keep-alive；当检测到目标业务系统的单页面应用被加载时，终端通过持久连接抽象组件对已加载的目标业务系统的单页面应用进行缓存，得到缓存页面；当检测到缓存页面的数量大于预置阈值，并且存在新的子视图实例时，终端从缓存页面中去除在最长时长内从未访问过的单页面应用，预置阈值为根据持久连接抽象组件的第一属性进行设置的数值，其中，第一属性为keep-alive的最大值max属性，max属性是以数字进行表示，用于指示最多可以缓存的实例数量；终端通过持久连接抽象组件中的第二属性配置非缓存的单页面应用，其中，第二属性为排除exclude属性，exclude属性采用字符串或正则表达式，任何匹配的单页面应用都不会被缓存。

可选的，终端将已加载的目标业务系统的单页面应用增加到持久连接抽象组件的第三属性中，得到缓存页面，其中，第三属性为包含include属性；当检测到请求的单页面应用存在缓存页面中时，终端从第三属性中读取所述请求的单页面应用；当检测到请求的单页面应用不存在缓存页面中时，终端将请求的单页面应用增加到第三属性中。

需要说明的是，keep-alive是一个抽象组件，它自身不会渲染一个文档对象模型(Document Object Model，DOM)元素，也不会出现在父组件链中。实质是使用js缓存的虚拟DOM，所以在关闭页面后，缓存页面也会被删除，再次打开需要重新加载。

209、根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理。

终端根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理。具体的，首先，终端根据界面设计组件库iView对缓存的目标业务系统的单页面应用进行页面布局，页面布局包括菜单menu和多个标签tab，其中，menu用于指示目标业务系统的报价、交互对象和批改功能入口页面，tab用于各个功能之间切换，页面布局还包括其他布局，具体此处不做限定，进一步地，终端在预置主页面引入iView相关的层叠样式表css和js文件；终端添加iView中的menu组件和tab组件；终端为menu组件和tab组件绑定数据；终端为绑定的数据添加触发事件，由触发事件将绑定的数据提交到服务器。

其次，终端超级文本标记语言HTML5的预置控件对缓存的目标业务系统的单页面应用增加文件批量上传功能，其中，预置控件包括HTML5的拖放drag和drop控件，进一步地，终端选择目标文件，终端采用HTML5的拖放drag和drop控件生成预置拖放事件；终端通过预置拖放事件将文件拖入到缓存的目标业务系统的单页面应用的预置分类位置区域内；当终端监听到预置拖放事件完成时，终端获取预置分类位置区域内的文件列表，该文件列表包括文件名称、文件大小和文件类型；终端将文件列表按照预置格式进行封装，得到文件流，文件流用于指示批量上传文件的内容；终端通过异步请求方式提交文件流到目标服务器，实现文件批量上传功能。其中，该异步请求方式包括异步JavaScript和XML(asynchronousjavascript And xml，AJAX)请求方式，AJAX请求方式在无需重新加载整个网页的情况下，就能够更新部分网页的数据。需要说明的是，终端通过预置插件显示批量上传文件的上传进度和上传状态，当批量上传文件过程中，某一文件上传失败时，目标业务系统的单页面应用会根据错误码提示对应的警告信息。可选的，批量上传文件采取轮询上传，当一个文件上传失败时，并不影响其他未上传的文件。

最后，终端对缓存的目标业务系统的单页面应用增加模糊查询、批改变更集和数据存贮功能，模糊查询用于按照预置目标查找数据，批改变更集用于展示已批改记录，其中，iView是一套基于Vue.js的开源界面UI组件库，终端使用iView中的桌面table组件渲染出目标用户的批改变更集，终端采用预置模型弹出框显示批改变更集列表，减少页面之间的来回跳转，终端通过数据存贮功能为目标用户提供已存储的信息。

需要说明的是，终端对缓存的目标业务系统的单页面应用增加数据存贮功能，当目标用户在目标业务系统的单页面应用中进行业务操作时，终端发送目标数据到服务器，由服务器进行存储；当目标用户再次进行交互对象操作时，终端获取已存储的目标数据，根据预置模糊匹配原则为目标用户提示已存储的目标数据，得到数据存贮功能。可选的，终端通过选择按钮设置是否使用该数据存贮功能，预先设置待数据贮存的业务，当目标用户待数据贮存的业务操作时，终端自动将待数据贮存的业务的信息展示在目标业务系统的单页面应用中。

本发明实施例中，通过对目标业务系统中目标业务的报价、交互对象和批改功能构建单页面应用，并对单页面应用进行懒加载、缓存处理和页面布局优化，增强了目标业务系统的浏览器兼容性，提高目标业务系统的页面加载速度和运行效率。

上面对本发明实施例中基于单页面应用的优化方法进行了描述，下面对本发明实施例中基于单页面应用的优化装置进行描述，请参阅图3，本发明实施例中基于单页面应用的优化装置的一个实施例包括：

生成单元301，用于根据渐进式框架生成目标业务系统的至少一个单页面应用，目标业务系统的单页面应用用于提供目标业务的报价、交互对象和批改功能；

懒加载单元302，当获取到懒加载请求时，用于根据预置代码分割算法对目标业务系统的单页面应用进行懒加载；

缓存单元303，当检测到目标业务系统的单页面应用被加载时，用于根据预置缓存机制对已加载的目标业务系统的单页面应用进行缓存；

布局优化单元304，用于根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理。

本发明实施例中，通过对目标业务系统中目标业务的报价、交互对象和批改功能构建多个单页面应用，并对单页面应用进行懒加载、缓存处理和页面布局优化，增强了目标业务系统的浏览器兼容性，提高目标业务系统的页面加载速度和运行效率。

请参阅图4，本发明实施例中基于单页面应用的优化装置的另一个实施例包括：

生成单元301，用于根据渐进式框架生成目标业务系统的至少一个单页面应用，目标业务系统的单页面应用用于提供目标业务的报价、交互对象和批改功能；

懒加载单元302，当获取到懒加载请求时，用于根据预置代码分割算法对目标业务系统的单页面应用进行懒加载；

缓存单元303，当检测到目标业务系统的单页面应用被加载时，用于根据预置缓存机制对已加载的目标业务系统的单页面应用进行缓存；

布局优化单元304，用于根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理。

可选的，生成单元301还可以进一步包括：

加载子单元3011，用于将渐进式框架和路由管理器加载到预置主页面中；

初始化子单元3012，用于根据渐进式框架在预置主页面中初始化一个根视图实例，根视图实例包括路由管理器对应的路由对象，路由对象为根据预置语法规则创建的对象；

生成子单元3013，用于根据渐进式框架对目标业务系统中目标业务的报价、交互对象和批改功能生成对应的子视图实例；

映射子单元3014，用于通过路由管理器对每个子视图实例映射路由，得到不同的路由地址；

挂载子单元3015，用于通过不同的路由地址将每个子视图实例挂载到预置主页面中；

处理子单元3016，用于对根视图实例和多个子视图实例进行数据处理，得到多个单页面应用。

可选的，懒加载单元302还可以具体用于：

当获取到懒加载请求时，对目标业务系统的单页面应用构建异步组件；

根据预置代码分割算法设置异步组件的代码分块点，得到被代码分割的异步组件；

通过路由管理器对被代码分割的异步组件进行路由配置。

可选的，缓存单元303还可以进一步包括：

确定子单元3031，用于确定预置缓存机制为渐进式框架的持久连接抽象组件；

缓存子单元3032，当检测到目标业务系统的单页面应用被加载时，用于通过持久连接抽象组件对已加载的目标业务系统的单页面应用进行缓存，得到缓存页面；

去除子单元3033，当检测到缓存页面的数量大于预置阈值，并且存在新的子视图实例时，用于从缓存页面中去除在最长时长内从未访问过的单页面应用，预置阈值为根据持久连接抽象组件的第一属性设置的数值；

配置子单元3034，用于通过持久连接抽象组件中的第二属性配置非缓存的单页面应用。

可选的，缓存子单元3032还可以具体用于：

将已加载的目标业务系统的单页面应用增加到持久连接抽象组件的第三属性中，得到缓存页面；

当检测到请求的单页面应用存在缓存页面中时，从第三属性中读取请求的单页面应用；

当检测到请求的单页面应用不存在缓存页面中时，将请求的单页面应用增加到第三属性中。

可选的，布局优化单元304还可以具体用于：

根据界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局，页面布局包括菜单和多个标签；

根据超级文本标记语言的预置控件对缓存的目标业务系统的单页面应用增加文件批量上传功能；

对缓存的目标业务系统的单页面应用增加模糊查询、批改变更集和数据存贮功能，模糊查询用于按照预置目标查找数据，批改变更集用于展示已批改记录。

可选的，处理子单元3016还可以具体用于：

通过根视图实例和多个子视图实例生成单页面应用；

在预置主页面中加载状态管理器；

根据状态管理器生成目标对象；

将目标对象添加到根视图实例中；

通过状态管理器触发单页面应用之间的事件执行，事件执行用于指示根视图实例和多个子视图实例之间的数据处理状态。

本发明实施例中，通过对目标业务系统中目标业务的报价、交互对象和批改功能构建多个单页面应用，并对单页面应用进行懒加载、缓存处理和页面布局优化，增强了目标业务系统的浏览器兼容性，提高目标业务系统的页面加载速度和运行效率。

上面图3和图4从模块化功能实体的角度对本发明实施例中的基于单页面应用的优化装置进行详细描述，下面从硬件处理的角度对本发明实施例中基于单页面应用的优化设备进行详细描述。

图5是本发明实施例提供的一种基于单页面应用的优化设备的结构示意图，该基于单页面应用的优化设备500可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)501(例如，一个或一个以上处理器)和存储器509，一个或一个以上存储应用程序507或数据506的存储介质508(例如一个或一个以上海量存储设备)。其中，存储器509和存储介质508可以是短暂存储或持久存储。存储在存储介质508的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对基于单页面应用的优化设备中的一系列指令操作。更进一步地，处理器501可以设置为与存储介质508通信，在基于单页面应用的优化设备500上执行存储介质508中的一系列指令操作。

基于单页面应用的优化设备500还可以包括一个或一个以上电源502，一个或一个以上有线或无线网络接口503，一个或一个以上输入输出接口504，和/或，一个或一个以上操作系统505，例如Windows Serve，Mac OS X，Unix，Linux，FreeBSD等等。本领域技术人员可以理解，图5中示出的基于单页面应用的优化设备结构并不构成对基于单页面应用的优化设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在本发明所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

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

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

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (10)

1.一种基于单页面应用的优化方法，其特征在于，包括：

根据渐进式框架生成目标业务系统的至少一个单页面应用，所述目标业务系统的单页面应用用于提供目标业务的报价、交互对象和批改功能；

当获取到懒加载请求时，根据预置代码分割算法对所述目标业务系统的单页面应用进行懒加载；

当检测到所述目标业务系统的单页面应用被加载时，根据预置缓存机制对已加载的目标业务系统的单页面应用进行缓存；

根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理；

所述根据渐进式框架生成目标业务系统的至少一个单页面应用，所述目标业务系统的单页面应用用于提供所述目标业务的报价、交互对象和批改功能包括：

将渐进式框架和路由管理器加载到预置主页面中；

根据所述渐进式框架在所述预置主页面中初始化一个根视图实例，所述根视图实例包括所述路由管理器对应的路由对象，所述路由对象为根据预置语法规则创建的对象；

根据所述渐进式框架对目标业务系统中所述目标业务的报价、交互对象和批改功能生成对应的子视图实例；

通过所述路由管理器对每个子视图实例映射路由，得到不同的路由地址；

通过所述不同的路由地址将每个子视图实例挂载到所述预置主页面中；

对所述根视图实例和多个子视图实例进行数据处理，得到多个单页面应用；

所述当检测到所述目标业务系统的单页面应用被加载时，根据预置缓存机制对所述已加载的目标业务系统的单页面应用进行缓存包括：

确定预置缓存机制为所述渐进式框架的持久连接抽象组件；

当检测到所述目标业务系统的单页面应用被加载时，通过所述持久连接抽象组件对所述已加载的目标业务系统的单页面应用进行缓存，得到缓存页面；

当检测到所述缓存页面的数量大于预置阈值，并且存在新的子视图实例时，从所述缓存页面中去除在最长时长内从未访问过的单页面应用，所述预置阈值为根据所述持久连接抽象组件的第一属性设置的数值；

通过所述持久连接抽象组件中的第二属性配置非缓存的单页面应用；

所述根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理包括：

根据界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局，所述页面布局包括菜单和多个标签；

根据超级文本标记语言的预置控件对所述缓存的目标业务系统的单页面应用增加文件批量上传功能；

对所述缓存的目标业务系统的单页面应用增加模糊查询、批改变更集和数据存贮功能，所述模糊查询用于按照预置目标查找数据，所述批改变更集用于展示已批改记录。

2.根据权利要求1所述的基于单页面应用的优化方法，其特征在于，所述当获取到懒加载请求时，根据预置代码分割算法对所述目标业务系统的单页面应用进行懒加载包括：

当获取到懒加载请求时，对所述目标业务系统的单页面应用构建异步组件；

根据预置代码分割算法设置所述异步组件的代码分块点，得到被代码分割的异步组件；

通过所述路由管理器对所述被代码分割的异步组件进行路由配置。

3.根据权利要求1所述的基于单页面应用的优化方法，其特征在于，所述当检测到所述目标业务系统的单页面应用被加载时，通过所述持久连接抽象组件对所述已加载的目标业务系统的单页面应用进行缓存，得到缓存页面包括：

将所述已加载的目标业务系统的单页面应用增加到所述持久连接抽象组件的第三属性中，得到缓存页面；

当检测到请求的单页面应用存在所述缓存页面中时，从所述第三属性中读取所述请求的单页面应用；

当检测到所述请求的单页面应用不存在所述缓存页面中时，将所述请求的单页面应用增加到所述第三属性中。

4.根据权利要求1所述的基于单页面应用的优化方法，其特征在于，所述对所述根视图实例和多个子视图实例进行数据处理，得到多个单页面应用包括：

通过所述根视图实例和所述多个子视图实例生成单页面应用；

在所述预置主页面中加载状态管理器；

根据所述状态管理器生成目标对象；

将所述目标对象添加到所述根视图实例中；

通过所述状态管理器触发所述单页面应用之间的事件执行，所述事件执行用于指示所述根视图实例和所述多个子视图实例之间的数据处理状态。

5.一种基于单页面应用的优化装置，其特征在于，所述基于单页面应用的优化装置执行权利要求1-4中任意一项所述的基于单页面应用的优化方法，所述基于单页面应用的优化装置包括：

生成单元，用于根据渐进式框架生成目标业务系统的至少一个单页面应用，所述目标业务系统的单页面应用用于提供所述目标业务的报价、交互对象和批改功能；

懒加载单元，当获取到懒加载请求时，用于根据预置代码分割算法对所述目标业务系统的单页面应用进行懒加载；

缓存单元，当检测到所述基于单页面应用的单页面应用被加载时，用于根据预置缓存机制对已加载的目标业务系统的单页面应用进行缓存；

布局优化单元，用于根据超级文本标记语言和界面设计组件库对缓存的目标业务系统的单页面应用进行页面布局和优化处理。

6.根据权利要求5所述的基于单页面应用的优化装置，其特征在于，所述懒加载单元具体用于：

当获取到懒加载请求时，对所述目标业务系统的单页面应用构建异步组件；

根据预置代码分割算法设置所述异步组件的代码分块点，得到被代码分割的异步组件；

通过所述路由管理器对所述被代码分割的异步组件进行路由配置。

7.根据权利要求5所述的基于单页面应用的优化装置，其特征在于，所述缓存单元包括缓存子单元，所述缓存子单元具体用于：

将所述已加载的目标业务系统的单页面应用增加到所述持久连接抽象组件的第三属性中，得到缓存页面；

当检测到请求的单页面应用存在所述缓存页面中时，从所述第三属性中读取所述请求的单页面应用；

当检测到所述请求的单页面应用不存在所述缓存页面中时，将所述请求的单页面应用增加到所述第三属性中。

8.根据权利要求5所述的基于单页面应用的优化装置，其特征在于，所述生成单元包括处理子单元，所述处理子单元具体用于：

通过所述根视图实例和所述多个子视图实例生成单页面应用；

在所述预置主页面中加载状态管理器；

根据所述状态管理器生成目标对象；

将所述目标对象添加到所述根视图实例中；

通过所述状态管理器触发所述单页面应用之间的事件执行，所述事件执行用于指示所述根视图实例和所述多个子视图实例之间的数据处理状态。

9.一种基于单页面应用的优化设备，其特征在于，所述基于单页面应用的优化设备包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互联；

所述至少一个处理器调用所述存储器中的所述指令，以使得所述基于单页面应用的优化设备执行如权利要求1-4中任意一项所述基于单页面应用的优化方法。

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现如权利要求1-4中任意一项所述基于单页面应用的优化方法。