微前端框架qiankun隔离方法怎么使用

本文小编为大家详细介绍“微前端框架qiankun隔离方法怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“微前端框架qiankun隔离方法怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。在基于single-spa开发的微前端应用中，子应用开发者需要特别注意的是：要谨慎修改和使用全局变量上的属性（如window、document等），以免造成依赖该属性的自身应用或其它子应用运行时出现错误；要谨慎控制CSS规则的生效范围，避免覆盖污染其它子应用的样式；但这样的低级人为保证机制是无法在大规模的团队开发过程中对应用的独立性起到完善保护的，而qiankun框架给我们提供的最便利和有用的功能就是其基于配置的自动化沙箱隔离机制了。有了框架层面的子应用隔离支持，用户无论是在编写JS代码还是修改CSS样式时都不必再担心代码对于全局环境的污染问题了。沙箱机制一方面提升了微应用框架运行的稳定性和独立性，另一方面也降低了微前端开发者的心智负担，让其只需专注于自己的子应用代码开发之中。在JS隔离方面，qiankun为开发者提供了三种不同模式的沙箱机制，分别适用于不同的场景之中。该沙箱主要用于不支持Proxy对象的低版本浏览器之中，不能由用户手动指定该模式，qiankun会自动检测浏览器的支持情况并降级到Snapshot沙箱实现。由于这种实现方式在子应用运行过程中实际上修改了全局变量，因此不能用于多例模式之中（同时存在多个已挂载的子应用）。该沙箱实现方式非常简洁，下面我们给出其简化后的实现沙箱内部存在两个对象变量windowSnapshot和modifyPropsMap ，分别用来存储子应用挂载前原始window对象上的全部属性以及子应卸载时被其修改过的window对象上的相关属性。Snapshot沙箱会在子应用mount前将modifyPropsMap中存储的属性重新赋值给window以恢复该子应用之前执行时的全局变量上下文，并在子应用unmount后将windowSnapshot中存储的属性重新赋值给window以恢复该子应用运行前的全局变量上下文，从而使得两个不同子应用的window相互独立，达到JS隔离的目的。当用户手动配置sandbox.loose: true时该沙箱被启用。Legacy沙箱同样会对window造成污染，但是其性能比要比snapshot沙箱好，因为该沙箱不用遍历window对象。同样legacy沙箱也只适用于单例模式之中。下面一起来看一下其简化后的大致实现方式Legacy沙箱为一个空对象fakewindow使用proxy代理拦截了其全部的set/get等操作，并在loader中用其替换了window。当用户试图修改window属性时，fakewindow上代理的set操作生效捕获了相关修改，其分别将新增的属性和修改前的值存入addedPropsMapInSandbox和modifiedPropsOriginalValueMapInSandbox这两个Map之中，此外还将所有修改记录在了currentUpdatedPropsValueMap之中，并改变了window对象。这样当子应用挂载前，legacy沙箱会将currentUpdatedPropsValueMap之中记录的子应用相关修改重新赋予window，恢复其运行时上下文。当子应用卸载后，legacy沙箱会遍历addedPropsMapInSandbox和modifiedPropsOriginalValueMapInSandbox这两个Map并将window上的相关值恢复到子应用运行之前的状态。最终达到了子应用间JS隔离的目的。Proxy沙箱是qiankun框架中默认使用的沙箱模式（也可以通过配置sandbox.loose: false来开启），只有该模式真正做到了对window的无污染隔离（子应用完全不免费云主机域名能修改全局变量），因此可以被应用在单/多例模式之中。Proxy沙箱的原理也非常简单，它将window上的所有属性遍历拷贝生成一个新的fakeWindow对象，紧接着使用proxy代理这个fakeWindow，用户对window操作全部被拦截下来，只作用于在这个fakeWindow之上。对于CSS隔离的方式，在默认情况下由于切换子应用时，其相关的CSS内外连属性会被卸载掉，所以可以确保单实例场景子应用之间的样式隔离，但是这种方式无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。不过，qiankun也提供了两种可配置生效的内置方式供使用者选择。当用户配置sandbox.strictStyleIsolation: true时，ShadowDOM样式沙箱会被开启。在这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。这种方式虽然看起来清晰简单，还巧妙利用了浏览器对于ShadowDOM的CSS隔离特性，但是由于ShadowDOM的隔离比较严格，所以这并不是一种无脑使用的方案。例如：如果子应用内存在一个弹出时会挂在document根元素的弹窗，那么该弹窗的样式是否会受到ShadowDOM的影响而失效？所以开启该沙箱的用户需要明白自己在做什么，且可能需要对子应用内部代码做出一定的调整。因为ShadowDOM存在着上述的一些问题，qiankun贴心的为用户提供了另一种更加无脑简便的样式隔离方式，那就是Scoped CSS。通过配置sandbox.experimentalStyleIsolation: true，Scoped样式沙箱会被开启。在这种模式下，qiankun会遍历子应用中所有的CSS选择器，通过对选择器前缀添加一个固定的带有该子应用标识的属性选择器的方式来限制其生效范围，从而避免子应用间、主应用与子应用的样式相互污染。qiankun首先对子应用最外层的包裹节点（一般为div节点）添加一个属性名为data-qiankun，值为appInstanceId的属性。接着遍历处理子应用中的所有样式。可以看到，qiankun通过为子应用的外层包裹元素注入属性并将子应用全部样式的作用范围都限制在该包裹元素下（通过添加指定的属性选择器作为前缀）实现了scoped样式沙箱隔离。需要注意的是，如果用户在运行时对内联样式进行修改，qiankun是可以侦测到并帮助用户限制其作用范围，但如果用户在运行时引入了新的外联样式或者自行创建了新的内联标签，那么qiankun并不会做出反应，相关的CSS规则还是可能会污染全局样式。对于微前端来说，除了应用间的隔离外，应用间的通信也是非常重要的部分。这里，single-spa提供了从主应用向子应用传递customProps的方式实现了最基础的参数传递。但是真实的开发场景需要的信息传递是非常复杂的，静态的预设参数传递只能起到很小的作用，我们还需要一种更加强大的通信机制来帮助我们开发应用。这里，qiankun在框架内部预先设计实现了完善的发布订阅模式，降低了开发者的上手门槛。我们首先来看一下qiankun中的通信是如何进行的。接下来，让我们一起来看一下它是如何实现的。可以看到在initGlobalState函数的执行中完成了一个发布订阅模式的创建工作，并返回了相关的订阅/发布/注销方法。接着qiankun将这些返回的方法通过生命周期函数mount传递给子应用，这样子应用就能够拿到并使用全局状态了，从而应用间的通信就得以实现了。此外offGlobalStateChange会在子应用unmount时自动调用以解除该子应用的订阅，避免内存泄露。读到这里，这篇“微前端框架qiankun隔离方法怎么使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注百云主机行业资讯频道。

相关推荐: JavaScript怎么破解登录密码

本篇内容介绍了“JavaScript怎么破解登录密码”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！首先我们打开12306的登录界面，打开抓包工具，输入用户名和一…