Tencent

westore

Mobile#WeChat Mini Program#MVVM#Architecture#JavaScript

4,297

// summary

Westore is an MVVM layered architecture designed specifically for mini programs, aiming to completely decouple business logic from the view layer through responsibility-driven design. By introducing a Store layer as an intermediary, the framework achieves high portability and code reusability for the Model. Developers do not need to operate setData directly, as they can simply call the update method to achieve efficient view updates through an internal diff mechanism.

// technical analysis

Westore is an MVVM layered architecture framework designed specifically for WeChat Mini Programs, aiming to solve the maintenance and scalability issues caused by business logic accumulation in Page/Component. By introducing Responsibility-Driven Design, it forces developers to encapsulate business logic within an independent Model layer, thereby achieving complete decoupling of business logic from the view layer. The architecture adopts the Mediator pattern, bridging View and Model through a Store layer, which not only improves code testability but also enables cross-platform reuse of the Model layer, allowing developers to seamlessly migrate core business logic to Web or other rendering environments.

// key highlights

Enforces object-oriented programming, improving code structure and modularity through Responsibility-Driven Design.

Achieves decoupling of business logic from the view layer, with Model layer code 100% portable to Web, mini-games, and other environments.

Adopts a Passive View design, ensuring the view layer is only responsible for presentation and contains no business logic.

Built-in deepClone and dataDiff mechanisms automatically calculate the shortest update path, eliminating the need for tedious manual setData calls.

Simplifies interaction between View and Model through the Mediator pattern, effectively reducing system complexity and improving maintainability.

Supports unit testing via mock object injection, significantly enhancing code robustness in complex business scenarios.

// use cases

Decouple business logic from the view layer to improve code maintainability and scalability.

Achieve 100% code reuse for the Model layer across different platforms through object-oriented design.

Utilize an internal diff algorithm to automatically calculate the shortest path for view updates, simplifying the development process.

// getting started

Developers can integrate the framework into a Mini Program project using the command npm install westore --save. After installation, it is recommended to refer to the official westore-example or westore-example-ts sample code, organize business logic according to the Model-Store-Page layered structure, and manage page data and interactions by extending the Store class.