微前端-乾坤《》

本文主要是介绍微前端-乾坤《》，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

微前端

一个应用，当不断迭代的时候，功能会越来越多，代码量随着也会变得越来越大。进而代码之间的耦合性会变高，这样导致开发和维护很糟心，动一发而牵全身。于是有了微前端来解这个问题，按功能可以将这个应用拆分成多个项目，每个项目都是独立的仓库，独立的部署，然后利用微前端再组合成在一起。
较大的前端应用拆分为若干个可以独立交付的前端应用。每个应用大小及复杂度相对可控。能降低应用之间的耦合度，独立开发，独立运行，独立部署，提升每个团队的自治能力。

实现原理

乾坤是基于single-spa框架的，而single-spa是一个将多个单页面应用聚合为一个整体应用的 JavaScript 微前端框架，而乾坤在single-spa的基础上主要做了资源的加载和应用之间的隔离。

下面是single-spa的使用示例。通过registerApplication来注册子应用，然后当页面的路由与activeWhen首次相匹配时，就会触发app函数的执行。这个函数里面返回一些生命周期，在这些生命周期里做一些渲染。

import * as singleSpa from 'single-spa';//注册应用
singleSpa.registerApplication({name: 'app1',//应用激活路由条件activeWhen: '/app1',app(){const domEl = document.getElementById('#container')return {//首次挂载时执行bootstrap(){},//挂载时执行mount(){domEl.innerHTML = 'App 1 is mounted!'}, //卸载时执行unmount(){domEl.innerHTML = ''}}}
})
singleSpa.registerApplication({name: 'app2',activeWhen: '/app2',app(){const domEl = document.getElementById('#container')return {bootstrap(){},mount(){domEl.innerHTML = 'App 2 is mounted!'}, unmount(){domEl.innerHTML = ''}}}
})singleSpa.start();

下面是乾坤的使用示例。在single-spa中配置的是函数，而在乾坤中配置的是文件地址。

import {registerMicroApps, start} from 'qiankun';registerMicroApps([{name: 'app1',entry: {scripts: ['/app1.js'],styles:['/app1.css']},container: '#container',activeRule: '/app1',},{name: 'app2',entry: {scripts: ['/app2.js']},container: '#container',activeRule: '/app2',},]);start();

解决跨域（主应用间路由跳转，微应用如何设置跨域访问，各生命周期钩子如何执行）

