使用wujie(无界)微前端过程中的e.target指向问题修复

缘起

微前端的方案很多，大体上调研阶段躲不过qiankun, wujie, single-spa这些。

如果你使用的是无界，那么在使用子应用的时候会发现事件回调函数的e.target指向发生了变化，导致你原先的从e.target.value取值的方式无法读取到表单的值，或者setTimeout的回调函数执行会出现一些诡异的现象。

官方解释

对于这种现象官方的文档也做了解释，官方归咎于浏览器原生的处理导致了这个问题。

解决办法

解法-1（更直接）

在异步处理时，获取 e.target 的方式需要修改成： (e.target.shadowRoot && e.composed) ? (e.composedPath()[0] || e.target) : e.target

解法-2（更彻底）

对于自定义的组件，按照解法1可以解决，那如果我引用的第三方组件库遇到了这个问题该怎么处理呢？我总不能fork一份自己魔改吧。

聪明的你一定想到了，那我是不是可以劫持掉e.target，让它指向我想要的地方。

这个方式非常彻底，但是听起来风险很大，如果造成事故了怎么办？

当然让官方被这个锅，其实使用一个官方提供的插件就OK了

插件的链接在这里。

使用方法如下：

import { startApp } from 'wujie'
import { EventTargetPlugin } from "wujie-polyfill";
// 无框架
setupApp({
   name: '唯一id',
   url: '子应用地址',
   exec: true,
   el: '容器',
   sync: true,
   plugins: [EventTargetPlugin()]
}) 

// vue 
<WujieVue
  width="100%"
  height="100%"
  name="xxx"
  :url="xxx"
  :plugins=“[EventTargetPlugin()]”
 ></WujieVue>

// react
<WujieReact
  width="100%"
  height="100%"
  name="xxx"
  url="{xxx}"
  plugins="{[EventTargetPlugin()]}"
 ></WujieReact>

如上，在主应用中使用这个官方插件就可以解决问题了。神奇的地方在于，官网的Q&A没有直接贴上这个插件的链接，以至于我还是在stackoverflow上面发现的这个插件，也就有了这篇文章的撰写。

希望能帮到你。

公众号：webcooking