基于异步加载页面的前端路由方法及装置制造方法及图纸

本申请实施例公开了一种基于异步加载页面的前端路由方法及装置，该方法包括根据视图层的展示需求参数从数据中心获取对应的第一数据信息；对所述第一数据信息进行节点、样式以及事件的初始化处理；将初始化处理后的第二数据信息在所述视图层进行展示，本方案提高了网页设计开发过程中的数据展示效率。

【技术实现步骤摘要】
基于异步加载页面的前端路由方法及装置
本申请实施例涉及计算机技术，尤其涉及一种基于异步加载页面的前端路由方法及装置。
技术介绍
随着数据驱动的数字化信息时代的发展，用户对网页的加载要求也越来越高，如何更好的管理冗杂的页面加载，以及如何更快的提升浏览器的渲染页面速度成为日前网页开发领域的一个热点话题。对于页面加载，在过去的一个阶段内我们所见到的系统大多是由很多页面组成，一个站点会加载很多页面，而在网页的加载速度上耗时过大，以及在冗杂的页面上进行修改和维护成为了阻碍公司更多盈利的路障，为此很多专家级的开发人员会投入大量时间、人力等为此进行模块化、规范化开发，由此路由的概念应运而生。路由指根据不同的url地址展示不同的内容或页面，早期的路由是根据url来重载页面，即后端控制页面跳转及加载，由于页面越来越复杂，服务器压力越来越大，随着ajax(异步刷新技术)的出现，页面实现非reload就能刷新数据，让前端也可以控制url自行管理，前端路由由此而生。前端路由即前端模拟的一种页面加载、页面跳转机制，利用该技术实现可模拟出单页面的运行方式，根据业务需求可以定制化的加载所需要的模块，实现页面的异步加载，大部分页面的结构不变，只是修改了部分页面的功能以及加载方式，然而现有的前端路由技术中对数据的展示效率较低，需要改进。
技术实现思路
本申请提供了一种基于异步加载页面的前端路由方法及装置，提高了网页设计开发过程中的数据展示效率。第一方面，本申请实施例提供了一种基于异步加载页面的前端路由方法，包括：根据视图层的展示需求参数从数据中心获取对应的第一数据信息；对所述第一数据信息进行节点、样式以及事件的初始化处理；将初始化处理后的第二数据信息在所述视图层进行展示。第二方面，本申请实施例还提供了一种基于异步加载页面的前端路由装置，包括：数据信息获取模块，用于根据视图层的展示需求参数从数据中心获取对应的第一数据信息；数据初始化模块，用于对所述第一数据信息进行节点、样式以及事件的初始化处理；数据展示模块，用于将初始化处理后的第二数据信息在所述视图层进行展示。第三方面，本申请实施例还提供了一种计算设备，包括：处理器、存储器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现如本申请实施例所述的基于异步加载页面的前端路由方法。第四方面，本申请实施例还提供了一种包含计算设备可执行指令的存储介质，所述计算设备可执行指令在由计算设备处理器执行时用于执行本申请实施例所述的基于异步加载页面的前端路由方法。本方案中，根据视图层的展示需求参数从数据中心获取对应的第一数据信息；对所述第一数据信息进行节点、样式以及事件的初始化处理；将初始化处理后的第二数据信息在所述视图层进行展示，提高了网页设计开发过程中的数据展示效率。附图说明通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：图1是本申请实施例提供的一种基于异步加载页面的前端路由方法的架构示意图；图2是本申请实施例提供的一种基于异步加载页面的前端路由方法的流程图；图3是本申请实施例提供的一种页面路由的设计框架示意图；图4是本申请实施例提供的另一种基于异步加载页面的前端路由方法的流程图；图5是本申请实施例提供的一种基于异步加载页面的前端路由装置的结构框图；图6是本申请实施例提供的一种计算设备的结构示意图。具体实施方式下面结合附图和实施例对本申请作进一步的详细说明。可以理解的是，此处所描述的具体实施例用于解释本申请，而非对本申请的限定。另外还需要说明的是，为了便于描述，附图中仅示出了与本申请相关的部分而非全部结构。本方案中的架构框架如图1所示，图1是本申请实施例提供的一种基于异步加载页面的前端路由方法的架构示意图，其采用MVC(Model-View-Controller，模型视图控制器)模式与MVP(Model-View-Presenter)模式结合的jQuery框架实现，其中，数据模型Model驱动视图View变化，通过控制器Controller的指令及操作改变数据模型，从而改变视图View，而视图View与控制器Controller双向绑定，即视图View改变会激发数据模型Model变化，进而反馈于视图View，该种数据-控制-视图的绑定与分离模式优化了对研发的支持。在当前数据驱动下的视图主流市场中，MVC模式已经逐步演化为前端与后端分离，研发过程中，如果没有充足的后台以及前端知识的积累无法进行有效的开发，后端人员无法快速制作出UI界面，或前端人员无法获得数据接口，会导致工程和项目超时或延期。而本申请中基于jQuery的web前端框架，其重点在于可以实现模拟测试环境，且其集成了自身的UI设计，通过简单的数据配置，以及灵活的事件绑定，即可轻松便捷地进行数据的展示，以及增、删、改、查操作。图2是本申请实施例提供的一种基于异步加载页面的前端路由方法的流程图，可适用于网页开发测试过程中对数据进行预展示的情况，该方法可以由本申请实施例提供的计算设备来执行，该计算设备的基于异步加载页面的前端路由装置可采用软件和/或硬件的方式实现，如图2所示，本实施例提供的具体方案如下：步骤S101、根据视图层的展示需求参数从数据中心获取对应的第一数据信息。在一个实施例中，根据视图层的展示需求参数通过设置的页面路由的构造函数从数据中心请求对应的第一数据信息，示例性的，可以在页面路由的构造函数中通过url，ajax请求从数据中心请求对应的第一数据信息。其中，该视图层的展示需求参数表征了视图层的展示需求，如在网页开发测试过程中，通常需要预览某个事件的展示效果(即视图层的展示需求)，事件具体可以是某学生的一张成绩单或者一个班级所有学生的成绩单或者某人一天的定位信息等，在展示之前需要获取与真实数据相似的数据，因此通过上述的页面路由可以模拟测试环境，从数据中心获取有效数据，以提供给网页前端进行展示。具体的，获取的第一数据信息可以是json文件中的数据和/或后端开发人员提供的数据接口中的数据。步骤S102、对所述第一数据信息进行节点、样式以及事件的初始化处理。在一个实施例中，在页面路由的构造函数中通过参数配置器集成的默认的初始化节点、样式以及事件对所述第一数据信息进行初始化处理。步骤S103、将初始化处理后的第二数据信息在所述视图层进行展示。在一个实施例中，第二数据信息为第一数据信息经过初始化处理后的数据，将该第二数据信息相应的在视图层进行展示。图3是本申请实施例提供的一种页面路由的设计框架示意图，如图3所示，其提供了完整的数据传输和展示机制，具体的，视图层1013的展示需求在框架核心构造函数1012中通过url/ajax请求来请求数据中心1011中的数据，请求的数据可以是本地的json文件或者是后端开发人员提供的数据接口url，在获取到请求数据后，框架核心构造函数1012通过参数配置器调用框架默认的初始化节点、样式、事件1014进行数据初始化并显示在视图层1013中。其中，在视图层1013的展示过程中，如果用户对框架默认的初始化节点、样式、事件1014的内容需要进行修改，则可通过用户自定义配置接口进行配置，该配置通过用户自定义构造检测器1015后经过本文档来自技高网...

