一种基于Angular的路由机制的多文档展示方法技术

本发明专利技术公开了一种基于Angular的路由机制的多文档展示方法，本发明专利技术包括如下步骤：S1、基于angular的路由复用策略搭建前端框架，并在前端框架的窗口中划出建立功能展板的区域；S2、基于组件的动态渲染机制定义动态组件，实现功能展板的自定义设计；S3、基于功能的模块拆分机制对所述功能展板中的具体功能采用异步模块进行拆分；S4、基于动态组件与异步模块的交互机制建立功能展板与异步模块之间的路由交互及参数传递；本发明专利技术的前端框架采用路由复用策略搭建，通过路由快照存储、还原、生命周期管理机制，实现多页签关联路由快照并加载复用，摒弃传统Iframe隔离加载效率慢、交互及数据共享方式困难，大大提升界面加载效率，提升用户交互体验。

A multi document display method based on angular routing mechanism

【技术实现步骤摘要】
一种基于Angular的路由机制的多文档展示方法
本专利技术涉及web前端开发
，具体地说是一种基于基于Angular的路由机制的多文档展示方法。
技术介绍
随着浏览器性能及互联网技术的快速发展，web应用越来越广泛，规模及复杂度也越来越高；随着前端技术的不断发展，web工程的建立也越来越趋向于模块化、框架化、平台化。浏览器多文档展示一般通过Ifarame实现，但是Ifarame隔离加载效率慢、交互及数据共享方式困难，大大的影响界面的加载效率，影响用户的交互体验。现在对于框架工程的最大要求就是核心底层逻辑的沉淀，支持上层业务逻辑的可扩展、可配置、松耦合的插件化需求，而插件化实现的关键就是动态加载，所以探索前端框架的插件化实现方案显得尤为重要。而现在的web应用菜单栏上的功能模块大都是固定的，在框架搭建时就已经完成其功能的定义，这样的框架缺乏扩展性。
技术实现思路
本专利技术的目的是针对以上不足，提供一种基于Angular的路由机制的多文档展示方法，适用于软件框架对菜单模块自定义、可配置、可插拔的插件化场景需求。本专利技术所采用技术方案是：一种基于Angular的路由机制的多文档展示方法，包括如下步骤：S1、基于angular的路由复用策略搭建前端框架，并在前端框架的窗口中划出建立功能展板的区域；S2、基于组件的动态渲染机制定义动态组件，实现功能展板的自定义设计；S3、基于功能的模块拆分机制对所述功能展板中的具体功能采用异步模块进行拆分；S4、基于动态组件与异步模块的交互机制建立功能展板与异步模块之间的路由交互及参数传递；S5、基于Angular打包机制拆分异步子模块，实现异步子模块的完全与前端框架解耦。作为进一步的优化，本专利技术在步骤S1中，所述路由复用策略包括：当打开新的标签页时，建立该标签页的快照并存储到缓存中；当激活已打开的标签页时，从缓存中获取该标签页的快照文件在窗口进行展示；当关闭已打开的标签页时，存储于缓存中的对应的快照文件在设定时间内销毁。作为进一步的优化，在步骤S2中，定义前端框架组件，实现组件样式及事件动作可配置，运行时动态加载、渲染组件，使前端框架中的功能展板能够自定义设计。作为进一步的优化，在步骤S4中，对动态组件封装必要的接口，实现前端框架与异步子模块的路由交互及相关功能的模块化扩展需要。作为进一步的优化，所述动态组件定义接口时执行以下代码架构：在服务端配置动态组件的事件时，绑定相关的代码架构，在功能展板执行相关的配置操作时，能够触发相关功能，并给该功能传参。作为进一步的优化，在步骤S5中，拆分异步模块时，需要在服务端建立动态组件和异步子模块的配置文件，动态组件和异步子模块在运行时读取服务端的配置文件进行加载。作为进一步的优化，所述服务端的配置文件的配置参数包括动态组件的样式、动态组件的结构、动态组件的事件绑定以及异步模块的路由信息。作为进一步的优化，在步骤S5中，单独开发用于实现相应功能的异步子模块，利用Angular打包机制，将各异步子模块打包成前端框架能够加载运行的包。本专利技术具有以下优点：1、本专利技术的前端框架采用路由复用策略搭建，通过路由快照存储、还原、生命周期管理机制，实现多页签关联路由快照并加载复用，摒弃传统Iframe隔离加载效率慢、交互及数据共享方式困难，大大提升界面加载效率，提升用户交互体验；2、本专利技术的多文档展示方法，动态组件的样式渲染及事件绑定、异步模块的路由加载、前端打包拆分子模块的相关机制，实现前端框架的功能展板的可自定义、可配置，及相关功能的可扩展与可插拔，在加载不同页签时，按需加载菜单模块，根据实际网页需要显示相应菜单及功能；3、本专利技术的多问当展示方法中，异步子模块能够脱离前端框架单独开发，最后通过前端打包机制，将异步子模块打包成动态组件能够加载运行的包，能够提高项目开发的效率，节约人力成本。具体实施方式下面通过具体实施例对本专利技术作进一步说明，以使本领域的技术人员可以更好地理解本专利技术并能予以实施，但所举实施例不作为对本专利技术的限定，在不冲突的情况下，本专利技术实施例以及实施例中的技术特征可以相互结合。需要理解的是，在本专利技术实施例的描述中，“第一”、“第二”等词汇，仅用于区分描述的目的，而不能理解为指示或暗示相对重要性，也不能理解为指示或暗示顺序。在本专利技术实施例中的“多个”，是指两个或两个以上。本专利技术实施例中的属于“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，单独存在B，同时存在A和B这三种情况。另外，本文中字符“/”一般表示前后关联对象是一种“或”关系。本实施例提供一种基于Angular的路由机制的多文档展示方法，包括如下步骤：S1、基于angular的路由复用策略搭建前端框架，并在前端框架的窗口中划出建立功能展板的区域；所述路由复用策略包括：当打开新的标签页时，建立该标签页的快照并存储到缓存中；当激活已打开的标签页时，从缓存中获取该标签页的快照文件在窗口进行展示；当关闭已打开的标签页时，存储于缓存中的对应的快照文件在设定时间内销毁。S2、基于组件的动态渲染机制定义动态组件，实现功能展板的自定义设计；具体的，前端框架在搭建时，预置一些能够动态生成的组件，即动态组件，这些组件能够在运行时动态加载HTML或CSS，从而实现功能展板的自定义渲。S3、基于功能的模块拆分机制对所述功能展板中的具体功能采用异步模块进行拆分，异步模块为所有异步子模块的统称；S4、基于动态组件与异步模块的交互机制建立功能展板与异步模块之间的路由交互及参数传递；对动态组件封装必要的接口，实现前端框架与异步子模块的路由交互及相关功能的模块化扩展需要，在HTML网页设计时绑定相关事件，能够在网页运行时，在功能展板上调用相关功能模块。所述动态组件定义接口时执行以下代码架构：在服务端配置动态组件的事件时，绑定相关的代码架构，在功能展板执行相关的配置操作时，能够触发相关功能，并给该功能传参；S5、要在服务端建立动态组件和异步子模块的配置文件，动态组件和异步子模块在运行时读取服务端的配置文件进行加载，所述服务端的配置文件的配置参数包括动态组件的样式、动态组件的结构、动态组件的事件绑定以及异步模块的路由信息。S6、基于Angular打包机制拆分异步子模块，实现异步子模块的完全与前端框架解耦。预先单独开发用于实现相应功能的异步子模块，利用Angular打包机制，将各异步子模块打包成前端框架能够加载运行的包。以上所述实施例仅是为充分说明本专利技术而所举的较佳的实施例，本专利技术的保护范围不限于此。本
的技术人员在本专利技术基础上所作的等同替代或变换，均在本专利技术的保护范围之内。本专利技术的保护范围以权利要求书为准。本文档来自技高网...

