westore
1.0.0
setData และประสบการณ์การเขียนโปรแกรมที่ใช้งานง่ายมากขึ้น เพียงแค่ update และไม่จำเป็นต้องใช้ setData อีกต่อไป
สถาปัตยกรรม Westore นั้นคล้ายกับสถาปัตยกรรม MVP (Model-View-Presenter):
เลเยอร์ร้านค้าสามารถเข้าใจได้ว่าเป็นตัวกลางใน รูปแบบสื่อกลาง ลดจำนวนความสัมพันธ์แบบหลายต่อหลายครั้งระหว่างมุมมองและแบบจำลองเป็น 0 และรับผิดชอบในการควบคุมการขนส่งของการโต้ตอบระหว่างมุมมองวัตถุมุมมองและโมเดลโมเดลวัตถุ
เนื่องจากโครงการที่ดำเนินการโดยโปรแกรม MINI มีความซับซ้อนมากขึ้นเรื่อย ๆ สถาปัตยกรรมที่สมเหตุสมผลสามารถปรับปรุงความสามารถในการปรับขนาดและการบำรุงรักษาโปรแกรมขนาดเล็ก การเขียนตรรกะไปยังหน้า/ส่วนประกอบเป็นบาป เมื่อตรรกะทางธุรกิจมีความซับซ้อนหน้า/ส่วนประกอบจะกลายเป็นป่องและยากต่อการบำรุงรักษามากขึ้นเรื่อย ๆ ทุกครั้งที่ข้อกำหนดเปลี่ยนแปลงไป Westore จะกำหนดสถาปัตยกรรมขนาดเล็กที่เหมาะสมที่เหมาะสมสำหรับโปรแกรมขนาดเล็กของความซับซ้อนใด ๆ ทำให้ฐานโครงการมีความแข็งแกร่งมากขึ้นง่ายต่อการบำรุงรักษาและขยายได้
npm i westore --saveการอ้างอิงปัญหาที่เกี่ยวข้องกับ NPM: เอกสารอย่างเป็นทางการของโปรแกรม MINI: การสนับสนุน NPM
| โครงการ | อธิบาย |
|---|---|
| ตะวันตก | รหัสหลักของ Westore |
| ตัวอย่างตะวันตก | ตัวอย่างอย่างเป็นทางการของ Westore |
| Westore-Example-Ts | ตัวอย่างอย่างเป็นทางการของ Westore (TS+SCSS) |
แผนภาพคลาสของมันมีดังนี้:
// 平台无关的 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 HomeStoreโมเดลสากลนั้นปราศจากเฟรมเวิร์กและมันก็ไม่คุ้มค่าที่จะแยกตรรกะนี้สำหรับโปรแกรมง่าย ๆ แต่เมื่อความต้องการขยายตัวคุณจะพบประโยชน์อย่างมากในการทำเช่นนั้น ดังนั้นนี่คือตัวอย่างที่ซับซ้อนกว่าเล็กน้อย
ภาพหน้าจอเกม:
แผนภาพการออกแบบ:
ส่วนสีฟ้าอ่อนในภาพสามารถนำกลับมาใช้ใหม่ในงูมินิโปรแกรมงูมินิเกมและโครงการงูเว็บโดยไม่ต้องเปลี่ยนรหัส
ภาพหน้าจอแอปพลิเคชัน:
แผนภาพการออกแบบ:
ส่วนสีฟ้าอ่อนในภาพสามารถนำกลับมาใช้ใหม่ในโครงการ Applet ToDoapp และ Web ToDoapp ได้โดยไม่ต้องเปลี่ยนบรรทัดของรหัส
ตัวอย่างอย่างเป็นทางการนำ Snake และ ToDoApp เข้าสู่ไดเรกทอรีโปรแกรม MINI ดังนี้:
├─ 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
คลิกที่นี่เพื่อดูรหัสโดยละเอียด
สแกนรหัส QR เพื่อสัมผัส:
ตอบ คุณไปที่ setdata ที่ไหน ก่อนหน้านี้เราต้องคิดก่อนว่าทำไม Westore จึงสรุป API นี้เพื่อให้ผู้ใช้ไม่ได้ใช้โดยตรง ในแอปเพล็ตให้เปลี่ยนมุมมองผ่าน setData
this . setData ( {
'array[0].text' : 'changed text'
} )แต่ประสบการณ์การเขียนโปรแกรมที่ใช้งานง่ายคือ:
this . data . array [ 0 ] . text = 'changed text'หากข้อมูลไม่ตอบสนองให้อัปเดตด้วยตนเอง:
this . data . array [ 0 ] . text = 'changed text'
this . update ( )ประสบการณ์การเขียนโปรแกรมข้างต้นนั้นใช้งานง่ายและเป็นมิตรกับนักพัฒนามากขึ้น ดังนั้น Westore ซ่อน setData และไม่ได้สัมผัสโดยตรงกับนักพัฒนา แต่ใช้ diffdata ภายในเพื่อสร้างเส้นทางการอัปเดตที่สั้นที่สุดและมีเพียงวิธีการอัปเดตเท่านั้นที่สัมผัสกับนักพัฒนา
มาดูความสามารถของ 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'
} )ผลลัพธ์ของความแตกต่างคือ:
{ "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 } 
หลักการต่าง ๆ :
export function diffData ( current , previous ) {
const result = { }
if ( ! previous ) return current
syncKeys ( current , previous )
_diff ( current , previous , '' , result )
return result
}กุญแจของรอบก่อนหน้าของ state.data ส่วนใหญ่จะซิงโครไนซ์เพื่อตรวจจับองค์ประกอบที่ถูกลบในอาร์เรย์หรือคีย์ที่ถูกลบใน OBJ
ในขณะที่การปรับปรุงประสบการณ์การเขียนโปรแกรมมันยังหลีกเลี่ยงปัญหาของการผ่านข้อมูลใหม่จำนวนมากทุกครั้งที่ setData เป็นการอัปเดตเส้นทางที่สั้นที่สุดของ setData
ดังนั้นเมื่อคุณไม่ได้ใช้ Westore คุณมักจะเห็นรหัสดังกล่าว:
หลังจากใช้ Westore:
this . data . a . b [ 1 ] . c = 'f'
this . update ( ) จากมุมมองปัจจุบันโครงการโครงการขนาดเล็กส่วนใหญ่สะสมตรรกะทางธุรกิจในตัวสร้างหน้าของโปรแกรม MINI และโดยทั่วไปไม่มีความสามารถในการอ่านซึ่งนำค่าใช้จ่ายจำนวนมากมาสู่การบำรุงรักษาในภายหลัง เป้าหมายของสถาปัตยกรรม Westore จะแยกแยะตรรกะธุรกิจ/เกม หน้าเป็นหน้าบริสุทธิ์ มันเป็นเพียงการรับผิดชอบในการแสดงและรับอินพุตผู้ใช้คลิกเลื่อนการกดระยะยาวหรือคำสั่งท่าทางอื่น ๆ และการส่งต่อคำแนะนำไปยังร้านค้า ร้านค้าเรียกรูปแบบลอจิกของโปรแกรมจริง ขอบเขตลำดับชั้นนี้ชัดเจนด้วยการบำรุงรักษาที่แข็งแกร่งการขยายและการทดสอบ ขนาดของโมดูลไฟล์เดียวสามารถควบคุมได้อย่างเหมาะสมมาก
มิกซ์