【技术保护点】
1.基于异步加载页面的前端路由方法，其特征在于，包括：根据视图层的展示需求参数从数据中心获取对应的第一数据信息；对所述第一数据信息进行节点、样式以及事件的初始化处理；将初始化处理后的第二数据信息在所述视图层进行展示。

【技术特征摘要】
1.基于异步加载页面的前端路由方法，其特征在于，包括：根据视图层的展示需求参数从数据中心获取对应的第一数据信息；对所述第一数据信息进行节点、样式以及事件的初始化处理；将初始化处理后的第二数据信息在所述视图层进行展示。2.根据权利要求1所述的方法，其特征在于，所述对所述第一数据信息进行节点、样式以及事件的初始化处理包括：在页面路由的构造函数中通过参数配置器集成的默认的初始化节点、样式以及事件对所述第一数据信息进行初始化处理。3.根据权利要求1或2所述的方法，其特征在于，在将初始化处理后的第二数据信息在所述视图层进行展示之后，还包括：接收通过用户自定义配置接口对所述第二数据信息的节点、样式以及事件内容进行编辑的操作信息；通过用户自定义构造检测器将所述操作信息反馈至所述页面路由的构造函数；所述页面路由的构造函数根据所述操作信息对所述第二数据信息的节点、样式以及事件内容进行初始化，并将初始化后的第三数据信息进行展示。4.根据权利要求3所述的方法，其特征在于，所述页面路由的构造函数中挂载有节点构造器，所述节点构造器用于根据数据信息的数量以及展示需求参数创建DOM元素，所述DOM元素包括DOM节点的类型以及样式。5.根据权利要求3所述的方法，其特征在于，所述页面路由的构造函...

【专利技术属性】
技术研发人员：万月亮，赵亮，火一莽，
申请(专利权)人：北京锐安科技有限公司，
类型：发明
国别省市：北京,11