【技术保护点】
1.一种基于Angular的路由机制的多文档展示方法，其特征在于：包括如下步骤：/nS1、基于angular的路由复用策略搭建前端框架，并在前端框架的窗口中划出建立功能展板的区域；/nS2、基于组件的动态渲染机制定义动态组件，实现功能展板的自定义设计；/nS3、基于功能的模块拆分机制对所述功能展板中的具体功能采用异步模块进行拆分；/nS4、基于动态组件与异步模块的交互机制建立功能展板与异步模块之间的路由交互及参数传递；/nS5、基于Angular打包机制拆分异步子模块，实现异步子模块的完全与前端框架解耦。/n

【技术特征摘要】
1.一种基于Angular的路由机制的多文档展示方法，其特征在于：包括如下步骤：
S1、基于angular的路由复用策略搭建前端框架，并在前端框架的窗口中划出建立功能展板的区域；
S2、基于组件的动态渲染机制定义动态组件，实现功能展板的自定义设计；
S3、基于功能的模块拆分机制对所述功能展板中的具体功能采用异步模块进行拆分；
S4、基于动态组件与异步模块的交互机制建立功能展板与异步模块之间的路由交互及参数传递；
S5、基于Angular打包机制拆分异步子模块，实现异步子模块的完全与前端框架解耦。


2.根据权利要求1所述的多文档展示方法，其特征在于：在步骤S1中，所述路由复用策略包括：
当打开新的标签页时，建立该标签页的快照并存储到缓存中；
当激活已打开的标签页时，从缓存中获取该标签页的快照文件在窗口进行展示；
当关闭已打开的标签页时，存储于缓存中的对应的快照文件在设定时间内销毁。


3.根据权利要求2所述的插件化方法，其特征在于：在步骤S2中，定义前端框架组件，实现组件样式及事件动作可配置，运行时动态加载、渲染组件，使前端框架中的功能展板能够...

【专利技术属性】
技术研发人员：杨良，黄文超，周祥国，彭晓迪，
申请(专利权)人：浪潮通用软件有限公司，
类型：发明
国别省市：山东;37