कई गुण या संपत्ति-वस्तु: चयन मानदंड

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। यहां देखें चर्चा