ارتفاع شعبية Vue له أسباب عديدة. يتضمن ذلك بساطة إطار العمل ، وسهولة تكامله في المشاريع الحالية ، وسهولة العمل معه ، وعدم فرض قيود شديدة جدًا على تطبيقات Vue. يساعد كل هذا أيضًا Vue في التنافس مع Angular و React. في الواقع ، يبدو أن Vue ، من نواح كثيرة ، على قدم المساواة مع الأطر والمكتبات الشعبية الأخرى.
قررت أن أعرف ما يكتبونه عن أوجه القصور في Vue. أثناء البحث عن المواد ذات الصلة ، لاحظت أنه في كل مكان يقولون إن Vue ليست جيدة بما يكفي لتطوير مشاريع واسعة النطاق. مع معرفة Vue ، يمكنني القول بثقة أن هذا ليس صحيحًا. في هذا المنشور ، أود أن ألفت انتباهك إلى 4 إرشادات مفصلة لتطوير مشاريع Vue واسعة النطاق.
1. استخدم فتحات Vue لجعل التعليمات البرمجية أكثر وضوحًا
عند إعداد علاقات المكون ، غالبًا ما يتم استخدام نموذج الوالدين والطفل. لكن في بعض الحالات ، قد يكون هذا النموذج بعيدًا عن أن يكون الأكثر نجاحًا. تخيل أن لديك مكونًا رئيسيًا واحدًا يستضيف عددًا كبيرًا من المكونات الفرعية. هذا يعني أنه يجب عليك استخدام عدد كبير من معلمات الإدخال (الدعائم) وإنشاء الكثير من الأحداث لتأسيس تفاعل المكونات. في مثل هذه الظروف ، سيصبح الرمز فوضويًا بسرعة كبيرة. هذه هي المواقف التي يواجهها مطورو المشاريع الكبيرة. لكن لدى Vue آليات مصممة خصيصًا للتعامل مع هذه الأنواع من المشاكل.
نحن نتحدث عن ماكينات القمار. يتم استخدامها لتوفير طريقة بديلة لتمثيل العلاقات بين الوالدين والطفل.
<slot>تمنح الفتحات ، أي العناصر ، المطور القدرة على إعادة تنظيم الكود. فيما يلي مثال بسيط على استخدام الفتحة:
<div class="demo-content">
<slot></slot>
</div>
عندما يتم تقديم مثل هذا المكون ،
<slot></slot>سيتم استبدال علامته بمحتوى العلامة <demo-content>:
<demo-content>
<h2><font color="#3AC1EF">Hi!</font></h2>
<class-name name="Welcome to Vue!"></class-name>
</demo-content>
هناك العديد من أنواع الفتحات التي يمكن استخدامها في مشاريع Vue. أهم شيء يجب أن تعرفه عن ماكينات القمار هو أن استخدامها يمكن أن يكون له تأثير كبير على مشروع متنامٍ. إنها تحافظ على كود مشروعك في حالة جيدة وتساعدك على إنشاء كود نظيف.
2. إنشاء مكونات مستقلة وإعادة استخدامها
عند تصميم المكونات ، اتبع مبدأ FIRST بجعل المكونات مركزة ومستقلة وقابلة لإعادة الاستخدام وصغيرة وقابلة للاختبار.
في الواقع ، يكمن سر تصميم الأنظمة "الكبيرة" بفعالية في عدم محاولة بناء تلك الأنظمة في المقام الأول. وبدلاً من ذلك ، يجب تجميع هذه الأنظمة من قطع أصغر تحل مشكلات عالية التخصص. هذا يجعل من السهل تقييم كيف تتناسب الأجزاء الأصغر من الأنظمة مع أهدافها "الأكبر".
Eddie Osmani
يمكنك استخدام أنظمة متخصصة مثل Bit لإنشاء المكونات وإدارتها . إليك الأشياء المتعلقة بها.
3. حافظ على متجر Vuex منظمًا جيدًا
Vuex هو نمط إدارة ومكتبة لحالة تطبيق Vue. باستخدام Vuex ، يمكنك تنظيم مخزن بيانات مركزي لجميع مكونات التطبيق. لقد رأيت تعليقات حول Vuex تقول إن Vuex يحد من قدرة المطورين على هيكلة مشروع ويمنعهم من القيام بما يحتاجون إلى القيام به. أنا لا أتفق مع هذه التصريحات. تساعد Vuex المطورين الذين يتبعون مجموعة من المبادئ على هيكلة مشاريعهم ، مما يجعلها منظمة بشكل أفضل.
قبل أن أتحدث عن هذه المبادئ ، أود أن أتحدث عن 4 مكونات رئيسية لمستودعات Vuex والتي يحتاج أي شخص يريد استخدام هذه المستودعات إلى معرفتها بشكل فعال. إذا كنت معتادًا على هذه المكونات ، فهذا يعني أنه يمكنك بسهولة هيكلة متجر Vuex وتحسين تنظيم المشروع. هنا وصف موجز:
- الدول: تستخدم لتخزين بيانات التطبيق.
- Getters: تستخدم لتنظيم الوصول إلى كائنات الحالة خارج التخزين.
- الطفرات: اللازمة لتعديل كائنات الحالة.
- الإجراءات: تستخدم لتطبيق الطفرات.
بافتراض أنك على دراية بهذه المكونات ، فلنتحدث عن المبادئ المذكورة أعلاه:
- تحتاج حالة طبقة التطبيق إلى إدارتها مركزيًا عن طريق تخزينها في مستودع.
- يجب دائمًا إجراء تغييرات الحالة باستخدام الطفرات.
- يجب تغليف المنطق غير المتزامن ؛ يجب أن يعمل فقط على الحالة من خلال الإجراءات.
إذا كان بإمكانك الالتزام بهذه المبادئ الثلاثة ، فهذا يعني أنك ستتمكن من هيكلة المشروع بشكل جيد. إذا قررت ، أثناء نمو المشروع ، أنه يجب وضع رمز مكونات Vuex المقابلة في ملفات مختلفة ، فيمكنك القيام بذلك بسهولة. فيما يلي مثال على هيكل مشروع باستخدام Vuex:
├── index.html
├── main.js
├── api
├── components
└── store
├── index.js
├── actions.js
├── mutations.js
└── modules
▍Vuex تنظيم وحدات التخزين
في هذا المقال نتحدث عن مشاريع واسعة النطاق. من المتوقع أن تستخدم هذه المشاريع ملفات كبيرة جدًا ومعقدة. يحتاج المبرمجون الذين ينشئون مثل هذه المشاريع إلى آليات إدارة التخزين التي تعكس احتياجاتهم. في الوقت نفسه ، لا ينبغي أن يكون هيكل التخزين معقدًا بشكل غير ضروري. لذلك ، يوصى بتنظيم متاجر Vuex الخاصة بك بطريقة معيارية ، وتخصيصها وفقًا لرؤيتك لأفضل هيكل لمثل هذه المتاجر. لا توجد طريقة محددة لتقسيم التخزين إلى وحدات. يتخذ بعض المطورين نهجًا قائمًا على قدرات التصميم والبعض الآخر يتبع نهج نموذج البيانات. يتخذ المبرمج المسؤول عن المشروع القرار النهائي بشأن تقسيم التخزين إلى وحدات.التخزين المنظم بشكل معقول له تأثير إيجابي على قابلية استخدام المشروع على المدى الطويل.
فيما يلي مثال على نهج معياري لهيكلة التخزين:
store/
├── index.js
└── modules/
├── module1.store.js
├── module2.store.js
├── module3.store.js
├── module4.store.js
└── module5.store.js
▍ استخدام الطرق المساعدة
لقد تحدثت أعلاه عن 4 مكونات مستخدمة في مستودعات Vuex. ضع في اعتبارك موقفًا عندما تحتاج إلى الوصول إلى الحالات والعمل مع الحاصل ، عندما تحتاج إلى استدعاء الإجراءات والطفرات في المكونات. في مثل هذه الحالات ، لا تحتاج إلى إنشاء العديد من الطرق أو الخصائص المحسوبة. يمكنك ببساطة استخدام طريقة مساعدة (
mapStateو mapGetters، mapMutationsو mapActions) ، حيث يؤدي استخدامها إلى تجنب زيادة حجم الشفرة بشكل غير ملائم. لنتحدث عن استخدام هذه الطرق المساعدة.
خريطة الدولة
إذا احتاج أحد المكونات إلى الوصول إلى خصائص تخزين متعددة أو أدوات متعددة ، فهذا يعني أنه يمكننا استخدام طريقة مساعدة
mapStateلإنشاء وظيفة getter. هذا يحفظنا من الاضطرار إلى كتابة كميات كبيرة نسبيًا من التعليمات البرمجية.
import { mapState } from 'vuex'
export default {
computed: mapState({
count: state => state.count,
countAlias: 'count',
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
الخريطة
يتم
mapGettersاستخدام الأسلوب المساعد لتكوين تعيين حاصل التخزين على الخصائص المحسوبة المحلية.
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'count1',
'getter1',
])
}
}
▍ الخرائط
يتم
mapMutationsاستخدام الطريقة المساعدة في المكونات لتطبيق الطفرات. يحدد التطابق بين طرق المكون والمكالمات store.commit. بالإضافة إلى ذلك ، يمكن استخدام هذه الطريقة لنقل بعض البيانات إلى التخزين.
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations({
cal: 'calculate' // `this.cal()` `this.$store.commit('calculate')`
})
}
}
▍الخريطة
mapActionsيتم استخدام
طريقة المساعدة في المكونات لإرسال الإجراءات. يحدد التطابق بين طرق المكون والمكالمات store.dispatch.
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions({
cal: 'calculate' // `this.cal()` `this.$store.dispatch('calculate')`
})
}
}
4. لا تنس اختبارات الوحدة
يعد الاختبار جانبًا مهمًا آخر في أي مشروع. يجب على المطورين اختبار ما يقومون بإنشائه ، بغض النظر عن أهمية المشاريع وحجمها. هذا صحيح بشكل خاص في المشاريع الكبيرة التي تحتوي على مئات أو حتى آلاف الوظائف الصغيرة. مهمتنا هي اختبار كل منهم. تساعد اختبارات الوحدة في حل هذه المشكلة. إنها تسمح للمبرمج باختبار الوحدات الفردية للكود. لا تسمح لك هذه الاختبارات فقط بتحديد الأخطاء والقضاء عليها. كما أنها تزيد من مستوى ثقة المبرمج أو فريق المبرمجين في صحة أفعالهم عند إجراء تغييرات على الكود الحالي. عندما ينمو المشروع بمرور الوقت ، يمكن للمطورين ، بفضل استخدام اختبارات الوحدة ، إضافة ميزات جديدة إليه بأمان وفي نفس الوقت عدم الخوف منأن الابتكارات سوف تعطل عمل الآليات القائمة. كل ما عليك فعله هو اتباع ممارسة كتابة اختبارات الوحدة منذ بداية المشروع.
إذا تحدثنا عن اختبارات الوحدة المستخدمة في المشاريع القائمة على Vue ، فيمكننا القول إن هذه الاختبارات متطابقة تقريبًا مع تلك المستخدمة في المشاريع القائمة على أطر عمل ومكتبات أخرى. وهي الدعابة ، كارما أو موكا العمل بشكل جيد مع فيو . ولكن بغض النظر عن إطار العمل الذي تختاره لإنشاء اختباراتك ، هناك بعض الإرشادات العامة التي يجب وضعها في الاعتبار عند تطوير اختبارات الوحدة:
- إذا فشل الاختبار ، يجب أن يعرض رسائل خطأ واضحة.
- يوصى باستخدام مكتبات تأكيد جيدة عند إنشاء الاختبارات. (على سبيل المثال ، تم تضمين آليات إنشاء المطالبات في Jest ، ومع Mocha ، يتم استخدام مكتبة Chai).
- يجب أن تغطي اختبارات الوحدة جميع مكونات Vue.
إذا اتبعت هذه التوصيات منذ بداية المشروع ، فمع نمو المشروع سيقلل بشكل كبير الوقت الذي يقضيه في تصحيح أخطاء الكود واختباره اليدوي.
يمكن أن تخضع مشاريع Vue ، بالإضافة إلى اختبار الوحدة ، للاختبار الشامل والتكامل. الوضع هنا ، كما في حالة اختبارات الوحدة ، مشابه جدًا أيضًا للوضع مع الأطر والمكتبات الأخرى. لذلك ، يوصى بتضمينها في المشاريع والاختبارات المماثلة. عادة ، لا يتم اختبار جزء التوجيه من المشروع باختبارات الوحدة. يُستخدم الاختبار الشامل هنا. يعد اختبار متجر Vue هو التحدي الأكبر. من المستحسن استخدام اختبارات التكامل لاختبارها ، حيث تعتبر مضيعة للوقت في اختبار الحالات أو الإجراءات أو المحصلات بشكل منفصل.
النتيجة
بعد مراجعة القدرات الفنية لـ Vue.js في هذا المنشور ، عززت إيماني بأن إطار العمل هذا مناسب لتطوير المشاريع واسعة النطاق. بمساعدته ، كما هو الحال مع الأطر والمكتبات الأخرى ، يمكنك إنشاء مثل هذه المشاريع وإدارتها ، والحفاظ عليها في حالة جيدة.
هل تعتقد أن Vue مناسب لتطوير المشاريع الكبيرة؟
