【WuJie-腾讯无界微前端】

无界微前端实现方式

1. 使用前端技术Shadow DOM（影子 DOM），iframe， Custom element（自定义元素），实现微前端渲染子应用的css隔离和js隔离
2. iframe使用new Blob() 加 URL.createObjectURL()创建一个blob:的伪同源的iframe
3. React,Vue等三方框架使用WuJie提供的对应框架的组件，借助相应的生命周期钩子实现子应用加载。
4. jsp等非前端框架需手动调用WuJie API实现子应用加载
5. 借助Proxy，Object.defineProperties实现对document，location，ownerDocument，baseURI等属性的代理，将shadow dom 与 iframe 与 主应用上下文关联起来。
6. ??子应用卸载存疑，目前我的理解是只是路由切换shadow dom切换，真实Custom element创建的自定义元素是在同域的iframe下，而这个iframe并非存在与组件内部，而是在body下，所以应该也不会触发自定义元素的disconnectedCallback回调。

无界实现简单流程图

无界微前端方案要解决的问题

1. iframe内嵌的子应用如何保证能够使用主应用上下文中的cookie等信息？
   浏览器的请求大致分为两类，静态资源请求和网络请求。
   因为wujie需要对js的逻辑执行进行代理，所以需要将静态资源的请求转变成网络请求的方式来获取响应体text【第二个问题有提到】。所以wujie暴露了fetch让使用者可以配置跨域请求的自定义函数，以保证请求的静态资源url与当前域名不同源（same-origin）时能够让请求体带有cookie这个请求头。
   
   
   对于网络请求能不能携带cookie这个请求头是同理的。而对于子应用发起的请求能不能携带主应用下的cookie信息，我的理解是这样子的。只要这个请求满足cookie信息配置的Domain，Path等规则，就能够通过携带，与发起位置，怎样发起并无关系。

   总结来看要注意两点:
   第一点：请求能不能带有cookie这个请求头，与当前请求url，当前源，服务端跨域配置等有关系
   第二点：请求头中cookie中能不能携带某一个cookie信息，与当前请求的url和具体cookie信息的配置设置有关系

2. wujie如何能够保证子应用内部能够正确使用location.protocol + ‘//’ + location.host拼接跳转的正确性？
   wujie在创建过程中使用proxy代理子应用的window，location等，然后将代码执行时的location替换为代理后的proxyLocation对象，从而实现对子应用location的劫持，来返回子应用正确的location信息。
   
   
   但是从wujie的逻辑来看，只有内联脚本，非降级并且是非type=‘module’的才能触发这段逻辑。那其它不满足这个判断的怎么办呢？？？

3. 即然iframe和shadow dom是分开的，那么无界是如何将两者关联起来的？
   首先，如何将iframe中js执行逻辑中对dom的操作映射到shadow dom。
   对iframe的Document.prototype进行劫持，以下为本地测试劫持Doucment.prototpe.append属性，所实现的效果
   
   劫持Docuemnt.prototype,然后将执行函数的this指向shadow，就与创建的shadow串联起来了。
   
   
   但是存在一个问题，iframe到shadow方向的通道打通了，那shadow到iframe的呢。比如原生html或者jsp中最喜欢写的onclick的原生绑定事件，能不能在shadow中指向iframe的window呢？？？

4. shadow dom如何保证相对或者绝对路径资源访问的正确性？
   iframe对js中出现的资源访问路径采用了多种处理方式，来保证最终资源请求的正确星
   第一种：
   创建base标签，设置正确指向的href属性，添加到frame中的head标签中
   
   第二种：
   对创建iframe中的HTMLImageElement.prototype的属性进行代理，下面是我本地简单代理 HTMLImageElement.prototype的src属性所实现的效果。
   
   wujie关键逻辑：对HTMLImageElement.prototype的src属性通过Object.prototype进行劫持，然后通过iframe正确设置的baseUrl来将路径替换成完整的url资源路径