westore
1.0.0
setData e uma experiência de programação mais intuitiva. Basta update e não precisar mais usar setData .
A Arquitetura de Westore é muito semelhante à arquitetura MVP (Model-View-Presenter):
A camada da loja pode ser entendida como um intermediário no padrão do mediador , reduzindo o número de relações muitos para muitos entre a visão e o modelo para 0 e é responsável pelo controle de trânsito da interação entre a exibição de objeto View e o modelo de objeto modelo.
À medida que os projetos realizados por mini programas se tornam cada vez mais complexos, uma arquitetura razoável pode melhorar a escalabilidade e a manutenção de mini -programas. Escrever a lógica para página/componente é um pecado. Quando a lógica dos negócios se torna complexa, a página/componente se tornará cada vez mais inchada e difícil de manter. Toda vez que os requisitos mudam, Westore define uma arquitetura de mini-programa razoável adequada para mini-programas de qualquer complexidade, tornando a base do projeto mais robusta, fácil de manter e expansível.
npm i westore --saveNPM RELACIONS RELEFUNAM
| projeto | descrever |
|---|---|
| Westore | Código central de Westore |
| Westore-Exemplo | Exemplo oficial de Westore |
| Westore-Exemplo-Ts | Exemplo oficial de Westore (TS+SCSS) |
Seu diagrama de classe é o seguinte:
// 平台无关的 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 HomeStoreOs modelos universais são livres de estrutura e nem vale a pena separar essa lógica para um programa tão simples, mas, à medida que a demanda se expande, você encontrará os enormes benefícios de fazê-lo. Então, aqui está um exemplo um pouco mais complicado.
Captura de tela de jogo:
Diagrama de design:
A parte azul clara da imagem pode ser reutilizada em projetos de serpentes de mini-programa, mini-jogo de cobra e cobra, sem alterar uma linha de código.
Captura de tela do aplicativo:
Diagrama de design:
A parte azul clara da imagem pode ser reutilizada nos projetos TODOAPP e TODOAPP da web sem alterar uma linha de código.
O exemplo oficial traz Snake e Todoapp para um Mini Program Directory da seguinte maneira:
├─ 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
Clique aqui para obter código detalhado
Digitalize o código QR para experimentar:
Resposta para onde você foi para o setData? Antes, devemos primeiro pensar sobre por que Westore encapsula essa API para que os usuários não o usem diretamente. No applet, altere a visualização através setData .
this . setData ( {
'array[0].text' : 'changed text'
} )Mas a experiência de programação intuitiva é:
this . data . array [ 0 ] . text = 'changed text'Se os dados não forem responsivos, atualize manualmente:
this . data . array [ 0 ] . text = 'changed text'
this . update ( )A experiência de programação acima é intuitiva e mais amiga dos desenvolvedores. Portanto, Westore oculta o SetData e não está diretamente exposto ao desenvolvedor, mas usa o DiffData internamente para criar o caminho de atualização mais curto e apenas o método de atualização é exposto ao desenvolvedor.
Vamos dar uma olhada nas capacidades do 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'
} )O resultado do diff é:
{ "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 } 
Princípio do Diff:
export function diffData ( current , previous ) {
const result = { }
if ( ! previous ) return current
syncKeys ( current , previous )
_diff ( current , previous , '' , result )
return result
}As chaves da rodada anterior do estado.
Ao melhorar a experiência de programação, também evita o problema de passar uma grande quantidade de novos dados sempre que o SetData é a atualização mais curta do SetData.
Então, quando você não usa Westore, muitas vezes pode ver esse código:
Depois de usar Westore:
this . data . a . b [ 1 ] . c = 'f'
this . update ( ) Do ponto de vista atual, a maioria dos projetos de mini -programa acumula a lógica de negócios no construtor de página do mini -programa, e basicamente não há legibilidade, o que traz enormes custos para a manutenção posterior. O objetivo da arquitetura de Westore descreve a lógica de negócios/jogo. Página é uma página pura. É responsável apenas por exibir e receber entrada do usuário, clicar, deslizar, pressionar há muito tempo ou outros comandos de gestos e encaminhar as instruções para a loja. A loja chama o modelo de lógica do programa real. Esse limite hierárquico é claro, com forte manutenção, extensibilidade e testabilidade. O tamanho de um único módulo de arquivo também pode ser controlado de maneira muito adequada.
Mit