header:{Access-Control-Allow-Origin:'*"}

沙盒

沙盒主要作用就是隔离微应用之间的脚本和样式影响，需要处理style、link、script类型的标签。对于处理的时机第一个是在首次加载的时候，第二个是在微应用运行中。在运行中的处理方案就是乾坤重写了下面这些原生的方法，这样就可以监听到新添加的节点，然后对style、link、script标签进行处理。

if (//原始方法未被替换HTMLHeadElement.prototype.appendChild === rawHeadAppendChild &&HTMLBodyElement.prototype.appendChild === rawBodyAppendChild &&HTMLHeadElement.prototype.insertBefore === rawHeadInsertBefore
) {//替换原始方法HTMLHeadElement.prototype.appendChild = getOverwrittenAppendChildOrInsertBefore({rawDOMAppendOrInsertBefore: rawHeadAppendChild,containerConfigGetter,isInvokedByMicroApp,}) as typeof rawHeadAppendChild;...
}

脚本隔离（一种是快照拷贝的方式，一个是基于proxy的方式）

脚本隔离的方式主要有两种，一种是快照拷贝的方式，一个是基于proxy的方式。乾坤会根据当前环境是否支持proxy来决定用那种方式。

快照方式

下面是乾坤中关于快照隔离的代码。在创建微应用的时候会实例化一个沙盒对象，它有两个方法，active是在激活微应用的时候执行，而inactive是在离开微应用的时候执行。

整体的思路是在激活微应用时将当前的window对象拷贝存起来，然后从modifyPropsMap中恢复这个微应用上次修改的属性到window中。在离开微应用时会与原有的window对象做对比，将有修改的属性保存起来，以便再次进入这个微应用时进行数据恢复，然后把有修改的属性值恢复到以前的状态。

//遍历对象属性，用callbackFn回调
function iter(obj: typeof window, callbackFn: (prop: any) => void) {for (const prop in obj) {if (obj.hasOwnProperty(prop) {callbackFn(prop);}}
} 
class SnapshotSandbox implements SandBox {active() {// 记录当前快照this.windowSnapshot = {} as Window;iter(window, (prop) => {this.windowSnapshot[prop] = window[prop];});// 恢复之前的变更Object.keys(this.modifyPropsMap).forEach((p: any) => {window[p] = this.modifyPropsMap[p];});}inactive() {this.modifyPropsMap = {};iter(window, (prop) => {if (window[prop] !== this.windowSnapshot[prop]) {// 保存变更this.modifyPropsMap[prop] = window[prop];// 恢复到以前的状态window[prop] = this.windowSnapshot[prop];}});}
}

2.proxy方式

乾坤中关于proxy的隔离方式有两种，我们以最优的方案分析。下面中的代码省略了很多，只讲其中的原理。

微应用中的script内容都会加with(global)来执行，这里global是全局对象，如果是proxy的隔离方式那么他就是下面新创建的proxy对象。我们知道with可以改变里面代码的作用域，也就是我们的微应用全局对象会变成下面的这个proxy。当设置属性的时候会设置到proxy对象里，在读取属性时先从proxy里找，没找到再从原始的window中找。也就是你在微应用里修改全局对象的属性时不会在window中修改，而是在proxy对象中修改。因为不会破坏window对象，这样就会隔离各个应用之间的数据影响。

class implements SandBox {constructor(name: string) {const rawWindow = window;const proxy = new Proxy(fakeWindow, {set: (target: FakeWindow, p: PropertyKey, value: any): boolean => {//修改对象直接保存到proxy对象中target[p] = value;},get(target: FakeWindow, p: PropertyKey): any {// 从proxy对象中获取，获取不到从fakeWindow中获取const value = p in target? (target as any)[p]: (rawWindow as any)[p];return value;}})}
}

样式隔离

默认情况下沙箱可以确保单实例场景子应用之间的样式隔离（切换子应用时会卸载添加的样式标签），但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离，需要手动增加配置参数才能激活下面的隔离。

域隔离

为每个css规则添加特定的前缀来起到隔离的作用，例如微应用中的样式是p{color:#000}，处理后为.app1 p {color:#000} 。

创建一个临时的style节点用来后续处理
调用process来处理style规则
通过style的sheet属性来获取一条条规则
然后调用ruleStyle进行转化，转化是通过正则进行匹配然后替换
最后把转化后的内容替换到原有的style节点中

class ScopedCSS {  constructor() {//创建一个临时style节点，用来处理样式this.swapNode = document.createElement('style');rawDocumentBodyAppend.call(document.body, styleNode);}process(styleNode: HTMLStyleElement, prefix: string = '') {//style节点内容不为空if (styleNode.textContent !== '') {//获取内部的样式规则this.swapNode.appendChild(styleNode.textContent);const sheet = this.swapNode.sheet as any;//获取替换后的cssconst css = this.ruleStyle(sheet, prefix);//应用替换后的cssstyleNode.textContent = css;}}private ruleStyle(rule: CSSStyleRule, prefix: string) {const rootSelectorRE = /((?:[^\w\-.#]|^)(body|html|:root))/gm;const selector = rule.selectorText.trim();let { cssText } = rule;//\s\S 匹配所有   这里可以匹配到如 body{cssText = cssText.replace(/^[\s\S]+{/, (selectors) =>// div,span{}  逗号拆分处理selectors.replace(/(^|,\n?)([^,]+)/g, (item, p, s) => {// handle div,body,span { ... }if (rootSelectorRE.test(item)) {return item.replace(rootSelectorRE, (m) => {const whitePrevChars = [',', '('];//处理前面有, (if (m && whitePrevChars.includes(m[0])) {return `${m[0]}${prefix}`;}//直接返回prefixreturn prefix;});}//p 匹配到逗号 ， s为 span{     后面这里会去掉空白return `${p}${prefix} ${s.replace(/^ */, '')}`;}),);return cssText;}
}