一种Html下基于依赖注入及路径映射的前端整合方法转让专利
申请号 : CN202010666102.2
文献号 : CN111797357A
文献日 : 2020-10-20
发明人 : 裴磊
申请人 : 泰安协同软件有限公司
摘要 :
权利要求 :
1.一种Html下基于依赖注入及路径映射的前端整合方法,其特征在于:包括:
框架页及依赖注入形式:框架页除实现新系统基本功能外,负责组织不同旧系统依赖的注入,及对旧功能的嵌入;
文档结构的组织:多系统情况下,需要有多个init.js文件,分别配置相应系统的依赖,依照系统不同,组织不同的文件夹,在相应文件夹中加入初始化所需的文件包;
虚拟index.html页的实现:采用路径映射的形式,将指向不同文件夹下的请求均映射到统一的一个实体文件地址:所述前端整合方法如下:
使用单一框架页,基于对依赖的注入、路径的映射;实现来自不同系统的旧功能,在原有代码不做任何调整的情况下,进行功能整合。
2.根据权利要求1所述的一种Html下基于依赖注入及路径映射的前端整合方法,其特征在于:在html页面中,依赖包含:js脚本或方法依赖、css样式依赖、公共变量依赖、dom依赖。
3.根据权利要求1所述的一种Html下基于依赖注入及路径映射的前端整合方法,其特征在于:单一系统而言,依赖注入的步骤为:框架页调取入口js文件,根据入口js文件中的相关依赖的配置,加载相应依赖,在依赖加载完成后加载相应的功能模块。
4.根据权利要求1所述的一种Html下基于依赖注入及路径映射的前端整合方法,其特征在于:依赖注入在多系统情况下,需要有多个init.js文件,分别配置相应系统的依赖,加载相应依赖,在依赖加载完成后加载相应的功能模块。
5.根据权利要求1所述的一种Html下基于依赖注入及路径映射的前端整合方法,其特征在于:路径的组织有两部分:虚拟index.html页的实现、功能文件路径调用的实现。
6.根据权利要求1所述的一种Html下基于依赖注入及路径映射的前端整合方法,其特征在于:功能的切换形式:同文件夹下的功能切换,使用index.html中的iframe嵌入;不同文件夹下功能的切换采用在不同虚拟index.html间的跳转实现。
7.根据权利要求1所述的一种Html下基于依赖注入及路径映射的前端整合方法,其特征在于:功能文件的加载路径,采用预先配置的方式实现,不同功能单元视配置各自的主文件地址及虚拟index.html地址。
8.根据权利要求1所述的一种Html下基于依赖注入及路径映射的前端整合方法,其特征在于:还包括与系统相连的维护模块,该模块用于对系统故障进行预警。
说明书 :
一种Html下基于依赖注入及路径映射的前端整合方法
技术领域
背景技术
发明内容
文档结构的组织:多系统情况下,需要有多个init.js文件,分别配置相应系统的依赖,依照系统不同,组织不同的文件夹,在相应文件夹中加入初始化所需的文件包;
虚拟index.html页的实现:采用路径映射的形式,将指向不同文件夹下的请求均映射到统一的一个实体文件地址:
所述前端整合方法如下:
使用单一框架页,基于对依赖的注入、路径的映射;实现来自不同系统的旧功能,在原有代码不做任何调整的情况下,进行功能整合。
(2)整合各功能单元的框架页唯一,对框架页中相同功能的维护简单,不存在重复工作,提高了效率;
(3)通过设计的与系统相连的维护模块,通过维护模块便于对系统进行监控预警,方便第一时间进行维护,确保系统的运行。
附图说明
具体实施方式
框架页及依赖注入形式:框架页(如index.html)除实现新系统基本功能外,负责组织不同旧系统依赖的注入,及对旧功能的嵌入(如使用iframe加载旧功能的xx.html页面);在html页面中,依赖包含:js脚本或方法依赖、css样式依赖、公共变量依赖、dom依赖;对于单一系统而言,依赖注入的步骤为:框架页调取入口js文件(如init.js),根据入口js文件中的相关依赖的配置,加载相应依赖,在依赖加载完成后加载相应的功能模块;采用依赖注入的形式,即能保证框架页中所嵌入的功能项的依赖得以满足;又能动态的调整依赖项,而加载不同的功能单元,且保证不同功能单元间依赖项不同时出现从而不会产生冲突,进而保证了来自于不同系统的不同功能可无需进行调整,而直接应用;
文档结构的组织:多系统情况下,需要有多个init.js文件,分别配置相应系统的依赖,依照系统不同,组织不同的文件夹(如文件夹dirA对应A系统、文件夹B对应B系统),在相应文件夹中加入初始化所需的文件包;基于依赖注入的此种文档结构,新增的内容与原各系统中的功能内容互不影响,在各功能单元做出调整需升级时,可直接覆盖掉旧文件,而不需要针对新系统再次对功能单元做调整,在降低后期运营维护工作的同时,也降低了功能差异性和bug产生率;
路径的组织、映射及功能的切换形式:以上所述的文档组织结构下,路径的组织有两部分:虚拟index.html页的实现、功能文件路径调用的实现,功能的切换形式为:同文件夹下的功能切换,使用index.html中的iframe嵌入;不同文件夹下功能的切换采用在不同虚拟index.html间的跳转实现;
虚拟index.html页的实现:采用路径映射的形式,将指向DirA/xx/index.html、DirB/xx/index.html、DirC/xx/index.html下的请求均映射到统一的一个实体文件地址,如/index.html文件;此种方式既可以确保在进行各功能嵌套时,功能中的路径满足自身需要不会相互冲突;又可以实现仅对一个实体index.html文件进行维护,降低新系统的代码及维护工作量;
功能文件的加载路径,采用预先配置的方式实现,不同功能单元视配置各自的主文件地址及虚拟index.html地址,当虚拟index.html加载后,首先请求此配置,明确哪个功能单元需要进行虚拟index.html的跳转,哪个功能单元需要用iframe嵌入主文件地址;
前端整合方法如下:
使用单一框架页,基于对依赖的注入、路径的映射;实现来自不同系统的旧功能,在原有代码不做任何调整的情况下,进行功能整合,最大程度增加功能单元的复用性,降低前、后期维护工作量。
框架页及依赖注入形式:框架页(如index.html)除实现新系统基本功能外,负责组织不同旧系统依赖的注入,及对旧功能的嵌入(如使用iframe加载旧功能的xx.html页面);在html页面中,依赖包含:js脚本或方法依赖、css样式依赖、公共变量依赖、dom依赖;对于单一系统而言,依赖注入的步骤为:框架页调取入口js文件(如init.js),根据入口js文件中的相关依赖的配置,加载相应依赖,在依赖加载完成后加载相应的功能模块;采用依赖注入的形式,即能保证框架页中所嵌入的功能项的依赖得以满足;又能动态的调整依赖项,而加载不同的功能单元,且保证不同功能单元间依赖项不同时出现从而不会产生冲突,进而保证了来自于不同系统的不同功能可无需进行调整,而直接应用;
文档结构的组织:多系统情况下,需要有多个init.js文件,分别配置相应系统的依赖,依照系统不同,组织不同的文件夹(如文件夹dirA对应A系统、文件夹B对应B系统),在相应文件夹中加入初始化所需的文件包;基于依赖注入的此种文档结构,新增的内容与原各系统中的功能内容互不影响,在各功能单元做出调整需升级时,可直接覆盖掉旧文件,而不需要针对新系统再次对功能单元做调整,在降低后期运营维护工作的同时,也降低了功能差异性和bug产生率;
路径的组织、映射及功能的切换形式:以上所述的文档组织结构下,路径的组织有两部分:虚拟index.html页的实现、功能文件路径调用的实现,功能的切换形式为:同文件夹下的功能切换,使用index.html中的iframe嵌入;不同文件夹下功能的切换采用在不同虚拟index.html间的跳转实现;
虚拟index.html页的实现:采用路径映射的形式,将指向DirA/xx/index.html、DirB/xx/index.html、DirC/xx/index.html下的请求均映射到统一的一个实体文件地址,如/index.html文件;此种方式既可以确保在进行各功能嵌套时,功能中的路径满足自身需要不会相互冲突;又可以实现仅对一个实体index.html文件进行维护,降低新系统的代码及维护工作量;
功能文件的加载路径,采用预先配置的方式实现,不同功能单元视配置各自的主文件地址及虚拟index.html地址,当虚拟index.html加载后,首先请求此配置,明确哪个功能单元需要进行虚拟index.html的跳转,哪个功能单元需要用iframe嵌入主文件地址;
前端整合方法如下:
使用单一框架页,基于对依赖的注入、路径的映射;实现来自不同系统的旧功能,在原有代码不做任何调整的情况下,进行功能整合,最大程度增加功能单元的复用性,降低前、后期维护工作量。