مقدمة
إن استخدام Node لفصل نموذج تطوير الطرف الأمامي والخلفي يجلب بعض مزايا عملية الأداء والتطوير ، ولكنه يواجه أيضًا العديد من التحديات. بموجب الهندسة المعمارية والهندسة الفنية المعقدة في Taobao ، يجب أن تعتمد الواجهة الخلفية على Java لبناء البنية التحتية وتوفير واجهات تجارية ذات صلة لاستخدام الواجهة الأمامية. تتمثل إحدى أهم مهام العقدة في البيئة بأكملها في تكييف واجهات الأعمال هذه لتسهيل تكامل البيانات على الواجهة الأمامية (جانب العقدة وجانب المتصفح) لتقديم الصفحة. كيفية القيام بعمل جيد في عمل الوكالة ، بحيث لا يزال من الممكن أن تتواصل تنمية الطرف الأمامي والخلفي بسلاسة في هذه العملية ، وهي مشكلة نحتاج إلى مراعاتها. ستناقش هذه المقالة هذه القضية وتقترح الحلول.
نظرًا لأن الواجهة الخلفية توفر مجموعة متنوعة من الواجهات ، فقد يكون لدى المطورين أيضًا مجموعة متنوعة من الطرق لكتابة رمز جانب العقدة للوصول إلى هذه الواجهات. إذا لم نقم بإجراء معالجة الهندسة المعمارية الموحدة في طرق الوصول إلى الواجهة واستخدامها ، فسوف يؤدي ذلك إلى المشكلات التالية:
1. يستخدم كل مطور نمط الكود الخاص به لكتابة رمز الوصول إلى الواجهة ، مما يسبب الارتباك في دليل المشروع وأسلوب الترميز ، مما يجعل من الصعب نسبيًا الحفاظ عليها.
2. كل مطور يكتب طريقة بياناته الوهمية. بعد الانتهاء من التطوير ، يحتاج إلى تعديل الكود يدويًا لإزالة الوهمية.
3. من أجل إدراك تبديل البيئات المختلفة للواجهة (يوميًا ، مسبقًا ، عبر الإنترنت) ، قد يحتفظ كل مطور ببعض ملفات التكوين.
4. لا يمكن إعادة استخدام طريقة استدعاء واجهة البيانات بسهولة من قبل نماذج الأعمال المختلفة.
5. يتم انتخاب اتفاقية الوصف لواجهة البيانات في كل ركن من أركان الكود ، والتي قد لا تتفق مع مستندات الواجهة التي يتفق عليها موظفو الواجهة الخلفية.
6. بعد توزيع المشروع بأكمله ، لا تزال تكلفة توصيل الواجهات أو الانحدار الاختبار مرتفعة للغاية ، ويجب أن تتضمن كل مزود واجهة ومستخدم.
لذلك نأمل أن يكون لدينا مثل هذا الإطار الذي يستخدم الآلية التي يوفرها هذا الإطار لوصف جميع الواجهات الخارجية التي تعتمد على المشاريع الهندسية ، وإدارتها بطريقة موحدة ، وتوفير نمذجة واجهة مرنة وطرق الاتصال ، بالإضافة إلى مريحة للبيئة عبر الإنترنت وطرق البيئة الإنتاجية للجمع بين الأمامي وتطوير الخلفية. ModelProxy هو إطار خفيف الوزن يلبي هذه المتطلبات. إنه أحد المكونات الأساسية لإطار Midway ويمكن أيضًا استخدامه بمفرده. يمكن أن يؤدي استخدام ModelProxy إلى إحضار المزايا التالية:
1. المطورين المختلفين لديهم طرق كتابة رمز الوصول إلى الواجهة ، والمعنى الواضح ، وتقليل صعوبة الصيانة.
2. يتبنى الإطار وضع المصنع + Singleton لتحقيق متعددة الإرسال لتكوين الواجهة في وقت واحد. ويمكن للمطورين تخصيص وتجميع نماذج أعمالهم الخاصة (حقن التبعية).
3. يمكن أن تبديل البيئات عبر الإنترنت واليومية والاستمتاع بسهولة.
4. محركات وهمية مدمجة مثل النهر الخشن و MockJS ، مما يوفر بيانات وهمية مريحة للغاية.
5. استخدم ملفات تكوين الواجهة لإدارة أوصاف التبعية للواجهة بشكل موحد لتجنب التناثر في رموز مختلفة.
6. يدعم مشاركة النموذج على جانب المتصفح ، والتي يمكن استخدامها لتقديم البيانات الأمامية. عملية الوكيل بأكملها شفافة للمتصفح.
7. ملف تكوين الواجهة نفسه هو مستند وصف منظم ، ويمكن إنشاء المستند تلقائيًا باستخدام مجموعة أدوات River. يمكن استخدامه أيضًا في اختبار واجهة الأتمتة ذات الصلة لتشكيل حلقة مغلقة في عملية التطوير بأكملها.
نموذج مبدأ العمل النموذجية ومخطط عملية التنمية ذات الصلة
في الشكل أعلاه ، يحتاج المطور أولاً إلى وصف جميع تبعيات واجهة الواجهة الخلفية في المشروع واكتبه إلى ملف تكوين interface.json وفقًا لتنسيق JSON المحدد. إذا لزم الأمر ، يجب كتابة ملف القاعدة لكل واجهة ، أي جزء قواعد الواجهة من الشكل. يتم استخدام ملف القاعدة هذا لسخر البيانات أثناء مرحلة التطوير أو لاستخدام أداة النهر للتحقق من الواجهة أثناء مرحلة تصحيح الأخطاء المشتركة. يعتمد محتوى ملف القاعدة على استخدام المحرك الوهمي (مثل MockJs ، و River Mock ، وما إلى ذلك). بعد اكتمال التكوين ، يمكنك إنشاء نموذج أعمالك الخاص في الكود وفقًا لاحتياجاتك.
هنا مثال بسيط:
【مثال 1】
الخطوة الأولى هي إنشاء واجهة تكوين الواجهة. json في دليل المشروع ، وإضافة تعريف واجهة البحث الرئيسية JSON.
نسخة الكود كما يلي:
{
"العنوان": "تعريف مجموعة واجهة بيانات Pad Taobao" ،
"الإصدار": "1.0.0" ،
"المحرك": "Mockjs" ،
"قاعدة القواعد": "./interfacerules/" ،
"الحالة": "عبر الإنترنت" ،
"واجهات": [{
"الاسم": "واجهة البحث الرئيسية" ،
"ID": "Search.getItems" ،
"urls": {
"عبر الإنترنت": "http://smtaobao.com/client/search.do"
}
}]
}
الخطوة 2 إنشاء واستخدام النموذج في الكود
نسخة الكود كما يلي:
// إدخال الوحدة النمطية
var modelproxy = require ('modelProxy') ؛
// تهيئة Global تقدم ملفات تكوين الواجهة (ملاحظة: تعمل التهيئة مرة واحدة فقط)
ModelProxy.init ('./interface.json') ؛
// لمزيد من وضع الإنشاء ، يرجى الرجوع إلى المقالة التالية
var searchModel = new ModelProxy ({
SearchItems: 'Search.getItems' // اسم الطريقة المخصصة: معرف الواجهة المحدد في ملف التكوين
}) ؛
// استخدم النموذج ، ملاحظة: المعلمات المطلوبة لاستدعاء الطريقة هي المعلمات المطلوبة للواجهة الفعلية.
SearchModel.SearchItems ({Q: 'iPhone6'})
//! لاحظ أنه يجب عليك الاتصال بالطريقة التي تم القيام بها لتحديد وظيفة رد الاتصال للحصول على البيانات التي تم الحصول عليها عن طريق استدعاء SearchItems بشكل غير متزامن أعلاه!
.done (وظيفة (البيانات) {
console.log (البيانات) ؛
})
.error (وظيفة (خطأ) {
console.log (err) ؛
}) ؛
إن ثراء الميزات لـ ModelProxy هو أنه يدعم أشكالًا مختلفة من الملفات الشخصية لإنشاء نماذج أعمال تتطلب الأعمال:
إنشاء كائن باستخدام معرف واجهة> سيأخذ الكلمة بعد الأخير ". عدد المعرف كاسم الطريقة
نسخة الكود كما يلي:
ModelProxy.create ('search.getItem') ؛
استخدم كائن JSON القيمة المفتاح> اسم الطريقة المخصصة: معرف الواجهة
نسخة الكود كما يلي:
modelproxy.create ({
getName: 'Session.getuserName' ،
GetMyCarts: 'cart.getcarts'
}) ؛
استخدم نموذج الصفيف> خذ الكلمة بعد الأخير. الرقم كاسم الطريقة
أسماء استدعاء الطريقة التي تم إنشاؤها في المثال التالي هي: cart_getitem ، getItem ، اقتراح ، getName
نسخة الكود كما يلي:
ModelProxy.create (['cart.getItem' ، 'Search.getItem' ، 'Search.suggest' ، 'session.user.getName']) ؛
نموذج البادئة> جميع معرفات الواجهة التي تفي بالبادئة سيتم إدخالها في الكائن ويتم أخذ الجزء الأخير كاسم الطريقة
نسخة الكود كما يلي:
ModelProxy.create ('Search.*') ؛
في الوقت نفسه ، باستخدام هذه النماذج ، يمكنك بسهولة تنفيذ طلبات الدمج أو طلبات التبعية وتقديم القوالب ذات الصلة
[مثال 2] طلب دمج
نسخة الكود كما يلي:
var model = new ModelProxy ('Search.*') ؛
// طلب دمج (يتم تحديد طريقة النموذج المسمى أدناه عند تكوين معرف الواجهة باستثناء الانتهاء)
نموذج.
.list ({الكلمة الرئيسية: 'iPhone6'})
.getnav ({key: 'clothing popular'})
.done (دالة (Data1 ، Data2 ، Data3) {
// ترتيب المعلمات متوافق مع ترتيب مكالمات الطريقة
Console.log (Data1 ، Data2 ، Data3) ؛
}) ؛
[مثال 3] طلب التبعية
نسخة الكود كما يلي:
var model = new ModelProxy ({
Getuser: 'Session.getuser' ،
GetMyorderlist: 'order.getorder'
}) ؛
// احصل على معرف المستخدم أولاً ، ثم احصل على قائمة الطلبات بناءً على رقم المعرف
model.getuser ({sid: 'fdkaldjfgsakls0322yf8'})
.done (وظيفة (البيانات) {
var uid = data.uid ؛
// طلب البيانات الثانوية يعتمد على رقم المعرف الذي تم الحصول عليه
this.getmyorderlist ({id: uid})
.done (وظيفة (البيانات) {
console.log (البيانات) ؛
}) ؛
}) ؛
بالإضافة إلى ذلك ، يمكن استخدام ModelProxy ليس فقط على جانب العقدة ، ولكن أيضًا على جانب المتصفح. ما عليك سوى تقديم ModelProxy-client.js المقدمة من الحزمة الرسمية في الصفحة.
[مثال 4] باستخدام ModelProxy على جانب المتصفح
نسخة الكود كما يلي:
<!-قدمت وحدة ModelProxy ، والتي هي في حد ذاتها وحدة قياسية مغلفة بواسطة Kissy->
<script src = "modelproxy-client.js"> </script>
<script type = "text/javaScript">
kissy.use ("ModelProxy" ، وظيفة (S ، ModelProxy) {
//! تكوين المسار الأساسي ، والذي يتماشى مع مسار التقاطع الذي تم تكوينه في الخطوة الثانية!
// وهناك تكوين عالمي ومرة واحدة فقط!
ModelProxy.ConfigBase ('/model/') ؛
// إنشاء نموذج
var searchModel = modelProxy.create ('Search.*') ؛
SearchModel
.list ({q: 'ihpone6'})
.list ({Q: 'Shangchao'})
.suggest ({Q: 'i'})
.getnav ({q: 'skatboard'})
.done (وظيفة (Data1 ، Data2 ، Data3 ، Data4) {
console.log ({
"list_ihpone6": Data1 ،
"list_shocksuit": Data2 ،
"اقتراح_": Data3 ،
"getnav_skateboard": data4
}) ؛
}) ؛
}) ؛
</script>
في الوقت نفسه ، يمكن استخدام ModelProxy مع Midway-Mustpl ، وهو مكون أساسي آخر في Midway ، لتحقيق المشاركة الكاملة للبيانات والقوالب وعمليات التقديم ذات الصلة على جانب المتصفح والخادم. للحصول على دروس ووثائق مفصلة على ModelProxy ، يرجى الانتقال إلى https://github.com/purejs/modelproxy
لخص
يوجد ModelProxy كإطار عمل خفيف الوزن ، ويوفر طرق تجميع وطرازات الاستخدام الودية الودية ، وفي نفس الوقت يحل مشكلة مواصفات استخدام الواجهة في فصل أوضاع تطوير الواجهة الأمامية والخلفية. خلال عملية تطوير المشروع بأكملها ، يجب دائمًا تحديد الواجهة ووصفها مرة واحدة ، ويمكن للمطورين الأماميين الرجوع إليها. في الوقت نفسه ، يتم استخدام أداة النهر لإنشاء المستندات تلقائيًا ، وتشكيل عقد مع المطورين الخلفيين ، وإجراء الاختبارات الآلية ذات الصلة ، مما يؤدي إلى تحسين عملية تطوير هندسة البرمجيات بأكملها.
【ملاحظة】 نهر هو مصطلح عام لمواصفات الواجهة الموحدة في الواجهة الأمامية والأدوات ذات الصلة التي طورتها مجموعة Alibaba وتم تطويرها بواسطة مجموعة Alibaba.