जब आप EXT JS & Sencha Touch के साथ काम करना शुरू करते हैं तो 20 नियम

यह लेख ब्लॉग www.swarmonline.com के एक लेख का अनुवाद है जिसमें मेरी छोटी-छोटी जोड़ियाँ हैं

नई तकनीकों को सीखते समय, डेवलपर्स अक्सर अन्य लोगों की तरह ही गलतियाँ करते हैं और समान तकनीकों का पालन करते हैं।

इस लेख में, हमने कुछ ऐसी चीजों की एक सूची तैयार की है, जिनकी हम आपको सलाह देते हैं कि जब आप एक्सट जेएस के साथ काम करना शुरू करते हैं (भले ही आप विकास के दिग्गज हों, तब भी आप कुछ नया सीख सकते हैं!)। ये बातें हमारे अनुभव के माध्यम से, ब्राउज़ करने के माध्यम से और मंचों पर समान सवालों के जवाब देने के माध्यम से चली गईं। ये सबसे अच्छी प्रोग्रामिंग तकनीकों में से सबसे आम हैं।

मुझे उम्मीद है कि यह एक्सट जेएस सीखने में कई चरणों में कूदने में मदद करता है और आपको मानक त्रुटियों से बचने में मदद करता है।

यद्यपि हम स्पष्ट रूप से केवल एक्सएस जेएस के बारे में बात कर रहे हैं, अधिकांश (यदि सभी नहीं हैं), स्नेहा टच पर लागू किया जा सकता है, क्योंकि रूपरेखा संरचना समान है।

Ext.getCmp के उपयोग से बचें

अपने सभी घटकों को पहचान देने के लिए प्रलोभन का विरोध करें और उन्हें फिर से खोजने के लिए Ext.getCmp का उपयोग करें। यदि आपके एप्लिकेशन की संरचना सही है और ऑब्जेक्ट-ओरिएंटेड कोड डिज़ाइन के सिद्धांतों का पालन किया जाता है, तो आपको ज़रूरत पड़ने पर अपने घटकों को एक्सेस करने में कोई समस्या नहीं होनी चाहिए।

उपयोगी लिंक:
साकी द्वारा एक बड़ा अनुप्रयोग लिखना
साकी द्वारा घटक संचार उदाहरण

खुद के प्रॉपर्टी के इस्तेमाल से बचें

मूल तत्व प्राप्त करने के लिए ओनर की संपत्ति पर निर्भर न रहें । यदि आप घटक कोड में माता-पिता तक पहुंचने की कोशिश कर रहे हैं, तो सबसे अधिक संभावना है कि यह कोड माता-पिता में ही होना चाहिए। यह Ext.getCmp (ऊपर वर्णित) का उपयोग करने के समान है, इसलिए निर्दिष्ट लिंक को पढ़ना सुनिश्चित करें।

फ्रेमिंग पैनल न बनाएं।

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

स्पेगेटी कोड (स्कोप) से सावधान रहें।

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

अनुवादक द्वारा ध्यान दें।
बहुत बार xtype का उपयोग करके नेस्टेड घटकों को घोषित करने की इच्छा होती है

