टेम्पलेट-चालित और प्रतिक्रियाशील रूपों के बीच व्यावहारिक अंतर क्या हैं?


157

मैं Angular2 नए फॉर्म एपीआई के बारे में पढ़ रहा हूं और ऐसा लगता है कि प्रपत्रों पर दो दृष्टिकोण हैं, एक टेम्पलेट चालित रूप हैं अन्य प्रतिक्रियाशील या मॉडल-संचालित रूप हैं।

मैं दोनों के बीच के व्यावहारिक अंतर को जानना चाहता हूं, वाक्य रचना (स्पष्ट रूप से) लेकिन व्यावहारिक उपयोगों में अंतर नहीं है और जो अलग-अलग परिदृश्यों में अधिक लाभ पहुंचाता है। इसके अलावा, क्या एक प्रदर्शन को दूसरे को चुनने में फायदा होता है? और यदि हाँ, तो क्यों?


3
विचार करने के लिए एक और बिंदु प्रतिक्रियाशील रूप समकालिक है और टेम्पलेट चालित रूप अतुल्यकालिक है। दोनों रूपों की अपनी कमज़ोरियाँ और ताकत हैं। इसलिए आपके आवेदन पूर्व में किस फॉर्म का उपयोग करना है, यह चुनने से पहले कुछ बातों पर विचार करने की आवश्यकता है। आवेदन जटिलता आदि। आप आवेदन में दोनों रूपों का भी उपयोग कर सकते हैं।
विजय सिंह

जवाबों:


171

खाका प्रेरित रूप सुविधाएँ

  • प्रयोग करने में आसान
  • सरल परिदृश्यों के लिए उपयुक्त और जटिल परिदृश्यों के लिए विफल रहता है
  • AngularJS के समान
  • दो तरह से डेटा बाइंडिंग ( [(NgModel)]सिंटैक्स का उपयोग करके )
  • न्यूनतम घटक कोड
  • प्रपत्र और उसके डेटा का स्वचालित ट्रैक (कोणीय द्वारा नियंत्रित)
  • यूनिट परीक्षण एक और चुनौती है

प्रतिक्रियाशील रूप सुविधाएँ

  • अधिक लचीला है, लेकिन अभ्यास की बहुत आवश्यकता है
  • किसी भी जटिल परिदृश्य को संभालता है
  • कोई डेटा बाइंडिंग नहीं की जाती है (अधिकांश डेवलपर्स द्वारा पसंद किए जाने योग्य डेटा मॉडल)
  • अधिक घटक कोड और कम HTML मार्कअप
  • प्रतिक्रियाशील परिवर्तन संभव हो सकते हैं जैसे कि
    • किसी ईवेंट को एक डेब्यू टाइम के आधार पर हैंडल करना
    • जब तक घटक अलग-अलग न हों तब तक घटनाओं को संभालना
    • तत्वों को गतिशील रूप से जोड़ना
  • आसान इकाई परीक्षण

1
क्या टेम्प्लेट ड्रॉइंग फॉर्म के लिए यूनिट परीक्षण नीचे की ओर अभी भी लागू है?
खतरे '

@ खतरा 89 मुझे ऐसा लगता है। कारण इकाई परीक्षण टेम्पलेट संचालित रूपों के लिए एक समस्या है, क्योंकि वे मूल्य परिवर्तन हैं और वैधता जांच अतुल्यकालिक हैं, जो इकाई परीक्षण की बात आने पर सिरदर्द का कारण बन सकती है।
एलेक्स लॉकवुड

2
मैं ऊपर के मिश्रण में प्रपत्र सत्यापन जोड़ूंगा । टेम्प्लेट को निर्देशों के माध्यम से मान्य किया जाता है, जहां प्रतिक्रियात्मक रूप से कार्य होता है
कीरन

11
प्रतिक्रियाशील रूपों का संदर्भ देते समय वास्तव में "किसी भी जटिल परिदृश्य को संभालता है" का क्या अर्थ है? AngularJS से आने वाले, मैंने जटिल रूपों का निर्माण ठीक-ठाक किया है, इसलिए मेरे लिए यह देखना कठिन है कि टेम्पलेट कैसे संचालित होते हैं "जटिल परिदृश्यों के लिए असफल"
jateate

@jtate मैं आपसे सहमत हूँ jtate, क्या किसी के पास कोई विचार है जिस पर कोई प्रदर्शन, लोड समय आदि को बेहतर बनाने में मदद करता है?
जोएल जोसफ

24

मुझे लगता है कि यह कोड , रणनीति और उपयोगकर्ता अनुभव के बारे में चर्चा करता है

