westore
1.0.0
setData jalur terpendek dan pengalaman pemrograman yang lebih intuitif. update dan tidak perlu lagi menggunakan setData .
Arsitektur Westore sangat mirip dengan arsitektur MVP (Model-View-Presenter):
Lapisan toko dapat dipahami sebagai perantara dalam pola mediator , mengurangi jumlah hubungan banyak-ke-banyak antara tampilan dan model menjadi 0, dan bertanggung jawab untuk kontrol transit interaksi antara tampilan objek tampilan dan model objek model.
Ketika proyek -proyek yang dilakukan oleh program mini menjadi semakin kompleks, arsitektur yang masuk akal dapat meningkatkan skalabilitas dan pemeliharaan program mini. Menulis logika ke halaman/komponen adalah dosa. Ketika logika bisnis menjadi rumit, halaman/komponen akan menjadi semakin kembung dan sulit dipertahankan. Setiap kali persyaratan berubah, Westore mendefinisikan arsitektur program mini yang masuk akal yang cocok untuk program mini dari kompleksitas apa pun, membuat basis proyek lebih kuat, mudah dipelihara dan dapat diperluas.
npm i westore --saveReferensi Masalah Terkait NPM: Dokumentasi Resmi Program Mini: Dukungan NPM
| proyek | menggambarkan |
|---|---|
| Westore | Kode inti Westore |
| Westore-Example | Contoh Resmi Westore |
| Westore-Example-Ts | Contoh Resmi Westore (TS+SCSS) |
Diagram kelasnya adalah sebagai berikut:
// 平台无关的 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 HomeStoreModel universal bebas dari kerangka kerja, dan bahkan tidak layak memisahkan logika ini untuk program yang sederhana seperti itu, tetapi seiring dengan berkembangnya permintaan Anda akan menemukan manfaat besar dari melakukannya. Jadi, inilah contoh yang sedikit lebih rumit.
Game Screenshot:
Diagram Desain:
Bagian biru muda dalam gambar dapat digunakan kembali dalam mini-program ular, mini-game ular dan proyek ular web, tanpa mengubah baris kode.
Tangkapan layar aplikasi:
Diagram Desain:
Bagian biru muda dalam gambar dapat digunakan kembali dalam proyek Applet Todoapp dan Web TodoApp tanpa mengubah baris kode.
Contoh resmi membawa Snake dan Todoapp ke direktori program mini sebagai berikut:
├─ 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
Klik di sini untuk kode terperinci
Pindai kode QR untuk mengalami:
Jawab Di mana Anda pergi ke setData? Sebelumnya, pertama -tama kita harus memikirkan mengapa Westore merangkum API ini sehingga pengguna tidak menggunakannya secara langsung. Di applet, ubah tampilan melalui setData .
this . setData ( {
'array[0].text' : 'changed text'
} )Tetapi pengalaman pemrograman yang intuitif adalah:
this . data . array [ 0 ] . text = 'changed text'Jika data tidak responsif, perbarui secara manual:
this . data . array [ 0 ] . text = 'changed text'
this . update ( )Pengalaman pemrograman di atas intuitif dan lebih ramah pengembang. Oleh karena itu, Westore menyembunyikan setData dan tidak secara langsung terpapar ke pengembang, tetapi menggunakan diffData secara internal untuk membuat jalur pembaruan terpendek, dan hanya metode pembaruan yang terpapar pada pengembang.
Mari kita lihat kemampuan 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'
} )Hasil diff adalah:
{ "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 } 
Prinsip Diff:
export function diffData ( current , previous ) {
const result = { }
if ( ! previous ) return current
syncKeys ( current , previous )
_diff ( current , previous , '' , result )
return result
}Kunci dari putaran negara sebelumnya. Data terutama disinkronkan untuk mendeteksi elemen yang dihapus dalam array atau kunci yang dihapus dalam OBJ.
Saat meningkatkan pengalaman pemrograman, itu juga menghindari masalah melewati sejumlah besar data baru setiap kali setData adalah pembaruan jalur terpendek dari setData.
Jadi ketika Anda tidak menggunakan Westore, Anda sering dapat melihat kode seperti itu:
Setelah menggunakan Westore:
this . data . a . b [ 1 ] . c = 'f'
this . update ( ) Dari perspektif saat ini, sebagian besar proyek program mini mengakumulasi logika bisnis di konstruktor halaman program mini, dan pada dasarnya tidak ada keterbacaan, yang membawa biaya besar untuk pemeliharaan selanjutnya. Tujuan dari arsitektur Westore memisahkan logika bisnis/permainan. Halaman adalah halaman murni. Ini hanya bertanggung jawab untuk menampilkan dan menerima input pengguna, mengklik, meluncur, lama menekan atau perintah gerakan lainnya, dan meneruskan instruksi ke toko. Toko kemudian memanggil model logika program nyata. Batas hierarkis ini jelas, dengan pemeliharaan yang kuat, ekstensibilitas, dan pengujian. Ukuran modul file tunggal juga dapat dikontrol dengan sangat tepat.
Mit
