复杂 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 中的依赖注入很接近,熟悉的感觉又回来了 _

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

复杂 Web 前端的设计

上一篇:微信公众号 报token验证失败


下一篇:JS易忽略的运算符用法