westore
1.0.0
setData وتجربة برمجة أكثر سهولة. ما عليك سوى update ولم يعد بحاجة إلى استخدام setData .
تشبه الهندسة المعمارية في ويستور بنية MVP (Model-View-Presenter):
يمكن فهم طبقة المتجر على أنها وسيط في نمط الوسيط ، مما يقلل من عدد العلاقات العديدة إلى العدد بين العرض والنموذج إلى 0 ، وهو مسؤول عن التحكم في العبور للتفاعل بين عرض كائن العرض ونموذج كائن النموذج.
نظرًا لأن المشاريع التي تنفذها البرامج المصغرة تصبح أكثر وأكثر تعقيدًا ، فإن بنية معقولة يمكن أن تحسن قابلية التوسع وصيانة البرامج المصغرة. كتابة المنطق إلى الصفحة/المكون هي خطيئة. عندما يصبح منطق العمل معقدًا ، ستصبح الصفحة/المكون أكثر فأكثر وصراحة. في كل مرة يتغير فيها المتطلبات ، يحدد وستور بنية برمجة مصغرة معقولة مناسبة للمبرمجين المصغرين لأي تعقيد ، مما يجعل قاعدة المشروع أكثر قوة وسهلة الصيانة والقابلة للتوسيع.
npm i westore --saveالقضايا ذات الصلة NPM المرجع: الوثائق الرسمية للبرنامج المصغر: دعم NPM
| مشروع | يصف |
|---|---|
| ويستور | رمز ويستور الأساسي |
| مثال ويستور | مثال رسمي على ويستور |
| ويستور-مثال | مثال رسمي لـ 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النماذج العالمية خالية من الإطار ، ولا يستحق حتى فصل هذا المنطق لمثل هذا البرنامج البسيط ، ولكن مع توسيع الطلب ، ستجد الفوائد الهائلة للقيام بذلك. لذلك هنا مثال أكثر تعقيدًا.
لقطة شاشة اللعبة:
مخطط التصميم:
يمكن إعادة استخدام الجزء الأزرق الفاتح في الصورة في برنامج Snake Mini-Program و Snake Mini Game و Web Snake ، دون تغيير سطر من التعليمات البرمجية.
لقطة الشاشة:
مخطط التصميم:
يمكن إعادة استخدام الجزء الأزرق الفاتح في الصورة في مشاريع Applet ToDoApp و Web ToDoApp دون تغيير سطر التعليمات البرمجية.
المثال الرسمي يجلب الأفعى و TODOAPP إلى دليل برنامج صغير على النحو التالي:
├─ 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
انقر هنا للحصول على رمز مفصل
مسح رمز الاستجابة السريعة لتجربة:
الإجابة أين ذهبت إلى 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
}يتم مزامنة مفاتيح الجولة السابقة من الحالة. data بشكل أساسي للكشف عن العناصر المحذوفة في صفيف أو مفاتيح محذوفة في OBJ.
أثناء تحسين تجربة البرمجة ، فإنه يتجنب أيضًا مشكلة تمرير كمية كبيرة من البيانات الجديدة في كل مرة يعد SetData هي أقصر تحديث مسار لـ SetData.
لذلك عندما لا تستخدم ويستور ، يمكنك في كثير من الأحيان رؤية مثل هذا الرمز:
بعد استخدام وستور:
this . data . a . b [ 1 ] . c = 'f'
this . update ( ) من المنظور الحالي ، تتراكم معظم مشاريع البرامج المصغرة في منطق الأعمال في مُنشئ صفحة برنامج Mini ، ولا يوجد أي قابلية للقراءة ، مما يجلب تكاليف ضخمة للصيانة لاحقًا. الهدف من هندسة ويستور يتفوق على منطق الأعمال/اللعبة. الصفحة صفحة نقية. إنه مسؤول فقط عن عرض وتلقي إدخال المستخدم ، والنقر ، أو الانزلاق ، والضغط لفترة طويلة أو أوامر لفتة أخرى ، وإعادة توجيه التعليمات إلى المتجر. ثم يستدعي المتجر نموذج منطق البرنامج الحقيقي. هذه الحدود الهرمية واضحة ، مع الصيانة القوية ، والتوسيع والقابلية للاختبار. يمكن أيضًا التحكم في حجم وحدة ملف واحد بشكل مناسب.
معهد ماساتشوستس للتكنولوجيا