Ext.define('App.window.CreateMan', { extend : 'Ext.panel.Panel', require : ['App.models.Man'], items : [{ xtype : 'textfield', label : '' }, { xtype : 'textfield', label : '' }, { xtype : 'button', text : '', handler : this.saveData } ], saveData() { //... } }); 

यह काफी सहनीय लगता है। थोड़ी देर बाद आप एक मध्य नाम दर्ज करने के लिए एक और फ़ील्ड जोड़ेंगे। फिर नागरिकता के विकल्प के साथ एक ड्रॉप-डाउन सूची। और सूची में प्लगइन्स ... परिणामस्वरूप, एम्बेडेड कोड का एक गुच्छा प्राप्त करें। मुझे जो परियोजनाएँ मिलीं, उनमें नेस्टिंग चौदह स्तरों पर पहुँच गई। मामले में जब मुझे इस तरह के कोड को डिबग करना था, मैंने पहली बार पूरी तरह से रिफैक्टिंग किया।
बिंदु को पकड़ना महत्वपूर्ण है जब यह तत्वों को initComponent विधि में डालने के लायक है

 Ext.define('App.window.CreateMan', { extend : 'Ext.panel.Panel', require : ['App.models.Man'], initComponent : function () { this.callParent(arguments); var superPanel = Ext.create('App.util.SuperPanel', //    ); var saveButton = { xtype : 'button', text : '', handler : this.saveData, //    }; items = [{ xtype : 'textfield', label : '' }, { xtype : 'textfield', label : '' }, superPanel, saveButton ]; }, saveData() { //... } }); 

यदि आप हर समय आधार कक्षाओं का विस्तार नहीं करना चाहते हैं, तो आप विकल्प के रूप में फ़ैक्टरी विधियों का उपयोग कर सकते हैं।

नामस्थानों का उपयोग करना सुनिश्चित करें।

फिर से: संगठन हमारा सब कुछ है। एक्सटी जेएस नामस्थानों की अंतर्निहित क्षमताओं का उपयोग करने से आपको घटकों और कक्षाओं को व्यवस्थित करने की अनुमति मिलती है, ताकि भविष्य में उन्हें नेविगेट करना आसान हो। सबसे अधिक संभावना है, आप कार्यात्मक मॉड्यूल द्वारा नेमस्पेस को विभाजित करना चाहते हैं, उदाहरण के लिए, उपयोगकर्ताओं के साथ काम करने वाले सभी कोड के लिए MyApp.Users नेमस्पेस। मुझे एक निर्देशिका संरचना बनाने का भी शौक है जो नेमस्पेस से मेल खाती है। फिर सही मॉड्यूल की खोज करना हमेशा आसान होता है।

अनुवादक द्वारा ध्यान दें।
एक्सट जेएस 4 भी स्वचालित लोडिंग को लागू करता है, जिसके लिए नामस्थान और निर्देशिका के मिलान की आवश्यकता होती है। यह आपको Ext.create पद्धति ('App.modules.User') को कॉल करने की अनुमति देता है, भले ही App.modules.User वर्ग अभी तक लोड नहीं किया गया हो। एक्स्ट डाउनलोड का ख्याल रखेगा।
अधिक जानकारी यहाँ

गेट / सेट विधियों और स्थिर चर का सही ढंग से उपयोग करना

' Comp.get (0) ' या ' comp.getTopToolbar ()। Get (1) ' जैसे सिंटैक्स का उपयोग करके बटन या पैनल का लिंक प्राप्त करने के लिए घटक तत्वों के संग्रह में प्रलोभन का विरोध करें । यदि आप कभी भी इस तरह के संग्रह में एक नया आइटम जोड़ते हैं, तो ऐसी वस्तुओं के लिंक गलत होंगे। बड़े अनुप्रयोगों में, बग को पकड़ने के लिए यह एक बहुत बड़ा काम होगा।

अपने आप को अनावश्यक समस्याओं से बचाने के लिए, आप आवश्यक घटकों के लिए एक गेट विधि बना सकते हैं जो संग्रह में खोदेगी। जब आप नए घटक जोड़ते हैं, तो आप केवल इस विधि को अपडेट करेंगे। यदि आप आलसी तात्कालिकता की वकालत नहीं कर रहे हैं, तो आप आवश्यक बटन और तत्वों को वर्ग के सदस्यों के रूप में परिभाषित कर सकते हैं और इस तरह संग्रह में जोड़ते समय किसी भी बदलाव की आवश्यकता नहीं होगी।

अनुवादक द्वारा ध्यान दें।
एक वर्ग के एक सदस्य के रूप में एक वंशज जोड़ने के लिए, आप बस इसे विन्यास से स्थानांतरित कर सकते हैं ...

 Ext.define('App.window.CreateMan', { extend : 'Ext.panel.Panel', items : [{ xtype : 'panel', //    } ] // ... }); 

... initComponent मेथड

 Ext.define('App.window.CreateMan', { extend : 'Ext.panel.Panel', initComponent : function () { this.childPanel = Ext.create(/* ... */ ) } // ... }); 

इस तरह आपको सीधे वर्ग वस्तु में वंशज का संदर्भ मिलेगा।

बड़े करीने से xtypes बनाएँ

नाम सहित अपनी कक्षा के नाम के रूप में xtype निर्दिष्ट करें। तो आप आसानी से वास्तविक वर्ग परिभाषा को ट्रैक कर सकते हैं

पुन: उपयोग कोड

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

नेस्टेड फ़ंक्शंस न बनाएं

फ़ंक्शन के अंदर (फ़ंक्शन के अंदर ... किसी फ़ंक्शन के अंदर ...) फ़ंक्शन की घोषणा न करें। आप सोच सकते हैं कि आप पुन: प्रयोज्य कोड बना रहे हैं, लेकिन आप केवल बुरे सपने और संगठन बना रहे हैं। इस तरह के कोड को बनाए रखना एक महत्वपूर्ण बिंदु है, इसलिए अपने उन सहयोगियों के बारे में सोचें, जिन्हें यह डिबग करना है।

FireBug का उपयोग करना सीखें

... या WebKit डेवलपर टूल। सुनिश्चित करें कि आप जावास्क्रिप्ट को डीबग करने के लिए और HTML और CSS कोड को उत्पन्न करने वाले कोड को समझने के लिए FireBug जैसे सभी ब्राउज़र टूल का उपयोग करते हैं। सीखने के प्रारंभिक चरण में, यह भूलना बहुत आसान है कि पूरे एक्सट्रीम पेज लेआउट उत्पन्न करता है, लेकिन उपकरण आपको यह समझने देंगे कि ब्लैक बॉक्स के अंदर क्या हो रहा है। यदि आप सीखते हैं कि इन उपकरणों का उपयोग कैसे करें और जेएस को कुशलतापूर्वक कैसे डिबग करें, तो आप अपने आप को समय के एक विशाल ढेर से बचाएंगे।

फ्रेम को व्हाइट बॉक्स में बदल दें!

जैसा कि इवान ने कहा, "स्रोत कोड से डरो मत।" डीबगर में अपने तरीकों की कॉल को ओवरस्टॉप करने के बजाय, एक्सट्रीम जेएस फ्रेमवर्क के अंदर जाने के लिए फायरबग के साथ काम करने में अपने कौशल का उपयोग करें। यह अविश्वसनीय है कि आप कितना सीख सकते हैं और कितनी आसानी से आप फ्रेमवर्क विधि के अंदर जाकर किसी समस्या को हल कर सकते हैं, यह जानने के लिए कि वास्तव में समस्या क्या है, यह जानने की कोशिश में तनाव के घंटों से छुटकारा नहीं मिल रहा है।

हमेशा प्रलेखन खुला रखें

प्रलेखन आपका सबसे अच्छा दोस्त है। जब आप समस्याओं का सामना करते हैं या कुछ नया खोज रहे हैं तो यह आपका पहला पड़ाव होना चाहिए। यह अच्छी तरह से सोचा और नेविगेट करना आसान है, इसलिए इसका उपयोग करें!

अनुवादक द्वारा ध्यान दें।
यह क्रोम के साथ प्रलेखन के लिए एक एप्लिकेशन बनाने में बहुत सुविधाजनक है, क्योंकि इसका इंटरफ़ेस टैब का उपयोग करता है।

स्टेजिंग डिबगिंग

समस्या को हल करने के लिए क्या कदम होना चाहिए:

• अपना कोड जांचें (सेटिंग्स में स्पेलिंग मिस्टेक करना, कमांड्स वगैरह छोड़ना बहुत आसान है)।
  

  नोट: नोटपैड ++ का उपयोग करने वाले मेरे जैसे किसी व्यक्ति के पास त्रुटियों और चेतावनियों के लिए जेएस की जांच करने का एक शानदार समाधान है

• प्रलेखन का संदर्भ लें (हो सकता है कि आपके पास कॉन्फ़िगरेशन में कुछ विकल्प छूट गए हों)
• डिबगिंग के दौरान स्रोत कोड पर एक नज़र डालें (उस जगह के सामने एक ब्रेकपॉइंट बनाएं जहां त्रुटि होती है और देखें कि क्या गलत हुआ है। आपको शायद एक लापता कॉन्फ़िगरेशन मिलेगा या ऐसा कुछ कॉल करना होगा जो अभी तक तत्काल नहीं किया गया है)
• मंच खोजें (सबसे अधिक संभावना है कि किसी को पहले से ही इसी तरह की समस्या का सामना करना पड़ा है और इसके बारे में पूछा गया है)
• पूरे वेब पर खोजें (यदि फोरम मदद नहीं कर सकता, तो शायद जवाब वेब पर है)
• फ़ोरम पर एक विषय बनाएँ (यदि आप अभी भी समाधान नहीं ढूंढ पा रहे हैं, तो फ़ोरम में समस्या का पूरी तरह से वर्णन करें ताकि लोगों के लिए मदद करना आसान हो जाए)

धीरे-धीरे इंटरफ़ेस बनाएँ।

काम में तल्लीन करना और आधा दर्जन घटकों को बनाना बहुत आसान है, और फिर इसे एक ब्राउज़र में खोलें और परिणाम देखें। यदि यह काम नहीं करता है, तो अपराधी को खोजने की कोशिश में विपरीत दिशा में स्थानांतरित करना बेहद मुश्किल हो सकता है। हम सुझाव देते हैं कि एक समय में एक घटक बनाएं और सुनिश्चित करें कि सब कुछ काम करने के बाद आगे बढ़ेगा। उदाहरण के लिए, यदि आप एक DataGrid बनाना चाहते हैं, तो ऐसे तत्वों को जोड़ना, जो एनिमेटेड होंगे, तो पहले एक अतिरिक्त बनाएँ और फिर एनीमेशन से निपटें। यदि आप एक साथ सब कुछ करने की कोशिश करते हैं, तो सबसे अधिक संभावना है कि कुछ गलत हो जाएगा।

कम से कम और पैकेज (GZip) अपने अंतिम कोड

हम सभी घटकों को अलग-अलग फ़ाइलों में रखने की सलाह देते हैं। इसका मतलब है कि आपको अनुरोधों का एक गुच्छा प्राप्त होगा, इसलिए सुनिश्चित करें कि सभी स्क्रिप्ट एक फ़ाइल में सिले हैं। फिर आप प्रश्नों की संख्या को कम करते हैं और कोड आकार को संकुचित करते हैं।
उसके बाद, सुनिश्चित करें कि आपका सर्वर आपकी स्क्रिप्ट के लिए GZip का समर्थन करता है। इससे डाउनलोड किए गए कोड का आकार 70% तक कम हो जाएगा!

फ्रेमवर्क कोड को संशोधित न करें!

इसमें खुदाई करें, इसे पढ़ें, इसका परीक्षण करें, इसका अध्ययन करें, लेकिन कभी भी इसे संशोधित न करें। यदि आप लाइब्रेरी के मूल में संपादन करना शुरू करते हैं, तो जेएस या सीएसएस में कोई फर्क नहीं पड़ता है, तो आप अपने आवेदन में एक समय बम लगा देंगे। जब आप फ्रेमवर्क को एक नए संस्करण में अपग्रेड करते हैं और सभी परिवर्तन खो जाते हैं, तो आपको पता चलेगा कि सब कुछ लंबे समय तक कैसे काम करता है।
यदि आप फ्रेमवर्क के व्यवहार या स्वरूप को बदलना चाहते हैं, तो इसे पुन: परिभाषित करने वाली कक्षाओं (ये JS या CSS कक्षाएं हो सकती हैं) या अलग-अलग फ़ाइलों में रखे गए तरीकों से करें। इसके बाद, आप इन कक्षाओं और विधियों को आसानी से हटा सकते हैं और फ्रेमवर्क को अपडेट करने की बात आने पर उन्हें आसानी से ट्रैक कर सकते हैं।

प्लगइन्स और कस्टम एक्सटेंशन का उपयोग करें

यदि आप एक घटक बनाना चाहते हैं जो एक आम समस्या को हल करता है, तो यह बहुत संभव है कि किसी ने इसे पहले ही प्लग-इन या एक्सटेंशन के रूप में जारी कर दिया हो। खरोंच से एक घटक लिखने से पहले मंचों और वेब पर खोज करने में कुछ समय बिताएं (हालांकि यदि आपके पास समय है, तो यह सीखने का एक शानदार तरीका है)

एक स्थान पर सामान्य तत्वों को परिभाषित करें

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

Ext.Direct का उपयोग करने पर विचार करें

Ext.Direct Ext JS की एक शानदार विशेषता है जिसे हम शुरू से ही उपयोग करने की सलाह देते हैं। यह सर्वर के साथ गति में वृद्धि, कोड में कमी और बातचीत के सरलीकरण जैसे लाभ प्रदान करता है। यदि आप भविष्य में इसका उपयोग करने पर विचार कर रहे हैं, तो न करें! अभी इसका इस्तेमाल शुरू करें। यह शुरू से ही लागू करने के लिए काम करने वाले अनुप्रयोगों में बनाने के लिए बहुत आसान है। आप लंबे समय में हमें धन्यवाद देंगे।

सभी ब्राउज़रों में परीक्षण!

हालांकि एक्सट जेएस ने लगभग पूर्ण क्रॉस-ब्राउज़र संगतता की देखभाल की, हमेशा सभी ब्राउज़रों का परीक्षण किया, विशेष रूप से IE। हमेशा की तरह, कुछ सीएसएस नियम IE में सही तरीके से काम नहीं करते हैं, और अतिरिक्त अल्पविराम आपके आवेदन को तोड़ देगा।