如果仅仅对document.body进行patch的话失效

[bobowiki]

为了避免修改qiankun包，我在app的生命周期里面进行了patch操作，而且仅仅对appendchild进行了patch，发现除了body其他元素触发appendchild操作都能拿到相应node节点，维度body啥也没有

[Rahim-Chan]

为了避免修改qiankun包，我在app的生命周期里面进行了patch操作，而且仅仅对appendchild进行了patch，发现除了body其他元素触发appendchild操作都能拿到相应node节点，维度body啥也没有

show your code，要不用我的方案

[bobowiki]

我并没有使用qiankun-rewirte的方案，我的微前端不存在一个页面多个微前端，所以子应用没有共存状态，不需要去做严格的元素隔离，我只是解决了子应用挂载在body 的元素导致样式丢失的问题，我目前也仅仅只是需要这个而已。

…

2023年6月12日 上午10:12，Li Xianwei ***@***.***> 写道： 为了避免修改qiankun包，我在app的生命周期里面进行了patch操作，而且仅仅对appendchild进行了patch，发现除了body其他元素触发appendchild操作都能拿到相应node节点，维度body啥也没有 能借鉴下方案吗，大佬 — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQP2DBOYCUQNQPJLCQBXNBTXKZ3JLANCNFSM6AAAAAAXFCB7HI>. You are receiving this because you authored the thread.

[bobowiki]

在子应用的mount生命周期里面去做，将document.body的操作代理到qiankun容器里面去就行

…

2023年6月12日 下午6:09，Li Xianwei ***@***.***> 写道： 我并没有使用qiankun-rewirte的方案，我的微前端不存在一个页面多个微前端，所以子应用没有共存状态，不需要去做严格的元素隔离，我只是解决了子应用挂载在body 的元素导致样式丢失的问题，我目前也仅仅只是需要这个而已。 … <x-msg://2/#> 2023年6月12日 上午10:12，Li Xianwei @.***> 写道： 为了避免修改qiankun包，我在app的生命周期里面进行了patch操作，而且仅仅对appendchild进行了patch，发现除了body其他元素触发appendchild操作都能拿到相应node节点，维度body啥也没有 能借鉴下方案吗，大佬 — Reply to this email directly, view it on GitHub <#1 (comment) <#1 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQP2DBOYCUQNQPJLCQBXNBTXKZ3JLANCNFSM6AAAAAAXFCB7HI. You are receiving this because you authored the thread. 我的情况也是一样的，所以想借鉴下怎么通过生命周期钩子做元素的patch — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQP2DBI24OMKPCYJW564E3DXK3TFHANCNFSM6AAAAAAXFCB7HI>. You are receiving this because you authored the thread.

[bobowiki]

let renderDomRenderCopy; let reactDomUnmountCopy; let unPatchDocumentMethod; let revocableList = []; const rawMethod = { rawBodyAppendChild: document.body.appendChild, rawBodyRemoveChild: document.body.removeChild, }; export function beforeRender(reactDomRender, reactDomUnmount) { renderDomRenderCopy = reactDomRender; reactDomUnmountCopy = reactDomUnmount; } const patchDocumentMethod = ({ container }) => { if (!document.body.appendChild.__isProxy__) { const appendChildRevocable = Proxy.revocable(document.body.appendChild, { apply(target, thisArg, [node]) { if (container) { return container.appendChild(node); } else { return target.call(thisArg, node); } }, }); revocableList.push(appendChildRevocable); document.body.appendChild = appendChildRevocable.proxy; document.body.appendChild.__isProxy__ = true; } if (!document.body.removeChild.__isProxy__) { const removeChildRevocable = Proxy.revocable(document.body.removeChild, { apply(target, thisArg, [oldChild]) { if (container) { return container.removeChild(oldChild); } else { return target.call(thisArg, oldChild); } }, }); revocableList.push(removeChildRevocable); document.body.removeChild = removeChildRevocable.proxy; document.body.removeChild.__isProxy__ = true; } return function unPatchDocumentMethod() { document.body.appendChild = rawMethod.rawBodyAppendChild; document.body.removeChild = rawMethod.rawBodyRemoveChild; document.body.appendChild.__isProxy__ = false; document.body.removeChild.__isProxy__ = false; revocableList.length && revocableList.forEach((item) => item.revoke()); revocableList = []; }; }; export async function bootstrap() { console.log('app bootstraped'); } export async function mount(props) { unPatchDocumentMethod = patchDocumentMethod(props); try { renderDomRenderCopy(props); console.log(':::子应用mount'); } catch (error) { console.log(error); } } export async function unmount(props) { unPatchDocumentMethod && unPatchDocumentMethod(); try { reactDomUnmountCopy(props); console.log(':::子应用卸载成功'); } catch (error) { console.log(error); } } 实现流程如上，将这个作为 npm 发布，然后子子应用中导入，传入子应用的render和unmount方法即可，然后在export * from ‘发布的 npm 包’将生命周期抛出去

…

2023年6月12日 下午6:09，Li Xianwei ***@***.***> 写道： 我并没有使用qiankun-rewirte的方案，我的微前端不存在一个页面多个微前端，所以子应用没有共存状态，不需要去做严格的元素隔离，我只是解决了子应用挂载在body 的元素导致样式丢失的问题，我目前也仅仅只是需要这个而已。 … <x-msg://3/#> 2023年6月12日 上午10:12，Li Xianwei @.***> 写道： 为了避免修改qiankun包，我在app的生命周期里面进行了patch操作，而且仅仅对appendchild进行了patch，发现除了body其他元素触发appendchild操作都能拿到相应node节点，维度body啥也没有 能借鉴下方案吗，大佬 — Reply to this email directly, view it on GitHub <#1 (comment) <#1 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQP2DBOYCUQNQPJLCQBXNBTXKZ3JLANCNFSM6AAAAAAXFCB7HI. You are receiving this because you authored the thread. 我的情况也是一样的，所以想借鉴下怎么通过生命周期钩子做元素的patch — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQP2DBI24OMKPCYJW564E3DXK3TFHANCNFSM6AAAAAAXFCB7HI>. You are receiving this because you authored the thread.

[aique127]

let renderDomRenderCopy; let reactDomUnmountCopy; let unPatchDocumentMethod; let revocableList = []; const rawMethod = { rawBodyAppendChild: document.body.appendChild, rawBodyRemoveChild: document.body.removeChild, }; export function beforeRender(reactDomRender, reactDomUnmount) { renderDomRenderCopy = reactDomRender; reactDomUnmountCopy = reactDomUnmount; } const patchDocumentMethod = ({ container }) => { if (!document.body.appendChild.isProxy) { const appendChildRevocable = Proxy.revocable(document.body.appendChild, { apply(target, thisArg, [node]) { if (container) { return container.appendChild(node); } else { return target.call(thisArg, node); } }, }); revocableList.push(appendChildRevocable); document.body.appendChild = appendChildRevocable.proxy; document.body.appendChild.isProxy = true; } if (!document.body.removeChild.isProxy) { const removeChildRevocable = Proxy.revocable(document.body.removeChild, { apply(target, thisArg, [oldChild]) { if (container) { return container.removeChild(oldChild); } else { return target.call(thisArg, oldChild); } }, }); revocableList.push(removeChildRevocable); document.body.removeChild = removeChildRevocable.proxy; document.body.removeChild.isProxy = true; } return function unPatchDocumentMethod() { document.body.appendChild = rawMethod.rawBodyAppendChild; document.body.removeChild = rawMethod.rawBodyRemoveChild; document.body.appendChild.isProxy = false; document.body.removeChild.isProxy = false; revocableList.length && revocableList.forEach((item) => item.revoke()); revocableList = []; }; }; export async function bootstrap() { console.log('app bootstraped'); } export async function mount(props) { unPatchDocumentMethod = patchDocumentMethod(props); try { renderDomRenderCopy(props); console.log(':::子应用mount'); } catch (error) { console.log(error); } } export async function unmount(props) { unPatchDocumentMethod && unPatchDocumentMethod(); try { reactDomUnmountCopy(props); console.log(':::子应用卸载成功'); } catch (error) { console.log(error); } } 实现流程如上，将这个作为 npm 发布，然后子子应用中导入，传入子应用的render和unmount方法即可，然后在export * from ‘发布的 npm 包’将生命周期抛出去
…
2023年6月12日 下午6:09，Li Xianwei @.> 写道： 我并没有使用qiankun-rewirte的方案，我的微前端不存在一个页面多个微前端，所以子应用没有共存状态，不需要去做严格的元素隔离，我只是解决了子应用挂载在body 的元素导致样式丢失的问题，我目前也仅仅只是需要这个而已。 … x-msg://3/# 2023年6月12日 上午10:12，Li Xianwei @.> 写道： 为了避免修改qiankun包，我在app的生命周期里面进行了patch操作，而且仅仅对appendchild进行了patch，发现除了body其他元素触发appendchild操作都能拿到相应node节点，维度body啥也没有 能借鉴下方案吗，大佬 — Reply to this email directly, view it on GitHub <#1 (comment) <#1 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQP2DBOYCUQNQPJLCQBXNBTXKZ3JLANCNFSM6AAAAAAXFCB7HI. You are receiving this because you authored the thread. 我的情况也是一样的，所以想借鉴下怎么通过生命周期钩子做元素的patch — Reply to this email directly, view it on GitHub <#1 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AQP2DBI24OMKPCYJW564E3DXK3TFHANCNFSM6AAAAAAXFCB7HI. You are receiving this because you authored the thread.

你好，这个方式重写body.appendChild方法会把主应用和其它子应用(同时激活多个子应用)的也重写了，导致主应用的弹窗加到了这个子应用里。

[aique127]

有没有什么办法，能单独重写每个子应用的body.appendChild方法呢

[Rahim-Chan]

可以改成在主应用加载子应用的时候去patch，而不用发布新的npm，也不用子应用去感知

[aique127]

可以改成在主应用加载子应用的时候去patch，而不用发布新的npm，也不用子应用去感知

不管在哪patch都一样，这个方式会把主应用和其它子应用(同时激活多个子应用)的也重写了，导致主应用的弹窗加到了这个子应用里。

[Rahim-Chan]

可以改成在主应用加载子应用的时候去patch，而不用发布新的npm，也不用子应用去感知

不管在哪patch都一样，这个方式会把主应用和其它子应用(同时激活多个子应用)的也重写了，导致主应用的弹窗加到了这个子应用里。

show your code

[aique127]

可以改成在主应用加载子应用的时候去patch，而不用发布新的npm，也不用子应用去感知

不管在哪patch都一样，这个方式会把主应用和其它子应用(同时激活多个子应用)的也重写了，导致主应用的弹窗加到了这个子应用里。

show your code

qiankun没有代理document.appendChild方法，重写它等于在基座和所有子系统都重写了

[wbcz]

为何不直接提个mr, 你这样子要单独维护包，后续qiankun升级以后，你如何处理