微前端框架及其构建方法和相关设备与流程 专利技术说明

计算;推算;计数设备的制造及其应用技术1.本发明涉及微前端技术领域，具体涉及一种微前端框架及其构建方法和相关设备。背景技术：2.微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web应用的技术手段，通俗地说，就是在一个web应用中可以独立地运行另一个web应用。比如制作一个企业管理平台，可以把已有的采购系统和财务系统统一接入这个平台；又比如有一个巨大的web应用，为了降低开发和维护成本，拆分成多个小应用进行开发和部署，然后用一个平台将这些小应用集成起来。3.目前实现微前端有两种方案：一种是iframe方案，另一种是single-spa方案。4.iframe方案的优点：（1）非常简单，没有任何学习负担；（2）天生隔离非常完美，无论是js（javascript，java脚本）、css（cascading style sheets，层叠样式表）、dom（document object model，文档对象模型）都完全隔离开来。iframe方案的缺点：（1）路由状态丢失，刷新一下，iframe的url(uniform resource locator，统一资源定位器)状态就丢失了；（2）dom割裂严重，弹窗只能在iframe内部展示，无法覆盖全局。5.single-spa方案是一个目前主流的微前端技术方案，qiankun（乾坤）是该方案的代表，其主要实现思路是：预先注册子应用(激活路由、子应用资源、生命周期函数)；监听路由的变化，匹配到了激活的路由则加载子应用资源，顺序调用生命周期函数并最终渲染到容器。该方案的优点：（1）监听路由自动加载、卸载当前路由对应的子应用；（2）完备的沙箱方案，js沙箱做了snapshotsandbox、legacysandbox、proxysandbox三套渐进增强方案，css沙箱做了strictstyleisolation、experimentalstyleisolation两套适用不同场景的方案。（3）路由保持，浏览器刷新、前进和后退都可以作用到子应用。（4）应用间通信简单，全局注入。该方案的缺点：（1）基于路由匹配，无法同时激活多个子应用，也不支持子应用保活；（2）改造成本较大，从构建工具、代码、路由等等都要做一系列的适配；（3）css沙箱无法绝对地隔离，js沙箱在某些场景下执行性能下降严重。技术实现要素：6.为了解决现有技术中的上述问题，本发明提出了一种微前端框架及其构建方法和相关设备，提高了子应用加载速度。7.本发明的第一方面，提出一种微前端框架的构建方法，所述框架包括主应用和子应用，所述构建方法包括：在所述主应用和所述子应用各自的服务器上分别添加允许访问彼此的跨域配置；在所述主应用中创建一个iframe元素和一个web components组件；将所述iframe元素的src属性设置为所述子应用的路径；在加载所述子应用时，获取所述子应用的dom结构和css文件；将所述dom结构和所述css文件复制到所述web components组件中，以便利用所述web components组件的特性实现所述主应用和所述子应用之间的样式隔离；将所述子应用环境中的文档查询类接口全部代理到所述web components组件，以便所述子应用的实例能够操作所述web components组件里的所述dom结构和所述css文件；其中，所述子应用的实例在所述iframe元素的js文件中生成。8.优选地，“在加载所述子应用时，获取所述子应用的dom结构和css文件”的步骤包括：在所述主应用中注册iframe的onload方法，用于监听所述子应用是否加载完成；根据用户的访问请求加载所述子应用；当所述onload方法被触发后，在该方法中获取所述子应用的dom结构和css文件。9.优选地，“将所述dom结构和所述css文件复制到所述web components组件中”的步骤包括：调用所述web components组件中custom elements的define方法自定义承载所述dom结构和所述css文件的html标签；将所述dom结构和所述css文件添加到所述html标签中。10.优选地，“将所述子应用环境中的文档查询类接口全部代理到所述web components组件”的步骤包括：将iframe中的document关联到所述html标签的shadow dom上，使得所述子应用中使用document选取元素时选择的是所述html标签中的元素。11.优选地，所述构建方法还包括：重写iframe的history.pushstate方法和history.replacestate方法，将所述子应用的路径和所述主应用进行关联，并同步到所述主应用地址栏的query参数上，以便浏览器刷新时所述子应用能够通过query参数获取到刷新前的路径信息，并使用所述history.replacestate方法将所述子应用和所述主应用的路径进行同步。12.优选地，所述子应用为多个；所述构建方法还包括：当由上一个所述子应用切换到下一个所述子应用时，将上一个所述子应用对应的所述iframe元素保留，并保留上一个所述子应用对应的所述web components组件；当上一个所述子应用被切换回来时，所述主应用根据保留的所述iframe元素加载上一个所述子应用，并将保留的所述web components组件重新挂载到上一个所述子应用的实例上。13.优选地，所述文档查询类接口包括： getelementsbytagname、getelementsbyclassname、getelementsbyname、getelementbyid、queryselector、queryselectorall、head和body。14.本发明的第二方面，提出一种微前端框架，所述框架包括主应用和子应用，且根据上面所述的微前端框架方法构建。15.本发明的第三方面，提出一种处理设备，包括存储器和处理器，所述存储器上存储有能够被所述处理器加载并执行上面所述方法的计算机程序。16.本发明的第四方面，提出一种存储设备，存储有能够被处理器加载并执行如上面所述方法的计算机程序。17.本发明具有如下有益效果：（1）速度快：由于本发明使用iframe和web components技术，结合两者的优点，避免了single-spa方案中冗余的css沙箱和with语句对性能的影响，使得整体的运行速度得到了提高。18.（2）支持多应用同时激活在线：本发明可以在主应用中创建多个子应用，并且多个子应用的路径信息都关联到了主应用的路径query参数上，所以能够同时激活多个子应用，刷新或切换都可以保持子应用状态。与single-spa方案相比，本发明具备同时激活多个子应用，并保持这些子应用路由同步的能力。19.（3）浏览器刷新时iframe的url不会丢失：本发明由于重写了子应用iframe的history.pushstate方法和history.replacestate方法，将子应用的路径和主应用进行关联，并同步到主应用地址栏的query参数上，在浏览器刷新时子应用能够通过query参数获取到刷新前的路径信息，这样子应用iframe的url就不会丢失。20.（4）弹窗可以覆盖全局：本发明将iframe中的dom结构和css文件复制到了web components中，避免了操作iframe中的dom，web components是主应用文档流的一部分（属于主应用），而iframe是独立于主应用文档流的另一个文档流（不属于主应用，只是在主应用中某个位置进行展示），所以可以避免弹窗只能在iframe内部展示的问题。21.（5）改造成本低：本发明运用了iframe本身的特性在主应用中嵌入另一个网页，所以不需要像single-spa方案一样做过多配置，所以改造成本低。22.（6）切换路由可以不销毁子应用：子应用开启不销毁模式后，子应用发生切换时将上一个子应用的web components和iframe元素保留下来，使得上一个子应用的状态可以保存下来不丢失，结合预加载模式可以获得类似服务端渲染的打开体验。23.（7）开箱即用：不管是样式的兼容、路由的处理、弹窗的处理、热更新的加载，子应用完成接入即可开箱即用，无需额外处理，子应用接入成本也极低。24.（8）原生隔离：single-spa方案主要是对主应用css沙箱进行了改造，所以无法绝对隔离，而本发明将子应用的文档查询类接口代理到web components，从而利用web components对dom和css做到了严格的原生隔离；single-spa方案主要使用with语句实现js沙箱，而with语句的性能较差。本发明将子应用的js注入主应用同域的iframe中，利用iframe本身的特性对js做到了严格的原生隔离。附图说明25.图1是本发明的微前端框架的构建方法是实例一的主要步骤示意图；图2是本发明的微前端框架的构建方法是实例二的主要步骤示意图。具体实施方式26.下面参照附图来描述本发明的优选实施方式。本领域技术人员应当理解的是，这些实施方式仅用于解释本发明的技术原理，并非旨在限制本发明的保护范围。27.为使本技术实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本技术的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。28.需要说明的是，在本发明的描述中，术语“第一”、“第二”仅仅是为了便于描述，而不是指示或暗示所述装置、元件或参数的相对重要性，因此不能理解为对本发明的限制。另外，本发明中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，同时存在a和b，单独存在b这三种情况。另外，本文中字符“/”，如无特殊说明，一般表示前后关联对象是一种“或”的关系。29.iframe是嵌入式框架，是html标签，还是一个内联元素，iframe元素用来在html页面中嵌入其他页面。iframe的常用属性包括：（1）frameborder：是否显示边框；（2）height：框架作为一个普通元素的高度，建议使用css设置；（3）width：框架作为一个普通元素的宽度，建议使用css设置；（4）name：框架的名称，window.frames[name]时专用的属性；（5）scrolling：框架的是否滚动。（6）src：内框架的地址，可以是页面地址，也可以是图片的地址。（7）srcdoc：用来替代原来html body里面的内容；（8）sandbox：对iframe进行一系列限制。[0030]web components可以用来创建封装功能的定制元素，可以在任何地方重用，不必担心代码冲突，它由三项主要技术组成：（1）custom elements（自定义元素）：一组javascript api，允许web开发者自行定义custom elements及其行为，然后可以在用户界面中按照需要使用；（2）shadow dom（影子dom）：一组 javascript api，用于将封装的“影子”dom 树附加到元素（与主文档 dom 分开呈现）并控制其关联的功能。通过这种方式，可以保持元素的功能私有，这样它们就可以被脚本化和样式化，而不用担心与文档的其他部分发生冲突。（3）html templates（html 模板）：《template》 和《slot》 元素使web开发者可以编写不在呈现页面中显示的标记模板，然后它们可以作为自定义元素结构的基础被多次重用。[0031]本发明综合利用iframe和web components的优势来实现微前端应用，下面通过实施例进行详细说明。[0032]图1是本发明的微前端框架的构建方法是实例一的主要步骤示意图。本实施例的微前端框架包括主应用和子应用，如图1所示，本实施例的构建方法包括步骤a10-a60：步骤a10，在主应用和子应用各自的服务器上分别添加允许访问彼此的跨域配置。[0033]步骤a20，在主应用中创建一个iframe元素和一个web components组件。[0034]步骤a30，将iframe元素的src属性设置为子应用的路径。[0035]步骤a40，在加载子应用时，获取子应用的dom结构和css文件。该步骤可以具体包括步骤a41-a43：步骤a41，在主应用中注册iframe的onload方法，用于监听子应用是否加载完成。[0036]步骤a42，根据用户的访问请求加载子应用。[0037]步骤a43，当onload方法被触发后，在该方法中获取子应用的dom结构和css文件。[0038]步骤a50，将dom结构和css文件复制到web components组件中，以便利用web components组件的特性实现主应用和子应用之间的样式隔离。该步骤具体包括步骤a51-a52：步骤a51，调用web components组件中custom elements的define方法自定义承载dom结构和css文件的html标签。[0039]步骤a52，将dom结构和css文件添加到html标签中。[0040]步骤a60，将子应用环境中的文档查询类接口全部代理到web components组件，这样子应用的实例和web components组件就能够精准地链接起来，以便子应用的实例能够操作web components组件里的dom结构和所述css文件。[0041]具体地，将iframe中的document关联到上述html标签的shadow dom上，使得子应用中使用document选取元素时选择的是html标签中的元素。[0042]其中，文档查询类接口包括： getelementsbytagname、getelementsbyclassname、getelementsbyname、getelementbyid、queryselector、queryselectorall、head和body。[0043]子应用的实例在iframe元素的js文件中生成。同时，子应用的实例可以访问和使用子应用环境也就是iframe中内置的接口和方法，例如文档查询类接口（步骤a60中已经改造），history(该接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录)和location( 该接口存储当前页面与位置（url）相关的信息，表示当前显示文档的web地址，使用window对象的location属性可以访问)接口，子应用实例运行在iframe中。[0044]图2是本发明的微前端框架的构建方法是实例二的主要步骤示意图。本实施例的微前端框架包括主应用和多个子应用，如图2所示，本实施例的构建方法包括步骤b10-b90：其中，步骤b10-b60与前面实施例一中的步骤a10-a60对应相同，此处不再赘述。[0045]步骤b70，重写iframe的history.pushstate方法和history.replacestate方法，将子应用的路径和主应用进行关联，并同步到主应用地址栏的query参数上，以便浏览器刷新时子应用能够通过query参数获取到刷新前的路径信息，并使用history.replacestate方法将子应用和主应用的路径进行同步。[0046]由于在浏览器中页面的切换是通过history.pushstate方法（用来添加浏览器历史记录条目）和history.replacestate方法（用来修改浏览器历史记录条目）来记录不同路径的，所以重写这两个方法，将子应用的路径信息和主应用进行关联，同步到主应用的query参数上。当刷新浏览器的操作发生时，子应用进行初始化时就可以通过query参数获取到刷新前的路径信息，并使用iframe的history.replacestate方法进行同步，这样子应用不会因为浏览器的刷新而丢失原来的页面。[0047]步骤b80，当由上一个子应用切换到下一个子应用时，将上一个子应用对应的iframe元素保留，并保留上一个子应用对应的web components组件。[0048]当子应用发生切换，浏览器地址发生改变，将上一个子应用的web components和iframe元素保留下来，同时上一个子应用的路径信息也会被iframe元素保存下来。[0049]步骤b90，当上一个子应用被切换回来时，主应用根据保留的iframe元素（其中保存了上一个子应用的路径信息）加载上一个子应用，并将保留的web components组件重新挂载到上一个子应用的实例上。[0050]本实施例中，通过步骤b70-b90的操作使子应用可以获得保活的能力。[0051]上述实施例中虽然将各个步骤按照上述先后次序的方式进行了描述，但是本领域技术人员可以理解，为了实现本实施例的效果，不同的步骤之间不必按照这样的次序执行，其可以同时(并行)执行或以颠倒的次序执行，这些简单的变化都在本发明的保护范围之内。[0052]基于与构建方法实施例相同的技术构思，本技术还提供了一种微前端框架的实施例，本实施例的框架包括主应用和子应用，且上面所述方法构建。[0053]进一步地，本发明还提供了一种处理设备的实施例。本实施例的处理设备包括存储器和处理器，所述存储器上存储有能够被所述处理器加载并执行上面所述微前端框架构建方法的计算机程序。[0054]更进一步地，本发明还提供了一种存储设备的实施例。本实施例的存储设备中存储有能够被处理器加载并执行上面所述微前端框架构建方法的计算机程序。[0055]所述存储设备可以包括：u盘、移动硬盘、只读存储器(read-only memory，rom)、随机存取存储器(random access memory，ram)、磁碟或者光盘等各种可以存储程序代码的介质。[0056]本领域技术人员应该能够意识到，结合本文中所公开的实施例描述的各示例的方法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明电子硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以电子硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。本领域技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。[0057]至此，已经结合附图所示的优选实施方式描述了本发明的技术方案。但是，本领域技术人员容易理解的是，本发明的保护范围显然不局限于这些具体实施方式。在不偏离本发明的原理的前提下，本领域技术人员可以对相关技术特征做出等同的更改或替换，这些更改或替换之后的技术方案都将落入本发明的保护范围之内。









图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!




内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,发布内容不收取任何费用也不接任何广告!




免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理，本文部分文字与图片资源来自于网络，部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!的,若有来源标注错误或侵犯了您的合法权益，请立即通知我们，情况属实，我们会第一时间予以删除，并同时向您表示歉意,谢谢!