CN111209508A - 一种基于Angular的路由机制的多文档展示方法 - Google Patents
一种基于Angular的路由机制的多文档展示方法 Download PDFInfo
- Publication number
- CN111209508A CN111209508A CN201911368100.9A CN201911368100A CN111209508A CN 111209508 A CN111209508 A CN 111209508A CN 201911368100 A CN201911368100 A CN 201911368100A CN 111209508 A CN111209508 A CN 111209508A
- Authority
- CN
- China
- Prior art keywords
- asynchronous
- routing
- dynamic component
- end framework
- component
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
本发明公开了一种基于Angular的路由机制的多文档展示方法，本发明包括如下步骤：S1、基于angular的路由复用策略搭建前端框架，并在前端框架的窗口中划出建立功能展板的区域；S2、基于组件的动态渲染机制定义动态组件，实现功能展板的自定义设计；S3、基于功能的模块拆分机制对所述功能展板中的具体功能采用异步模块进行拆分；S4、基于动态组件与异步模块的交互机制建立功能展板与异步模块之间的路由交互及参数传递；本发明的前端框架采用路由复用策略搭建，通过路由快照存储、还原、生命周期管理机制，实现多页签关联路由快照并加载复用，摒弃传统Iframe隔离加载效率慢、交互及数据共享方式困难，大大提升界面加载效率，提升用户交互体验。
Description
技术领域
本发明涉及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打包机制，将各异步子模块打包成前端框架能够加载运行的包。
以上所述实施例仅是为充分说明本发明而所举的较佳的实施例，本发明的保护范围不限于此。本技术领域的技术人员在本发明基础上所作的等同替代或变换，均在本发明的保护范围之内。本发明的保护范围以权利要求书为准。
Claims (8)
1.一种基于Angular的路由机制的多文档展示方法，其特征在于：包括如下步骤：
S1、基于angular的路由复用策略搭建前端框架，并在前端框架的窗口中划出建立功能展板的区域；
S2、基于组件的动态渲染机制定义动态组件，实现功能展板的自定义设计；
S3、基于功能的模块拆分机制对所述功能展板中的具体功能采用异步模块进行拆分；
S4、基于动态组件与异步模块的交互机制建立功能展板与异步模块之间的路由交互及参数传递；
S5、基于Angular打包机制拆分异步子模块，实现异步子模块的完全与前端框架解耦。
2.根据权利要求1所述的多文档展示方法，其特征在于：在步骤S1中，所述路由复用策略包括：
当打开新的标签页时，建立该标签页的快照并存储到缓存中；
当激活已打开的标签页时，从缓存中获取该标签页的快照文件在窗口进行展示；
当关闭已打开的标签页时，存储于缓存中的对应的快照文件在设定时间内销毁。
3.根据权利要求2所述的插件化方法，其特征在于：在步骤S2中，定义前端框架组件，实现组件样式及事件动作可配置，运行时动态加载、渲染组件，使前端框架中的功能展板能够自定义设计。
4.根据权利要求1所述的多文档展示方法，其特征在于：在步骤S4中，对动态组件封装必要的接口，实现前端框架与异步子模块的路由交互及相关功能的模块化扩展需要。
5.根据权利要求4所述的多文档展示方法，其特征在于：所述动态组件定义接口时执行以下代码架构：
在服务端配置动态组件的事件时，绑定相关的代码架构，在功能展板执行相关的配置操作时，能够触发相关功能，并给该功能传参。
6.根据权利要求1所述的多文档展示方法，其特征在于：在步骤S5中，拆分异步模块时，需要在服务端建立动态组件和异步子模块的配置文件，动态组件和异步子模块在运行时读取服务端的配置文件进行加载。
7.根据权利要求6所述的多文档展示方法，其特征在于：所述服务端的配置文件的配置参数包括动态组件的样式、动态组件的结构、动态组件的事件绑定以及异步模块的路由信息。
8.根据权利要求1所述的插件化方法，其特征在于：在步骤S5中，单独开发用于实现相应功能的异步子模块，利用Angular打包机制，将各异步子模块打包成前端框架能够加载运行的包。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911368100.9A CN111209508A (zh) | 2019-12-26 | 2019-12-26 | 一种基于Angular的路由机制的多文档展示方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911368100.9A CN111209508A (zh) | 2019-12-26 | 2019-12-26 | 一种基于Angular的路由机制的多文档展示方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111209508A true CN111209508A (zh) | 2020-05-29 |
Family
ID=70788350
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911368100.9A Pending CN111209508A (zh) | 2019-12-26 | 2019-12-26 | 一种基于Angular的路由机制的多文档展示方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111209508A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112380482A (zh) * | 2020-12-07 | 2021-02-19 | 四川长虹电器股份有限公司 | 可动态配置标签页的模态框组件 |
| CN113296943A (zh) * | 2021-05-17 | 2021-08-24 | 广州文石信息科技有限公司 | 一种多文档多进程显示方法、装置、设备和存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103645968A (zh) * | 2013-12-02 | 2014-03-19 | 北京奇虎科技有限公司 | 一种浏览器状态复原方法和装置 |
| CN108255853A (zh) * | 2016-12-29 | 2018-07-06 | 卓望数码技术（深圳）有限公司 | 一种插件式的请求异步处理方法以及系统 |
| CN108664239A (zh) * | 2018-05-21 | 2018-10-16 | 中信百信银行股份有限公司 | 一种基于微服务的跨技术栈web前端开发系统及方法 |
| CN109284103A (zh) * | 2018-08-30 | 2019-01-29 | 长春玖佰软件技术有限公司 | 一种基于控件开发模式的Web应用开发及更新方法 |
-
2019
- 2019-12-26 CN CN201911368100.9A patent/CN111209508A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103645968A (zh) * | 2013-12-02 | 2014-03-19 | 北京奇虎科技有限公司 | 一种浏览器状态复原方法和装置 |
| CN108255853A (zh) * | 2016-12-29 | 2018-07-06 | 卓望数码技术（深圳）有限公司 | 一种插件式的请求异步处理方法以及系统 |
| CN108664239A (zh) * | 2018-05-21 | 2018-10-16 | 中信百信银行股份有限公司 | 一种基于微服务的跨技术栈web前端开发系统及方法 |
| CN109284103A (zh) * | 2018-08-30 | 2019-01-29 | 长春玖佰软件技术有限公司 | 一种基于控件开发模式的Web应用开发及更新方法 |
Non-Patent Citations (3)
| Title |
|---|
| OLD_BIN: ""vue 里主动销毁 keep-alive 缓存的组件"", 《博客》 * |
| 哈哈N: ""【vue学习】动态组件和异步组件"", 《CSDN》 * |
| 绝对零度: ""vue keep-alive实现动态缓存以及缓存销毁"", 《博客》 * |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112380482A (zh) * | 2020-12-07 | 2021-02-19 | 四川长虹电器股份有限公司 | 可动态配置标签页的模态框组件 |
| CN113296943A (zh) * | 2021-05-17 | 2021-08-24 | 广州文石信息科技有限公司 | 一种多文档多进程显示方法、装置、设备和存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102495735A (zh) | web 端UI组件应用框架系统 | |
| CN107515776A (zh) | 业务不间断升级方法、待升级节点和可读存储介质 | |
| US8887132B1 (en) | Application runtime environment and framework | |
| CN104573066B (zh) | 页面复用方法及装置 | |
| CN101699405B (zh) | 一种宿主程序和插件及插件间进行交互的方法及装置 | |
| CN112114784A (zh) | 一种基于Single-Spa的前端微服务化系统 | |
| CN110109659A (zh) | 一种实现前端应用脚手架的系统和服务器 | |
| CN101154157A (zh) | 为JavaScript应用提供全球化功能的系统和方法 | |
| CN111209508A (zh) | 一种基于Angular的路由机制的多文档展示方法 | |
| CN110908712A (zh) | 移动端跨平台的数据处理方法和设备 | |
| CN105302578A (zh) | 一种拖拽式布局配置的门户综合管理系统 | |
| CN112632437A (zh) | 一种网页页面生成方法、装置及计算机可读存储介质 | |
| CN103176844A (zh) | 一种ie6内核与新型ie内核的切换方法和系统 | |
| CN107562425A (zh) | 基于Hybrid应用的单页面应用创建方法及装置 | |
| CN110399119A (zh) | 一种组件化构建方法、装置、电子设备及存储介质 | |
| CN103019538A (zh) | 一种在终端中实现应用界面的方法和系统 | |
| CN109445775B (zh) | 一键活动内嵌代码方法、装置及计算机可读存储介质 | |
| US6993713B2 (en) | Web content management software utilizing a workspace aware JSP servlet | |
| US11361146B2 (en) | Memory-efficient document processing | |
| WO2010123048A1 (ja) | 編集装置、編集方法およびプログラム | |
| CN110580174A (zh) | 应用组件生成方法、服务器及终端 | |
| CN112235357A (zh) | 跨平台应用开发系统 | |
| CN112667305A (zh) | 页面展示方法及装置 | |
| US20060085746A1 (en) | System, method and computer program product for web site editing | |
| CN111580804B (zh) | 一种软件项目开发的方法和装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |