关于对 Micro-app 代码架构和开发体验改善的建议

[LinFeng1997]

背景

Micro-app 是一款非常优秀的微前端解决方案，它对于我前段时间的一些工作提供了很大的帮助，所以我也参与到了这个项目的共建中，为这个项目贡献出自己的一份力量，不过在阅读源码和提交 pr 的几次过程中，我发现了一些开发上的几个痛点：

1. 修改一个功能的时候，发现各个模块耦合过紧，职责边界不清晰，容易产生改了一小个地方就影响大范围的功能
2. 目前的测试代码偏集成测试，单元测试较少，不便于测试小的修改
3. 一些代码可读性方面上的小问题，比如命名不清晰，函数过长，全局变量过多，重复代码等

期望的效果

1. 对代码采用 OOP 范式，将职责相同需要内聚的代码封装成一个个类，无副作用的函数仍然保留为单纯的工具函数，适当使用设计模式，比如用单例模式来管理全局变量
2. 类划分完毕后，针对每个类编写单元测试
3. 根据《重构》《代码大全》等业界最佳实践 case by case 优化代码可读性

其他

考虑到 1.0 版本正在开发中，是否等 1.0 版本发布后再改呢？

[bailicangdu]

感谢提醒，我们会持续优化

[M69W]

既然 1.0 还在路上，不建议 1.0 之后再改。

[lanmingle]

建议搞起~

[LinFeng1997]

@lanmingle 现在执行

wc -l `find . -name '*.ts' -not -path './__tests__/*'`

扫描现有的代码结构，得到的结果是：

106 ./prefetch.ts
466 ./source/scoped_css.ts
409 ./source/scripts.ts
41 ./source/load_event.ts
185 ./source/links.ts
121 ./source/index.ts
17 ./source/fetch.ts
497 ./source/patch.ts
422 ./micro_app_element.ts
380 ./libs/utils.ts
27 ./libs/additional.ts
143 ./libs/global_env.ts
342 ./sandbox/effect.ts
408 ./sandbox/index.ts
49 ./sandbox/bind_function.ts
36 ./constants.ts
19 ./index.ts
192 ./micro_app.ts
92 ./interact/event_center.ts
241 ./interact/index.ts
79 ./interact/lifecycles_event.ts
424 ./create_app.ts
68 ./polyfill/jsx-custom-event.ts
4764 total

我的想法是：

1. 先从可以作为底层依赖的模块和工具函数开始补单测（之前有的部分函数的测试可以移到单测目录下来）
2. 根据模块的依赖关系逐步从下到上重构为一个个类，并编写对应的单测，顺便重构代码和设计，不破坏原有的逻辑。我梳理出来的顺序是：

• [x] libs 文件夹下的纯函数单测补充，也就是 380 ./libs/utils.ts 里的代码
• [x] 92 ./interact/event_center.ts 下的事件中心类单测补充
• [x] libs 文件夹下的其他函数单测补充，但这里其实依赖了一个全局变量 appInstanceMap，这里需要考虑用一个 AppManager 类封装起来管理
• [x] 生命周期代码 79 ./interact/lifecycles_event.ts 的单测补充，但是这里依赖了 microApp 这个全局变量，也要考虑怎么重构起来
• [ ] 加载资源的代码抽取和编写单测，也就是 185 ./source/links.ts/17 ./source/fetch.ts/121 ./source/index.ts/409 ./source/scripts.ts 里的部分代码，个人觉得这里面混合了加载资源（html/css/js）和解析资源的逻辑，其实可以拆开
• [ ] 解析资源的代码抽取和编写单测
• [ ] 全局劫持的代码（497 ./source/patch.ts）抽取为 document 相关的和非 document 相关的，并分别编写单测，因为这段时间我和作者正在讨论 document 劫持逻辑是否能取消，转而在沙箱里使用 proxyDocument 来做，这一块拆开也方便之后替换。
• [ ] 沙箱的代码（408 ./sandbox/index.ts）抽取和编写单测，这里我个人认为可以抽一个纯沙箱出来（给只有沙箱需求的开发者 import 使用），然后基于这个沙箱封装成 micro-app 用的沙箱（里面有 AppManger 等的逻辑）
• [ ] 沙箱副作用的代码(342 ./sandbox/effect.ts)抽取和编写单测，这里我个人认为可以根据 document/window/时间的拆成几个小模块
• [ ] CreateApp 的代码（424 ./create_app.ts）抽取和编写单测，这里我个人觉得一个类叫 CreateApp 很奇怪，是不是叫 MicroAppInstance 更好？
• [ ] web component 代码（422 ./micro_app_element.ts）的拆分和编写单测，这里我个人觉得可以拆成 web component ui 代码和逻辑代码。
• [ ] 样式隔离代码（466 ./source/scoped_css.ts）的拆分和单测编写，这里我发现现有的测试比较好了，看起来只需要稍微改造下就行
• [ ] 其他代码的拆分和单测编写，如 49 ./sandbox/bind_function.ts 等