सारांश में, हम टेम्पलेट-चालित दृष्टिकोण के लिए बदल जाते हैं जो इसके साथ काम करने के लिए अधिक आसान है , हमें अधिक नियंत्रण देने के लिए प्रतिक्रियाशील (मॉडल-चालित दृष्टिकोण में) , जिसके परिणामस्वरूप एचटीएमएल (डिज़ाइन /) के बीच एक डिकूप्लिंग का लाभ उठाकर बेहतर परीक्षण योग्य रूप में परिणाम होता है। CSS टीम यहां काम कर सकती है) और घटक के व्यावसायिक नियम (कोणीय / js विशेषज्ञ सदस्य) और प्रतिक्रियाशील परिवर्तनों, सहसंबद्ध मान्यताओं जैसी सुविधाओं के साथ उपयोगकर्ता अनुभव को बेहतर बनाने और जटिल परिदृश्यों को रनटाइम सत्यापन नियम और गतिशील क्षेत्र दोहराव के रूप में संभालते हैं

यह लेख इसके बारे में एक अच्छा संदर्भ है: कोणीय 2 रूप - टेम्पलेट चालित और मॉडल प्रेरित दृष्टिकोण


24

यहाँ देबोराह (देबोराह कुरता) द्वारा अच्छी तरह से समझाए गए टेम्पलेट संचालित और प्रतिक्रियाशील रूपों के बीच तुलना का सारांश है, यहां छवि विवरण दर्ज करें


3

प्रतिक्रियाशील रूप:

  • पुन: प्रयोज्य,
  • और अधिक मजबूत,
  • परीक्षण योग्य,
  • अधिक स्केलेबल

टेम्प्लेट चालित रूप:

  • जोड़ना आसान है,
  • कम स्केलेबल,
  • बुनियादी रूप की आवश्यकताएं

सारांश में , यदि आपके ऐप के लिए फ़ॉर्म बहुत महत्वपूर्ण हैं, या आपके ऐप में प्रतिक्रियाशील पैटर्न का उपयोग किया जाता है, तो आपको प्रतिक्रियाशील रूपों का उपयोग करना चाहिए। अन्यथा आपके ऐप में साइन इन जैसे फॉर्म के लिए बुनियादी और सरल आवश्यकता है, आपको टेम्प्लेट-चालित फ़ॉर्म का उपयोग करना चाहिए ।

एक कोणीय ऑफिकल लिंक है


0

रिएक्टिव फॉर्म और टेम्प्लेट-चालित रूपों के बीच अंतर जानने का सबसे आसान तरीका

मैं कह सकता हूँ कि यदि आप अधिक नियंत्रण और मापनीयता प्रतिक्रियाशील रूपों के साथ जाना चाहते हैं

यहां छवि विवरण दर्ज करें


0

टेम्पलेट चालित प्रपत्र:

FormsModule का उपयोग करके आयात किया गया

एनकोमॉडल निर्देश के साथ बनाए गए फॉर्म को केवल एक परीक्षण से अंत तक परीक्षण किया जा सकता है क्योंकि इसके लिए डोम की उपस्थिति की आवश्यकता होती है

फॉर्म वैल्यू दो अलग-अलग जगहों पर उपलब्ध होगी: व्यू मॉडल यानी ngModel

फॉर्म सत्यापन, जैसा कि हम एक क्षेत्र में अधिक से अधिक सत्यापनकर्ता टैग जोड़ते हैं या जब हम जटिल क्रॉस-फील्ड सत्यापन जोड़ना शुरू करते हैं तो फॉर्म की पठनीयता कम हो जाती है

प्रतिक्रियाशील रूप:

आम तौर पर बड़े पैमाने पर अनुप्रयोगों के लिए इस्तेमाल किया जा सकता है

जटिल सत्यापन तर्क वास्तव में लागू करने के लिए सरल है

ReactiveFormsModule का उपयोग करके आयात किया गया

फॉर्म वैल्यू दो अलग-अलग जगहों पर उपलब्ध होगी: व्यू मॉडल और फॉर्मग्रुप

यूनिट टेस्ट के लिए आसान: हम ऐसा कर सकते हैं कि केवल क्लास को तत्काल करने से, प्रपत्र नियंत्रण में कुछ मान सेट करें और प्रपत्र वैश्विक मान्य स्थिति और प्रत्येक नियंत्रण की वैधता स्थिति के खिलाफ दावे का प्रदर्शन करें।

प्रतिक्रियाशील प्रोग्रामिंग के लिए वेधशालाओं का उपयोग

उदाहरण के लिए: एक पासवर्ड फ़ील्ड और एक पासवर्ड पुष्टिकरण फ़ील्ड समान होने की आवश्यकता है

प्रतिक्रियाशील तरीका: हमें केवल एक फ़ंक्शन लिखने और इसे फॉर्मकंट्रोल में प्लग करने की आवश्यकता है

टेम्पलेट-चालित तरीका: हमें एक निर्देश को परिभाषित करने की आवश्यकता है और किसी तरह इसे दो क्षेत्रों के मूल्य से गुजारें

https://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.