一种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嵌入主文件地址；

前端整合方法如下：

使用单一框架页，基于对依赖的注入、路径的映射；实现来自不同系统的旧功能，在原有代码不做任何调整的情况下，进行功能整合，最大程度增加功能单元的复用性，降低前、后期维护工作量。

本实施例中，优选的，还包括与系统相连的维护模块，该模块用于对系统故障进行预警，通过维护模块便于对系统进行监控预警，方便第一时间进行维护，确保系统的运行。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。