westore
1.0.0
setData ruta más cortos y una experiencia de programación más intuitiva. Simplemente update y ya no necesita usar setData .
La arquitectura de Westore es muy similar a la arquitectura MVP (modelo-view-presente):
La capa de la tienda puede entenderse como un intermediario en el patrón del mediador , reduciendo el número de relaciones de muchas a muchos entre la vista y el modelo a 0, y es responsable del control de tránsito de la interacción entre la vista de objeto de vista y el modelo de objeto del modelo.
A medida que los proyectos llevados a cabo por mini programas se vuelven cada vez más complejos, una arquitectura razonable puede mejorar la escalabilidad y el mantenimiento de los mini programas. Escribir lógica a página/componente es un pecado. Cuando la lógica empresarial se vuelve compleja, la página/componente se hinchará cada vez más y más difíciles de mantener. Cada vez que cambian los requisitos, Westore define una arquitectura de mini-programas razonable adecuada para miniprogramas de cualquier complejidad, lo que hace que la base del proyecto sea más robusta, fácil de mantener y expandible.
npm i westore --saveProblemas relacionados con NPM Referencia: Mini Documentación oficial del programa: Soporte de NPM
| proyecto | describir |
|---|---|
| Westore | Código central de Westore |
| Westore-Ejemplo | Ejemplo oficial de Westore |
| Westore-Ejemplo-TS | Ejemplo oficial de Westore (TS+SCSS) |
Su diagrama de clase es el siguiente:
// 平台无关的 Model
import Counter from '../models/counter'
// 平台无关的 Model
import User from '../models/user'
import { Store } from 'westore'
// 页面 store，一个页面一个
class HomeStore extends Store {
constructor ( ) {
super ( )
this . data = {
count : 0 ,
motto : 'Hello World' ,
userInfo : null
}
// 消费 Model
this . counter = new Counter ( )
// 消费 Model
this . user = new User ( {
onUserInfoLoaded : ( ) => {
this . syncUserModel ( )
}
} )
this . syncCountModel ( )
}
// 同步 Model 的数据到 ViewModel 并更新视图
syncCountModel ( ) {
this . data . count = this . counter . count
this . update ( )
}
// 同步 Model 的数据到 ViewModel 并更新视图
syncUserModel ( ) {
this . data . motto = this . user . motto
this . data . userInfo = this . user . userInfo
this . update ( )
}
increment ( ) {
this . counter . increment ( )
this . syncCountModel ( )
}
decrement ( ) {
this . counter . decrement ( )
this . syncCountModel ( )
}
getUserProfile ( ) {
this . user . getUserProfile ( )
}
}
module . exports = new HomeStoreLos modelos universales no contienen marco, y ni siquiera vale la pena separar esta lógica para un programa tan simple, pero a medida que la demanda se expande, encontrará los enormes beneficios de hacerlo. Así que aquí hay un ejemplo un poco más complicado.
Captura de pantalla del juego:
Diagrama de diseño:
La parte azul claro en la imagen se puede reutilizar en la serpiente miniprograma, los proyectos de serpientes mini-juego y la serpiente web, sin cambiar una línea de código.
Captura de pantalla de la aplicación:
Diagrama de diseño:
La parte azul claro en la imagen se puede reutilizar en los proyectos del applet TodoApp y Web TodoApp sin cambiar una línea de código.
El ejemplo oficial lleva a Snake y ToDoApp a un directorio de mini programa de la siguiente manera:
├─ models // 业务模型实体
│ └─ snake-game
│ ├─ game.js
│ └─ snake.js
│
│ ├─ log.js
│ ├─ todo.js
│ └─ user.js
│
├─ pages // 页面
│ ├─ game
│ ├─ index
│ ├─ logs
│ └─ other.js
│
├─ stores // 页面的数据逻辑，page 和 models 的桥接器
│ ├─ game-store.js
│ ├─ log-store.js
│ ├─ other-store.js
│ └─ user-store.js
│
├─ utils
Haga clic aquí para obtener un código detallado
Escanee el código QR para experimentar:
Respuesta ¿A dónde fuiste a SetData? Antes, primero debemos pensar por qué Westore encapsula esta API para que los usuarios no lo usen directamente. En el applet, cambie la vista a través de setData .
this . setData ( {
'array[0].text' : 'changed text'
} )Pero la experiencia de programación intuitiva es:
this . data . array [ 0 ] . text = 'changed text'Si los datos no son receptivos, actualice manualmente:
this . data . array [ 0 ] . text = 'changed text'
this . update ( )La experiencia de programación anterior es intuitiva y más amigable para los desarrolladores. Por lo tanto, Westore oculta SetData y no está directamente expuesto al desarrollador, pero usa diffData internamente para crear la ruta de actualización más corta, y solo el método de actualización está expuesto al desarrollador.
Echemos un vistazo a las capacidades de Westore Diffdata:
diff ( {
a : 1 , b : 2 , c : "str" , d : { e : [ 2 , { a : 4 } , 5 ] } , f : true , h : [ 1 ] , g : { a : [ 1 , 2 ] , j : 111 }
} , {
a : [ ] , b : "aa" , c : 3 , d : { e : [ 3 , { a : 3 } ] } , f : false , h : [ 1 , 2 ] , g : { a : [ 1 , 1 , 1 ] , i : "delete" } , k : 'del'
} )El resultado de la diff es:
{ "a" : 1 , "b" : 2 , "c" : "str" , "d.e[0]" : 2 , "d.e[1].a" : 4 , "d.e[2]" : 5 , "f" : true , "h" : [ 1 ] , "g.a" : [ 1 , 2 ] , "g.j" : 111 , "g.i" : null , "k" : null } 
DiFf Principio:
export function diffData ( current , previous ) {
const result = { }
if ( ! previous ) return current
syncKeys ( current , previous )
_diff ( current , previous , '' , result )
return result
}Las teclas de la ronda anterior de estado. Los datos se sincronizan principalmente para detectar elementos eliminados en una matriz o teclas eliminadas en OBJ.
Al mejorar la experiencia de programación, también evita el problema de pasar una gran cantidad de datos nuevos cada vez que SetData es la actualización de ruta más corta de SetData.
Entonces, cuando no usa Westore, a menudo puede ver dicho código:
Después de usar Westore:
this . data . a . b [ 1 ] . c = 'f'
this . update ( ) Desde la perspectiva actual, la mayoría de los proyectos de mini programas acumulan la lógica de negocios en el constructor de páginas del mini programa, y básicamente no hay legibilidad, lo que aporta grandes costos al mantenimiento posterior. El objetivo de la arquitectura de Westore desacopla la lógica de negocios/juegos. La página es una página pura. Solo es responsable de mostrar y recibir la entrada del usuario, hacer clic, deslizarse, presionar a largo plazo u otros comandos de gestos, y reenviar las instrucciones a la tienda. La tienda luego llama al modelo de lógica del programa real. Este límite jerárquico es claro, con un fuerte mantenimiento, extensibilidad y capacidad de prueba. El tamaño de un solo módulo de archivo también se puede controlar de manera muy adecuada.
MIT
