العديد من الخصائص أو خاصية الكائن: معايير الاختيار

باستخدام Vue ، نقوم بتطوير مكونات من أنواع وشروط الاستخدام المختلفة. أحد الأجزاء الرئيسية لأي مكون هو الواجهة. في Vue ، تعد الخصائص التي تم تمريرها جزءًا مهمًا جدًا ، إن لم يكن أهم ، جزءًا من واجهة المكون.

في الحالة التي يتطلب فيها المكون الكثير من البيانات ، يمكن تطبيق عدة طرق لنقلها. النظر فيها.

مجموعة الممتلكات

إحدى الطرق الممكنة هي إنشاء خاصية منفصلة لكل قيمة ذرية. دعونا نلقي نظرة على رمز المكون باستخدام نهج مماثل:

نمط

<template> <div> <div>First name: {{ firstName }}</div> <div>Last name: {{ lastName }}</div> <div>Birth year: {{ birthYear }}</div> </div> </template> 

النصي

 const MIN_BIRTH_YEAR = 1900 export default { name: 'PersonInfo', props: { firstName: { type: String, required: true, validator: firstName => firstName !== '' }, lastName: { type: String, required: true, validator: lastName => lastName !== '' }, birthYear: { type: Number, required: true, validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear() } } } 

دعونا ننظر في استخدام هذا المكون.

  <!-- Other part of html template--> <PersonInfo first-name="Jill" last-name="Smith" :birth-year="2000" /> <!-- Other part of html template--> 

النظر في مزايا وعيوب هذا النهج

الفوائد

• جميع الخصائص مستقلة. إذا كانت إحدى القيم غير صالحة ، فستكون رسالة الخطأ أكثر دقة.
• محتوى الخصائص المنقولة واضح
• "شقة أفضل من التعشيش"
• من السهل جدًا إضافة خصائص اختيارية جديدة: ما عليك سوى إضافة خاصية تستخدم المعلمة default

 props: { firstName: { type: String, required: true, }, lastName: { type: String, required: true, }, birthYear: { type: Number, required: true, validator: year => year > MIN_BIRTH_YEAR && year < new Date().getFullYear() }, city: { type: String, default: 'New York' } } 

العيوب

• رمز مطول بما فيه الكفاية في المكون الأصل ، وخاصة عند أخذ البيانات من كائن واحد. مثال:

  <!-- Other part of html template--> <PersonInfo :first-name="person.firstName" :last-name="person.lastName" :birth-year="person.birthYear" /> <!-- Other part of html template--> 

• لفظية في تعريف الخصائص (مقارنة مع وصف الكائن)

خاصية الكائن

هناك حالات عندما لا تكون البيانات الذرية أنواعًا بدائية. في المثال المحدد ، قد تكون هذه البيانات كائنًا person .

النظر في مثال:

نمط

 <template> <div> <div>First name: {{ person.firstName }}</div> <div>Last name: {{ person.lastName }}</div> <div>Birth year: {{ person.birthYear }}</div> </div> </template> 

النصي

 import quartet from 'quartet' // npm validation package const v = quartet() const MIN_BIRTH_YEAR = 1900 export default { name: 'PersonInfo', props: { person: { type: Object, required: true, validator: v({ firstName: 'string', lastName: 'string', birthYear: v.and( 'safe-integer', v.min(MIN_BIRTH_YEAR), v.max(new Date().getFullYear()) ) }) } } } 

لنلقِ نظرة على استخدام:

  <!-- Other part of html template--> <PersonInfo :person="person"/> <!-- or (bad) --> <PersonInfo :person="{ firstName: 'Jill', lastName: 'Smith', birthYear: 2000 }"/> <!-- Other part of html template--> 

النظر في مزايا وعيوب

الفوائد

• رمز في المكون الأصل يحصل أقصر
• إذا كان هناك بنية بيانات معينة لا تتغير ، يصبح الرمز أقل تكرارًا

العيوب

• تصبح كل القيم ملزمة بكائن واحد. إذا كانت إحدى القيم غير صالحة - فستظهر رسالة خطأ أن الكائن بأكمله غير صالح
• عند استخدام كائن في المكون الأصل: يتم إخفاء محتوى البيانات المرسلة خلف تجريد هذا الكائن
• مستوى إضافي من التعشيش في المكون
• من المستحيل إضافة خصائص اختيارية جديدة ذات قيم داخل الكائن (لا أعرف كيفية القيام بذلك)
• للتحقق من صحة كائن إلى الحد نفسه ، تحتاج إلى استخدام أدوات تحقق إضافية (مثل مكتبة التحقق من صحة quartet )

الاستنتاجات

لقد توصلت إلى الاستنتاجات التالية:

• استخدام الخصائص الفردية هو الأفضل.
• يُسمح باستخدام خاصية كائن عندما لا يتم تجديد بنية بيانات هذا الكائن بحقول اختيارية إضافية ذات قيمة افتراضية.

ص

سأكون سعيدًا بمعرفة معايير اختيارك. ما النهج الذي تستخدمه ولماذا؟ في أمور أخرى ، هذا هو الغرض الرئيسي من كتابة هذه المقالة. هل يمكن لأي منكم أن يعرف أفضل الممارسات وأساسها المنطقي؟ شكرا على وقتك.

تحديث 19:26 ، 01/16/2019

هناك أيضًا خيار ثالث ، c v-bind. انظر المناقشة هنا