wujie icon indicating copy to clipboard operation
wujie copied to clipboard

顶层声明的 var 变量,文件之间无法共享

Open jeezliu opened this issue 3 years ago • 1 comments

描述bug script 文件声明的 var 变量,没有挂到 window 对象上,script 之间无法共享

如何复现 创建一个简单的文件,使用wujie加载报错 `

`

错误截图 如果有可以将截图带上

最小复现仓库或者地址 重要!!!,请尽量给出复现仓库,这样能极大加快bug解决速度

jeezliu avatar Aug 15 '22 15:08 jeezliu

好问题,在无界微前端中子应用代码运行在闭包内

为什么要在闭包内执行代码?

为了劫持修改 window.location,因为 location 的 configuable 为 false, 所以只能这样闭包解决

code = `(function(window, self, global, location) {
      ${code}
}).bind(window.__WUJIE.proxy)(
  window.__WUJIE.proxy,
  window.__WUJIE.proxy,
  window.__WUJIE.proxy,
  window.__WUJIE.proxyLocation,
);`;

想知道 window.location 修改了啥,可以看看 window.__WUJIE.proxyLocation

回到正题,为啥 var 不起作用呢,因为 var 在闭包内执行,怎么解决呢?看常见问题 2

有时我在想是不是出一个 api,让用户决定代码是否在 闭包内执行,毕竟这么干只是为了修改 location,用户可以直接从 window.$wujie.locaiton 拿到 修改后的 location 来用

yiludege avatar Aug 15 '22 15:08 yiludege

好问题,在无界微前端中子应用代码运行在闭包内

为什么要在闭包内执行代码?

为了劫持修改 window.location,因为 location 的 configuable 为 false, 所以只能这样闭包解决

code = `(function(window, self, global, location) {
      ${code}
}).bind(window.__WUJIE.proxy)(
  window.__WUJIE.proxy,
  window.__WUJIE.proxy,
  window.__WUJIE.proxy,
  window.__WUJIE.proxyLocation,
);`;

想知道 window.location 修改了啥,可以看看 window.__WUJIE.proxyLocation

回到正题,为啥 var 不起作用呢,因为 var 在闭包内执行,怎么解决呢?看常见问题 2

有时我在想是不是出一个 api,让用户决定代码是否在 闭包内执行,毕竟这么干只是为了修改 location,用户可以直接从 window.$wujie.locaiton 拿到 修改后的 location 来用

为什么不用一个闭包,要为每个script创建一个闭包

squallliu avatar Sep 03 '22 03:09 squallliu

为什么不用一个闭包,要为每个script创建一个闭包

  • 因为无界是边下载边执行的,fiber模式下,每个js文件都包裹在一个requestIdleCallback里面运行,如果要用一个闭包,那就需要先统一将所有js下载下来,然后再一个闭包内执行,效率太慢
  • 异步js文件也还是没有办法塞到这个闭包内执行

另外,如果不想js代码在闭包内执行可以 使用 jsIgnores plugin 来实现了

yiludege avatar Sep 03 '22 03:09 yiludege