CN111797357B - 一种Html下基于依赖注入及路径映射的前端整合方法 - Google Patents

一种Html下基于依赖注入及路径映射的前端整合方法 Download PDF

Info

Publication number
CN111797357B
CN111797357B CN202010666102.2A CN202010666102A CN111797357B CN 111797357 B CN111797357 B CN 111797357B CN 202010666102 A CN202010666102 A CN 202010666102A CN 111797357 B CN111797357 B CN 111797357B
Authority
CN
China
Prior art keywords
html
different
under
page
injection
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.)
Active
Application number
CN202010666102.2A
Other languages
English (en)
Other versions
CN111797357A (zh
Inventor
裴磊
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Taian Collaboration Software Co ltd
Original Assignee
Taian Collaboration Software Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Taian Collaboration Software Co ltd filed Critical Taian Collaboration Software Co ltd
Priority to CN202010666102.2A priority Critical patent/CN111797357B/zh
Publication of CN111797357A publication Critical patent/CN111797357A/zh
Application granted granted Critical
Publication of CN111797357B publication Critical patent/CN111797357B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Abstract

本发明公开了一种Html下基于依赖注入及路径映射的前端整合方法,包括:框架页及依赖注入形式:框架页除实现新系统基本功能外,负责组织不同旧系统依赖的注入,及对旧功能的嵌入;文档结构的组织:多系统情况下,需要有多个init.js文件,分别配置相应系统的依赖,依照系统不同,组织不同的文件夹,在相应文件夹中加入初始化所需的文件包;本发明:对各功能单元的内部无需做任何修改,实现直接复用,大大降低维护量、bug产出率,提升功能统一性;整合各功能单元的框架页唯一,对框架页中相同功能的维护简单,不存在重复工作,提高了效率;通过设计的与系统相连的维护模块,通过维护模块便于对系统进行监控预警,方便第一时间进行维护,确保系统的运行。

Description

一种Html下基于依赖注入及路径映射的前端整合方法
技术领域
本发明属于html技术领域,具体涉及一种Html下基于依赖注入及路径映射的前端整合方法。
背景技术
html是一种规范,一种标准,它通过标记符号来标记要显示的网页中的各个部分,网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容。浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容,对书写出错的标记将不指出其错误,且不停止其解释执行过程,编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是,对于不同的浏览器,对同一标记符可能会有不完全相同的解释,因而可能会有不同的显示效果。
在当前普遍使用html语言作为界面语言的情况下,同公司的不同产品基本都存在功能单元的重合和复用,将来自不同系统的不同功能单元组合成为新系统时,往往会面临不同功能单元之间的路径、顶层依赖冲突问题。为解决这些问题,目前比较常用和彻底的解决方式是重新对各功能单元的依赖进行组织,解决冲突并统一依赖。
对于旧系统废弃、将不同旧系统的不同功能单元组合成新系统的情况,上述方式较为可行;但如果旧系统依然运行维护,一旦功能单元需进行更新,则需要对不同系统中所使用的该功能单元分别进行代码维护工作,无法达到功能单元彻底复用的目的,增加后期运营维护成本。
发明内容
本发明的目的在于提供一种Html下基于依赖注入及路径映射的前端整合方法,以解决上述背景技术中提出的当旧系统依然运行维护,一旦功能单元需进行更新,则需要对不同系统中所使用的该功能单元分别进行代码维护工作,无法达到功能单元彻底复用的目的,增加了后期运营维护成本的问题。
为实现上述目的,本发明提供如下技术方案:一种Html下基于依赖注入及路径映射的前端整合方法,包括:
框架页及依赖注入形式:框架页除实现新系统基本功能外,负责组织不同旧系统依赖的注入,及对旧功能的嵌入;
文档结构的组织:多系统情况下,需要有多个init.js文件,分别配置相应系统的依赖,依照系统不同,组织不同的文件夹,在相应文件夹中加入初始化所需的文件包;
虚拟index.html页的实现:采用路径映射的形式,将指向不同文件夹下的请求均映射到统一的一个实体文件地址:
所述前端整合方法如下:
使用单一框架页,基于对依赖的注入、路径的映射;实现来自不同系统的旧功能,在原有代码不做任何调整的情况下,进行功能整合。
作为本发明的一种优选的技术方案,在html页面中,依赖包含:js脚本或方法依赖、css样式依赖、公共变量依赖、dom依赖。
作为本发明的一种优选的技术方案,单一系统而言,依赖注入的步骤为:框架页调取入口js文件,根据入口js文件中的相关依赖的配置,加载相应依赖,在依赖加载完成后加载相应的功能模块。
作为本发明的一种优选的技术方案,依赖注入在多系统情况下,需要有多个init.js文件,分别配置相应系统的依赖,加载相应依赖,在依赖加载完成后加载相应的功能模块。
作为本发明的一种优选的技术方案,路径的组织有两部分:虚拟index.html页的实现、功能文件路径调用的实现。
作为本发明的一种优选的技术方案,功能的切换形式:同文件夹下的功能切换,使用index.html中的iframe嵌入;不同文件夹下功能的切换采用在不同虚拟index.html间的跳转实现。
作为本发明的一种优选的技术方案,功能文件的加载路径,采用预先配置的方式实现,不同功能单元视配置各自的主文件地址及虚拟index.html地址。
作为本发明的一种优选的技术方案,还包括与系统相连的维护模块,该模块用于对系统故障进行预警。
与现有技术相比,本发明的有益效果是:
(1)对各功能单元的内部无需做任何修改,实现直接复用,大大降低维护量、bug产出率,提升功能统一性;
(2)整合各功能单元的框架页唯一,对框架页中相同功能的维护简单,不存在重复工作,提高了效率;
(3)通过设计的与系统相连的维护模块,通过维护模块便于对系统进行监控预警,方便第一时间进行维护,确保系统的运行。
附图说明
图1为本发明的单一系统的依赖注入及功能加载结构示意图;
图2为本发明的组织不同的文件夹,在相应文件夹中加入初始化所需的文件包结构示意图。
具体实施方式
下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
实施例1
请参阅图1和图2,本发明提供一种技术方案:一种Html下基于依赖注入及路径映射的前端整合方法,包括:
框架页及依赖注入形式:框架页(如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嵌入主文件地址;
前端整合方法如下:
使用单一框架页,基于对依赖的注入、路径的映射;实现来自不同系统的旧功能,在原有代码不做任何调整的情况下,进行功能整合,最大程度增加功能单元的复用性,降低前、后期维护工作量。
实施例2
请参阅图1和图2,本发明提供一种技术方案:一种Html下基于依赖注入及路径映射的前端整合方法,包括:
框架页及依赖注入形式:框架页(如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嵌入主文件地址;
前端整合方法如下:
使用单一框架页,基于对依赖的注入、路径的映射;实现来自不同系统的旧功能,在原有代码不做任何调整的情况下,进行功能整合,最大程度增加功能单元的复用性,降低前、后期维护工作量。
本实施例中,优选的,还包括与系统相连的维护模块,该模块用于对系统故障进行预警,通过维护模块便于对系统进行监控预警,方便第一时间进行维护,确保系统的运行。
尽管已经示出和描述了本发明的实施例,对于本领域的普通技术人员而言,可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型,本发明的范围由所附权利要求及其等同物限定。

Claims (3)

1.一种Html下基于依赖注入及路径映射的前端整合方法,其特征在于:包括:
框架页及依赖注入形式:框架页除实现新系统基本功能外,负责组织不同旧系统依赖的注入,及对旧功能的嵌入;
文档结构的组织:多系统情况下,需要有多个init.js文件,分别配置相应系统的依赖,依照系统不同,组织不同的文件夹,在相应文件夹中加入初始化所需的文件包;
虚拟index.html页的实现:采用路径映射的形式,将指向不同文件夹下的请求均映射到统一的一个实体文件地址;
单一系统而言,依赖注入的步骤为:框架页调取入口js文件,根据入口js文件中的相关依赖的配置,加载相应依赖,在依赖加载完成后加载相应的功能模块;
依赖注入在多系统情况下,需要有多个init.js文件,分别配置相应系统的依赖,加载相应依赖,在依赖加载完成后加载相应的功能模块;
路径的组织有两部分:虚拟index.html页的实现、功能文件路径调用的实现;
功能的切换形式:同文件夹下的功能切换,使用index.html中的iframe嵌入;不同文件夹下功能的切换采用在不同虚拟index.html间的跳转实现;
功能文件的加载路径,采用预先配置的方式实现,不同功能单元视配置各自的主文件地址及虚拟index.html地址;
所述前端整合方法如下:
使用单一框架页,基于对依赖的注入、路径的映射;实现来自不同系统的旧功能,在原有代码不做任何调整的情况下,进行功能整合。
2.根据权利要求1所述的一种Html下基于依赖注入及路径映射的前端整合方法,其特征在于:在html页面中,依赖包含:js脚本或方法依赖、css样式依赖、公共变量依赖、dom依赖。
3.根据权利要求1所述的一种Html下基于依赖注入及路径映射的前端整合方法,其特征在于:还包括与系统相连的维护模块,该模块用于对系统故障进行预警。
CN202010666102.2A 2020-07-12 2020-07-12 一种Html下基于依赖注入及路径映射的前端整合方法 Active CN111797357B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010666102.2A CN111797357B (zh) 2020-07-12 2020-07-12 一种Html下基于依赖注入及路径映射的前端整合方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010666102.2A CN111797357B (zh) 2020-07-12 2020-07-12 一种Html下基于依赖注入及路径映射的前端整合方法

Publications (2)

Publication Number Publication Date
CN111797357A CN111797357A (zh) 2020-10-20
CN111797357B true CN111797357B (zh) 2023-12-19

Family

ID=72808303

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010666102.2A Active CN111797357B (zh) 2020-07-12 2020-07-12 一种Html下基于依赖注入及路径映射的前端整合方法

Country Status (1)

Country Link
CN (1) CN111797357B (zh)

Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6148311A (en) * 1997-04-25 2000-11-14 Adobe Systems Incorporation Web site construction by inferring navigational structure from physical file structure
CN101464900A (zh) * 2009-01-15 2009-06-24 上海交通大学 Ntfs文件系统下轻量级文件隐藏方法
US7941748B1 (en) * 2003-10-21 2011-05-10 Adobe Systems Incorporated Systems and methods for web site editing interfaces
CN106681843A (zh) * 2015-11-05 2017-05-17 中国科学院沈阳自动化研究所 一种基于组件式开发模式松耦合的子模块间参数传递方法
CN108287839A (zh) * 2017-01-09 2018-07-17 阿里巴巴集团控股有限公司 一种页面加载方法和设备
CN108287704A (zh) * 2017-01-10 2018-07-17 北大方正集团有限公司 web前端开发项目搭建的方法及系统
CN108804155A (zh) * 2018-05-31 2018-11-13 中链科技有限公司 配置文件获取方法、装置、终端及计算机可读存储介质
CN108897889A (zh) * 2018-07-10 2018-11-27 深圳市金蝶天燕中间件股份有限公司 一种网页优化方法、网页优化装置以及计算机设备
CN109634654A (zh) * 2018-12-04 2019-04-16 北京马上慧科技术有限公司 一种页面封装方法、装置、系统、计算机设备和存储介质
CN109710347A (zh) * 2018-10-16 2019-05-03 北京天地和兴科技有限公司 一种基于mvc框架高效开发带过滤功能生成列表页的方法
CN110825385A (zh) * 2019-10-29 2020-02-21 福建天泉教育科技有限公司 React Native离线包的构建方法及存储介质

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150363195A1 (en) * 2014-06-16 2015-12-17 npm, Inc. Software package management

Patent Citations (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US6148311A (en) * 1997-04-25 2000-11-14 Adobe Systems Incorporation Web site construction by inferring navigational structure from physical file structure
US7941748B1 (en) * 2003-10-21 2011-05-10 Adobe Systems Incorporated Systems and methods for web site editing interfaces
CN101464900A (zh) * 2009-01-15 2009-06-24 上海交通大学 Ntfs文件系统下轻量级文件隐藏方法
CN106681843A (zh) * 2015-11-05 2017-05-17 中国科学院沈阳自动化研究所 一种基于组件式开发模式松耦合的子模块间参数传递方法
CN108287839A (zh) * 2017-01-09 2018-07-17 阿里巴巴集团控股有限公司 一种页面加载方法和设备
CN108287704A (zh) * 2017-01-10 2018-07-17 北大方正集团有限公司 web前端开发项目搭建的方法及系统
CN108804155A (zh) * 2018-05-31 2018-11-13 中链科技有限公司 配置文件获取方法、装置、终端及计算机可读存储介质
CN108897889A (zh) * 2018-07-10 2018-11-27 深圳市金蝶天燕中间件股份有限公司 一种网页优化方法、网页优化装置以及计算机设备
CN109710347A (zh) * 2018-10-16 2019-05-03 北京天地和兴科技有限公司 一种基于mvc框架高效开发带过滤功能生成列表页的方法
CN109634654A (zh) * 2018-12-04 2019-04-16 北京马上慧科技术有限公司 一种页面封装方法、装置、系统、计算机设备和存储介质
CN110825385A (zh) * 2019-10-29 2020-02-21 福建天泉教育科技有限公司 React Native离线包的构建方法及存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
互联网交通安全服务平台前端架构设计与研究;宗欣;全喜伟;何晓亮;;中国公共安全(学术版)(第03期);第83-88页 *
前端整合框架及在科研安全生产平台中的应用;张睿;张斌;;计算机工程与设计(第04期);第1086-1092页 *

Also Published As

Publication number Publication date
CN111797357A (zh) 2020-10-20

Similar Documents

Publication Publication Date Title
US7263699B2 (en) Preparation of a software configuration using an XML type programming language
US9038023B2 (en) Template-based configuration architecture
CN108664239B (zh) 一种基于微服务的跨技术栈web前端开发系统及方法
US20090204883A1 (en) Method, Program and System for the Dynamic, Template-Based Generation of Internet Pages
US20050198646A1 (en) Method, data processing device, computer program product and arrangement for processing electronic data
CN104375808B (zh) 界面显示方法及装置
US20100313197A1 (en) System and method for operating domain profile using database in core framework for sdr mobile terminals
WO2019005228A1 (en) AUTOMATED ADAPTATION OF A SOURCE CODE IN ORDER TO INJECT FUNCTIONS BETWEEN VERSIONS OF A PLATFORM
CN109614085B (zh) 功能实现方法、装置、计算机设备及存储介质
CN103744680A (zh) 一种业务流程处理方法及装置
USRE48851E1 (en) Thin client for mapping system
CN102043622A (zh) 一种电子控制器基础软件通用配置器
US10133766B2 (en) Accessing and editing virtually-indexed message flows using structured query langauge (SQL)
CN103412754A (zh) 动态语言代码执行方法和装置
CN112860236A (zh) 一种基于single-spa的微前端技术
CN111797357B (zh) 一种Html下基于依赖注入及路径映射的前端整合方法
CN116974620A (zh) 应用程序的生成方法、运行方法以及相应的装置
CN103198011B (zh) 一种探测java程序文件扰动的方法及装置
CN114327397A (zh) 一种基于Vue实现VS Code插件多页面的方法
US20060161415A1 (en) Driver handler object framework
CN109582391A (zh) 一种基于xml的设备树配置方法
CN102819545A (zh) 基于通用过滤条件复合组件的单据查询方法及装置
CN109933528A (zh) 一种自动化脚本封装的方法及装置
CN109240673A (zh) 一种基于react-native的视图动态加载更新方法及系统
CN112597423B (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
GR01 Patent grant
GR01 Patent grant