westore
1.0.0
setData und ein intuitiveres Programmerlebnis. Einfach update und müssen setData nicht mehr verwenden.
Die Westore-Architektur ist der MVP-Architektur (Modell-View-Presenter) sehr ähnlich:
Die Store-Schicht kann als Vermittler im Mediatormuster verstanden werden, wodurch die Anzahl der vielen zu viele Beziehungen zwischen Ansicht und Modell auf 0 reduziert wird, und ist für die Transitkontrolle der Wechselwirkung zwischen der View-Objektansicht und dem Modellobjektmodell verantwortlich.
Wenn die von Mini -Programmen durchgeführten Projekte immer komplexer werden, kann eine angemessene Architektur die Skalierbarkeit und Wartung von Mini -Programmen verbessern. Das Schreiben von Logik auf Seite/Komponente ist eine Sünde. Wenn die Geschäftslogik komplex wird, wird Seite/Komponente immer aufgeblähter und schwer zu warten. Jedes Mal, wenn sich die Anforderungen ändern, definiert Westore eine angemessene Mini-Programm-Architektur, die für Miniprogramme jeglicher Komplexität geeignet ist und die Projektbasis robuster, leicht zu warten und erweiterbar macht.
npm i westore --saveNPM Related Issues Referenz: Mini -Programm Offizielle Dokumentation: NPM Support
| Projekt | beschreiben |
|---|---|
| Westore | Westores Kerncode |
| Westore-Beispiel | Westore Offizielles Beispiel |
| Westore-Exampe-Ts | Westore Offizielles Beispiel (TS+SCSS) |
Sein Klassendiagramm lautet wie folgt:
// 平台无关的 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 HomeStoreUniverselle Modelle sind rahmenfrei und es lohnt sich nicht einmal wert, diese Logik für ein so einfaches Programm zu trennen, aber wenn die Nachfrage erweitert wird, werden Sie die enormen Vorteile dafür finden. Hier ist also etwas komplizierteres Beispiel.
Game Screenshot:
Entwurfsdiagramm:
Das hellblaue Teil des Bildes kann in Mini-Programm-Schlangen-, Mini-Spiel-Schlangen- und Web-Schlangenprojekten wiederverwendet werden, ohne eine Codezeile zu ändern.
Anwendungsscreenshot:
Entwurfsdiagramm:
Der hellblaue Teil des Bildes kann in den Projekten von Applet Todoapp und Web -Todoapp wiederverwendet werden, ohne eine Codezeile zu ändern.
Das offizielle Beispiel bringt Snake und Todoapp in ein Mini -Programmverzeichnis wie folgt:
├─ 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
Klicken Sie hier für einen detaillierten Code
Scannen Sie den QR -Code auf Erlebung:
Antwort , wo bist du zu setdata gegangen? Vorher müssen wir zunächst darüber nachdenken, warum Westore diese API zusammenfasst, damit Benutzer sie nicht direkt verwenden. Ändern Sie im Applet die Ansicht durch setData .
this . setData ( {
'array[0].text' : 'changed text'
} )Aber die intuitive Programmierungserfahrung ist:
this . data . array [ 0 ] . text = 'changed text'Wenn Daten nicht reagieren, aktualisieren Sie manuell:
this . data . array [ 0 ] . text = 'changed text'
this . update ( )Die oben genannte Programmierungserfahrung ist intuitiv und entwicklerfreundlicher. Daher verbirgt Westore SetData und ist dem Entwickler nicht direkt ausgesetzt, sondern verwendet Diffdata intern, um den kürzesten Update -Pfad zu erstellen, und nur die Aktualisierungsmethode ist dem Entwickler ausgesetzt.
Schauen wir uns die Fähigkeiten von Westore Diffdata an:
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'
} )Das Ergebnis von Diff ist:
{ "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 -Prinzip:
export function diffData ( current , previous ) {
const result = { }
if ( ! previous ) return current
syncKeys ( current , previous )
_diff ( current , previous , '' , result )
return result
}Die Schlüssel der vorherigen Staatsrunde.Daten werden hauptsächlich synchronisiert, um Elemente zu erkennen, die in Array oder in OBJ gelöschten Schlüssel gelöscht wurden.
Während sich die Programmierungserfahrung verbessert, vermeidet es auch das Problem, dass jedes Mal, wenn SetData die kürzeste Pfad -Update von SetData ist, eine große Anzahl neuer Daten übergeben.
Wenn Sie also nicht Westore verwenden, können Sie oft einen solchen Code sehen:
Nach der Verwendung von Westore:
this . data . a . b [ 1 ] . c = 'f'
this . update ( ) Aus der aktuellen Perspektive sammeln die meisten Mini -Programmprojekte die Geschäftslogik im Seitenkonstruktor des Mini -Programms an, und im Grunde gibt es keine Lesbarkeit, was den späteren Wartung enorme Kosten bringt. Das Ziel der Westore -Architektur entkoppelt die Geschäfts-/Spiellogik. Seite ist eine reine Seite. Es ist nur verantwortlich für das Anzeigen und Empfangen von Benutzereingaben, Klicken, Schiebern, Long -Pressen oder anderen Gestenbefehlen und die Weiterleitung der Anweisungen an den Speicher. Der Laden ruft dann das echte Programmlogikmodell auf. Diese hierarchische Grenze ist klar, mit starker Aufrechterhaltung, Erweiterbarkeit und Testbarkeit. Die Größe eines einzelnen Dateimoduls kann auch sehr angemessen gesteuert werden.
MIT
