westore
1.0.0
setData le plus court et une expérience de programmation plus intuitive. Il suffit update et n'a plus besoin d'utiliser setData .
L'architecture Westore est très similaire à l'architecture MVP (modèle-View-Presenter):
La couche de magasin peut être comprise comme un intermédiaire dans le modèle de médiateur , réduisant le nombre de relations multiples à plusieurs entre la vue et le modèle à 0, et est responsable du contrôle du transit de l'interaction entre la vue de l'objet de vue et le modèle d'objet modèle.
À mesure que les projets menés par les mini-programmes deviennent de plus en plus complexes, une architecture raisonnable peut améliorer l'évolutivité et la maintenance des mini programmes. L'écriture de la logique sur page / composant est un péché. Lorsque la logique métier devient complexe, la page / le composant deviendra de plus en plus gonflé et difficile à maintenir. Chaque fois que les exigences changent, Westore définit une architecture de mini-programme raisonnable adaptée aux mini-programmes de toute complexité, ce qui rend la base de projet plus robuste, facile à entretenir et extensible.
npm i westore --saveProblèmes liés au NPM Référence: Mini Programme Documentation officielle: support NPM
| projet | décrire |
|---|---|
| Westore | Code de base de Westore |
| à l'ouest | Exemple officiel de Westore |
| Westore-Example-TS | Exemple officiel de Westore (TS + SCSS) |
Son diagramme de classe est le suivant:
// 平台无关的 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 HomeStoreLes modèles universels sont sans cadre, et il ne vaut même pas la peine de séparer cette logique pour un programme aussi simple, mais à mesure que la demande se développe, vous trouverez les énormes avantages de le faire. Voici donc un exemple un peu plus compliqué.
Capture d'écran de jeu:
Diagramme de conception:
La partie bleu clair de l'image peut être réutilisée dans les mini-programmes de serpents, de mini-jeux de serpents et de serpents Web, sans changer de ligne de code.
Capture d'écran de l'application:
Diagramme de conception:
La partie bleu clair de l'image peut être réutilisée dans les projets Applet TodoApp et Web Todoapp sans modifier une ligne de code.
L'exemple officiel apporte Snake et ToDoApp dans un mini répertoire de programme comme suit:
├─ 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
Cliquez ici pour un code détaillé
Scannez le code QR à l'expérience:
Réponse où êtes-vous allé à SetData? Avant, nous devons d'abord réfléchir à la raison pour laquelle Westore résume cette API afin que les utilisateurs ne l'utilisent pas directement. Dans l'applet, modifiez la vue via setData .
this . setData ( {
'array[0].text' : 'changed text'
} )Mais l'expérience de programmation intuitive est:
this . data . array [ 0 ] . text = 'changed text'Si les données ne sont pas réactives, mise à jour manuellement:
this . data . array [ 0 ] . text = 'changed text'
this . update ( )L'expérience de programmation ci-dessus est intuitive et plus adaptée aux développeurs. Par conséquent, Westore cache SetData et n'est pas directement exposé au développeur, mais utilise des diffdata en interne pour créer le chemin de mise à jour le plus court, et seule la méthode de mise à jour est exposée au développeur.
Jetons un coup d'œil aux capacités 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'
} )Le résultat de Diff est:
{ "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 } 
Principe Diff:
export function diffData ( current , previous ) {
const result = { }
if ( ! previous ) return current
syncKeys ( current , previous )
_diff ( current , previous , '' , result )
return result
}Les clés de la ronde précédente de l'État. Data sont principalement synchronisées pour détecter les éléments supprimés dans le tableau ou les clés supprimées dans OBJ.
Tout en améliorant l'expérience de programmation, il évite également le problème de passer une grande quantité de nouvelles données à chaque fois que SetData est la mise à jour le plus court de SetData.
Ainsi, lorsque vous n'utilisez pas Westore, vous pouvez souvent voir un tel code:
Après avoir utilisé Westore:
this . data . a . b [ 1 ] . c = 'f'
this . update ( ) Du point de vue actuel, la plupart des mini-projets de programme accumulent la logique commerciale dans le constructeur de pages du programme MINI, et il n'y a essentiellement aucune lisibilité, ce qui entraîne des coûts énormes à la maintenance ultérieure. L'objectif de l'architecture de Westore découple la logique commerciale / jeu. La page est une page pure. Il est seulement responsable de l'affichage et de la réception des entrées utilisateur, de la cliquetis, du glissement, de la pression longue ou d'autres commandes de gestes et du transfert des instructions au magasin. Le magasin appelle ensuite le modèle de logique de programme réel. Cette frontière hiérarchique est claire, avec une forte maintenance, une extensibilité et une testabilité. La taille d'un seul module de fichier peut également être contrôlée de manière très appropriée.
Mit
