链氪巴士
  1. 首页
  2. 站点导航
  3. 文章
  4. 快讯
  5. 软件
  6. 书刊
  7. 关于

Tencent/westore:小程序项目分层架构

Westore是针对小程序的项目分层架构。它在小程序开发中有着重要意义,强制使用面向对象程序设计,其Model可移植,View无业务逻辑且薄,内部通过特定数据处理技术提升编程体验。架构类似MVP,在多个实践案例中展示出良好的代码复用性等优势,能解决传统小程序开发中业务逻辑堆积在...

访问官网 →

【Github】项目名:Tencent/westore:小程序项目分层架构

项目简介

Westore是一个针对小程序的项目分层架构。它强制小程序使用面向对象程序设计,开发者从抽象类、类属性和方法以及类之间关联关系入手。其Model可移植,View很薄无业务逻辑,内部使用deepClone + dataDiff换取较好编程体验,View和Model无直接依赖便于测试。架构类似MVP架构,能提升小程序扩展性和维护性。

核心技术

  1. 面向对象程序设计:使用职责驱动设计方式抽象出类等关系。例如开发中先设计出Model来表达业务模型。
  2. 数据处理技术:内部采用deepClone + dataDiff,换取最短路径setData,只对外暴露update方法隐藏setData,在提升编程体验的同时规避每次setData传递大量新数据的问题。
  3. 架构设计类似MVP:View和Store双向通讯、互相引用,View与Model不直接联系通过Store传递,Store引用Model实例,Model不依赖Store,View薄无业务逻辑,Store薄只维护数据和桥接View与Model,Model厚包含所有逻辑。

实践案例

  1. 重命名app的开发:传统开发方式与使用Westore重构对比,在使用Westore时定义User实体、UserStore,然后在页面中使用UserStore,展示了代码的解耦和更好的维护性。
  2. 贪吃蛇案例:游戏中的浅蓝色部分代码可在小程序、小游戏和Web贪吃蛇项目复用。
  3. TodoApp案例:应用中的浅蓝色部分代码可在小程序和Web TodoApp项目复用。

项目总结

目前多数小程序项目业务逻辑堆积在Page构造函数,可读性差、维护成本高。Westore架构将业务/游戏逻辑解耦,使Page只负责展示和接收用户指令并中转给store,store再调用model逻辑,分层边界清晰,维护性、扩展性和可测试性强,能有效控制文件模块大小。欢迎大家留言讨论这个项目。

项目地址

GitHub链接直达