复杂 Web 前端的设计

从桌面端软件转到 Web 前端的开发，设计思路上有不小的改变，这里记录一下目前的一些思考。

对于不同的 router

从整个产品的设计来看，UI 代码与业务逻辑代码的分离是必须的。之前做 WPF 开发，能充分体会到 MVVM 设计模式来带的可维护性上的优势。

但 Web 前端的技术碎片化实在太厉害，想要找一种相对成熟的工程实践难度不小，各种 MV* 模式眼花缭乱。号称 MVVM 的 Vue.js 的大部分资料也只是停留在组件化层面，甚至部分文章把 UI 组件作为 View 层，与之绑定的数据视为 ViewModel 层，这在整个 Web 前端产品中还属于比较靠“前”的方案，不足以支撑更复杂的业务逻辑。

经过一番搜索和测试，发现蚂蚁的 DVA/Umi 框架下封装后的 React/Redux 体系非常好用。通过 Model（本质上是 Redux 的 store，使其能够扩展、复用，相关介绍），极大简化了业务逻辑的抽象。

在同一个 router 下有复杂交互的情况

上述的 DVA/Umi 框架，解决的更多是多路由页面间的业务逻辑的抽象问题，但在更细粒度下的数据管理上就有些力不从心了。

这里我参考了 Visual Studio Code 的设计，使用依赖注入将业务逻辑与 UI 代码解耦。VS Code 自己搞了一套 IoC 方案，我则是使用了 InversifyJS。初步使用体验与 .Net 中的依赖注入很接近，熟悉的感觉又回来了 ^_

暂时项目框架刚刚开始搭建，后续有框架上的进展再回来更新。