[JoMartinezZhu]

@lanmingle 现在执行

wc -l `find . -name '*.ts' -not -path './__tests__/*'`

扫描现有的代码结构，得到的结果是：

106 ./prefetch.ts
466 ./source/scoped_css.ts
409 ./source/scripts.ts
41 ./source/load_event.ts
185 ./source/links.ts
121 ./source/index.ts
17 ./source/fetch.ts
497 ./source/patch.ts
422 ./micro_app_element.ts
380 ./libs/utils.ts
27 ./libs/additional.ts
143 ./libs/global_env.ts
342 ./sandbox/effect.ts
408 ./sandbox/index.ts
49 ./sandbox/bind_function.ts
36 ./constants.ts
19 ./index.ts
192 ./micro_app.ts
92 ./interact/event_center.ts
241 ./interact/index.ts
79 ./interact/lifecycles_event.ts
424 ./create_app.ts
68 ./polyfill/jsx-custom-event.ts
4764 total

我的想法是：

1. 先从可以作为底层依赖的模块和工具函数开始补单测（之前有的部分函数的测试可以移到单测目录下来）
2. 根据模块的依赖关系逐步从下到上重构为一个个类，并编写对应的单测，顺便重构代码和设计，不破坏原有的逻辑。我梳理出来的顺序是：

• [ ] libs 文件夹下的纯函数单测补充，也就是 380 ./libs/utils.ts 里的代码
• [ ] 92 ./interact/event_center.ts 下的事件中心类单测补充
• [ ] libs 文件夹下的其他函数单测补充，但这里其实依赖了一个全局变量 appInstanceMap，这里需要考虑用一个 AppManager 类封装起来管理
• [ ] 生命周期代码 79 ./interact/lifecycles_event.ts 的单测补充，但是这里依赖了 microApp 这个全局变量，也要考虑怎么重构起来
• [ ] 加载资源的代码抽取和编写单测，也就是 185 ./source/links.ts/17 ./source/fetch.ts/121 ./source/index.ts/409 ./source/scripts.ts 里的部分代码，个人觉得这里面混合了加载资源（html/css/js）和解析资源的逻辑，其实可以拆开
• [ ] 解析资源的代码抽取和编写单测
• [ ] 全局劫持的代码（497 ./source/patch.ts）抽取为 document 相关的和非 document 相关的，并分别编写单测，因为这段时间我和作者正在讨论 document 劫持逻辑是否能取消，转而在沙箱里使用 proxyDocument 来做，这一块拆开也方便之后替换。
• [ ] 沙箱的代码（408 ./sandbox/index.ts）抽取和编写单测，这里我个人认为可以抽一个纯沙箱出来（给只有沙箱需求的开发者 import 使用），然后基于这个沙箱封装成 micro-app 用的沙箱（里面有 AppManger 等的逻辑）
• [ ] 沙箱副作用的代码(342 ./sandbox/effect.ts)抽取和编写单测，这里我个人认为可以根据 document/window/时间的拆成几个小模块
• [ ] CreateApp 的代码（424 ./create_app.ts）抽取和编写单测，这里我个人觉得一个类叫 CreateApp 很奇怪，是不是叫 MicroAppInstance 更好？
• [ ] web component 代码（422 ./micro_app_element.ts）的拆分和编写单测，这里我个人觉得可以拆成 web component ui 代码和逻辑代码。
• [ ] 样式隔离代码（466 ./source/scoped_css.ts）的拆分和单测编写，这里我发现现有的测试比较好了，看起来只需要稍微改造下就行
• [ ] 其他代码的拆分和单测编写，如 49 ./sandbox/bind_function.ts 等

字节真卷，划水看开源

[lanmingle]

@LinFeng1997 @JoMartinezZhu 哈哈哈！感谢奉献 ~ 有空我看下，看是否可以一起搞一下，嘻嘻嘻！