🙋🏻 👨🏾‍🍳 👃🏿 एक्सटीजेएस अवलोकन 4. पुराने संस्करण के साथ पोर्टिंग अनुभव 👩🏾‍🎤 🖐🏻 👝

इस तथ्य के बावजूद कि एक्सटीजेएस ढांचे के चौथे संस्करण को लंबे समय से जारी किया गया है, हब पर इस संस्करण पर बहुत अधिक सामग्री नहीं हैं और अगर आप इस बात को ध्यान में रखते हैं कि चौथे संस्करण में एपीआई, वर्ग संरचना और प्रस्तावित एप्लिकेशन आर्किटेक्चर को काफी हद तक बदल दिया गया है, तो, यह मुझे लगता है, इसके बारे में बात करने के लिए कुछ है।

इस लेख में मैं नए संस्करण में मौजूदा कोड बेस को पोर्ट करने के संदर्भ में ढांचे के अपने छापों को बताने की कोशिश करूंगा; मैं उपयोगी पृष्ठों के लिए नुकसान और लिंक के बारे में नहीं भूलने की भी कोशिश करूंगा।

Ext4, ugh। Ext3 के साथ संगत नहीं है, और इसे "आसान" बनाने के लिए सभी प्रकार की नई कार्यप्रणाली लागू कर रहा है। जावास्क्रिप्ट फ्रेमवर्क का विंडोज विस्टा

( stackoverflow.com पर टिप्पणियों में से एक)

एक्सटीजेएस 4 फ्रेमवर्क के पिछले संस्करणों के साथ संगत नहीं है।
इसका मतलब यह है कि फ्रेमवर्क के किसी अन्य संस्करण के लिए लिखा गया आपका आवेदन काम नहीं करेगा (तुच्छ मामलों को छोड़कर)। यह निम्नलिखित कारणों से होगा:

अनुप्रयोग वास्तुकला आवश्यकताएँ परिवर्तित
वर्ग संरचना बदल गई है
एपीआई शब्दार्थ आंशिक रूप से बदल गया है

अनुप्रयोग वास्तुकला

सबसे महत्वपूर्ण परिवर्तन वास्तुकला की चिंता करता है: ExtJS4 अब क्लाइंट साइड MVC पैटर्न का प्रचार करता है। आपके घटक के सभी "व्यावसायिक तर्क" को "नियंत्रक" के सार में बनाया जाना चाहिए, और जो एक दृश्य इंटरफ़ेस प्रदान करता है - "दृश्य" (दृश्य) बनाएं; डेटा के साथ काम करने के तर्क को "मॉडल" परत में रखा जाना चाहिए (जिसमें से Ext.data.Model ही , जिसे पहले Ext.data.Record और Ext.data.Store स्टोरेज के रूप में जाना जाता है )।

वास्तव में, सभी दृश्य घटक - पैनल, टेबल, पेड़, आदि। - ये एक अभ्यावेदन या इसका हिस्सा होने के लिए आवेदक हैं। दृश्य घटकों को एम्बेड करने (एग्रीगेट) करने की क्षमता अब केवल दृश्य स्तर के लिए संभव है: नियंत्रक मौजूद हैं, वास्तव में, एक सपाट परत में।

प्रतिनिधित्व एक घटना तंत्र के माध्यम से अपने राज्य में परिवर्तन के बारे में "ऊपर की ओर" रिपोर्ट करते हैं।
"व्यवसाय कार्य" के दृष्टिकोण से महत्वपूर्ण घटनाओं को नियंत्रक में संसाधित किया जाना चाहिए। ऐसा करने के लिए, प्रत्येक नियंत्रक के पास एक जादू नियंत्रण () विधि है, जिसके साथ यह उन घटनाओं की सदस्यता लेता है जो दृश्य के कुछ हिस्से से आते हैं। कंट्रोलर बताता है कि वह कौन सी सीएसएस-जैसे सिंटैक्स का उपयोग करके ईवेंट प्राप्त करना चाहता है जिसे कॉम्पोनेंटिवा कहा जाता है:

Ext.define('My.controller.Header', { extend: 'Ext.app.Controller', //... init: function() { this.control({ 'button[action=help-toggle]': { scope: this, click: this.toggleHelp }, 'mainmenuview': { scope: this, afterrender: this.menuRendered } } ); }, toggleHelp: function () { //some actions }, menuRendered: function () { //some other actions } } );

निम्नलिखित बातों को समझना महत्वपूर्ण है:

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

इस प्रकार, पहले जो एक घटक में समझाया गया था, जिसे अब आसानी से पुन: उपयोग किया जा सकता है वह कई असमान भागों में विभाजित हो जाता है: "विचारहीन" अभ्यावेदन का एक सेट, मॉडल का एक सेट और नियंत्रकों का एक सेट। यह गतिशील रूप से परिभाषित तत्वों और गतिशील घटक निर्माण के साथ पृष्ठों के लिए गंभीर कठिनाइयों के साथ छोटे अनुप्रयोगों के लिए एक फायदा बनाता है (आप इस तरह की समस्या के बारे में पढ़ सकते हैं, उदाहरण के लिए, यहां )।

कक्षाएं और घटक

ढांचे के चौथे संस्करण में, मानक कक्षाओं की संरचना को गंभीरता से नया रूप दिया गया है। वर्ग के नाम स्वयं अधिक संक्षिप्त हो गए हैं, वर्गों के बीच कर्तव्यों का विभाजन - अधिक विचारशील।
उदाहरण के लिए, मुझे खुशी हुई कि स्टोर के लिए डेटा पढ़ने / लिखने के लिए तर्क अब Ext.data.proxy.Proxy में पहले से ही समझाया गया है (उदाहरण के लिए, RESTful सर्वर के साथ काम को फिर से परिभाषित करने के लिए, प्रॉक्सी में और स्टोरेज में दोनों संबंधित विधियों को ओवरलैप करना आवश्यक था। - onWrite, onRead और onUpdate) के तरीकों में।
इसके अतिरिक्त, GroupingStore के साथ अब वह अजीब स्थिति नहीं है जब आपको यह चुनना था कि क्या स्टोर JSON (JsonStore), XML (XmlStore) डेटा के साथ काम करेगा या क्या यह एक टेबल के लिए समूह डेटा (GroupingStore) और इन सभी 3 वर्गों में से एक पर होगा पदानुक्रम स्तर।

कुछ मामलों में, वस्तुओं का व्यवहार अधिक अनुमानित हो गया है। तो, अब, घटक तैयार होने से पहले ('रेंडर' ईवेंट से पहले), इसका आइटम संग्रह मिश्रितकॉलक्शन प्रकार का है, और एक सरणी नहीं है, जैसा कि पहले (एक trifle, लेकिन अच्छा), और Ext.grid.Panid तालिका अब भंडारण को रिबूट करने के बाद स्वतंत्र रूप से चयन हानि की प्रक्रिया करती है (पहले) इस स्थिति को मैन्युअल रूप से वर्णित किया जाना था)।

ExtJS 4 मानक जावास्क्रिप्ट कक्षाओं के प्रोटोटाइप को संशोधित नहीं करता है।
तो, अब उपयोगितावादी फ़ंक्शन जो पहले प्रोटोटाइप (फंक्शन। क्रिएटलीगेट ) (), स्ट्रिंग ( प्रारूप ), एरे, इंडेक्सऑफ ()) को अलग-अलग सिंटलेटों (एक्सटैक्शन। बिंद ) (), एक्सट्रीमिंग प्रारूप में ले जाते हैं। ) और Ext.Array। indexOf (), क्रमशः)।

एपीआई बदल जाता है

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

अप्रिय से: दूरस्थ डेटा के साथ काम करने वाले रिपॉजिटरी के साथ काम करने का शब्दार्थ बहुत बदल गया है। मुझे आश्चर्य हुआ जब यह पता चला कि सर्वर के अनुरोध के लिए अतिरिक्त सेट को जोड़ने के लिए स्टोर में "हैंडल" नहीं है। सेटबेसरम () या लोड (परम) को सेट करने के लिए कोई एनालॉग अब उपलब्ध नहीं कराया गया है।
अंतर्निहित प्रॉक्सी वर्ग पहले की तरह मापदंडों के किसी भी सेट के साथ काम कर सकता है, लेकिन स्टोर स्तर पर एक सख्ती से परिभाषित कुंजी है जो प्रॉक्सी को दी गई है।

UPD टिप्पणियों का सुझाव है कि आप वास्तव में अतिरिक्त पैरामीटर पारित कर सकते हैं (धन्यवाद इसके अलावा के लिए MrSLonoed )।

जाहिर है, सेटबेसरम () स्टोर के विकल्प के रूप में, तथाकथित फिल्टर और सॉर्टर्स (फिल्टर और सॉर्टर्स ) का समर्थन किया जाता है। इन संस्थाओं का उपयोग स्थानीय रूप से (मौजूदा डेटा सेट पर काम करने वाले) और दूरस्थ रूप से (पैरामीटर के रूप में सर्वर पर भेजा जा रहा है) दोनों में किया जा सकता है। क्या विशेषता है: फिल्टर और सॉर्टर्स के लिए HTTP मापदंडों में क्रमांकन की कोई लचीली संभावना नहीं है। तो, फिल्टर हमेशा निम्नानुसार क्रमबद्ध किया जाएगा
mywebserver?{otherparams}&filters={your serialized filters}
आप फ़िल्टर के क्रमांकन को केवल {your serialized filters} भीतर नियंत्रित कर सकते हैं, जबकि मानक विधियों का उपयोग करके आप फ़िल्टर पैरामीटर से छुटकारा नहीं पा सकते हैं।

यहां एक उदाहरण दिया गया है कि क्वेरी में अतिरिक्त पैरामीटर जोड़ने के लिए फ़िल्टर का उपयोग कैसे किया जा सकता है:

 Ext.define('My.proxy.Ajax', { extend: 'Ext.data.proxy.Ajax', alias: 'proxy.myajax', filterParam: '', getParams: function (params, operation) { params = this.callParent(arguments); var filters = operation.filters; if (this.filterParam === '' && filters && filters.length) { Ext.apply(params, this.encodeFilters(filters)) } return params; }, encodeFilters: function (filters) { var f, po = {}, i; for (i = 0; i < filters.length; ++i) { f = filters[i]; po[f.property] = f.value; } return po; } } );

UPD: एक महत्वपूर्ण विवरण पर ध्यान दें: डिफ़ॉल्ट रूप से, जोड़े गए फ़िल्टर दूरस्थ और स्थानीय दोनों तरह से काम करेंगे। इसका मतलब यह है कि यदि आप फ़िल्टर "q = myValue" जोड़ते हैं, तो यह फ़िल्टर संबंधित HTTP पैरामीटर (जो अच्छा है) के लिए अनुक्रमित किया जाएगा, लेकिन फिर इसे लोड करने के बाद स्टोर पर लागू किया जाएगा। और अभिलेखों के गायब होने के कारण को पकड़ने के लिए, जब वे सभी प्राप्त हुए थे, तो आप एक लंबा समय भी ले सकते हैं। इसलिए, स्टोर पैरामीटर देखें। फिल्टरऑनलाड ।

दूसरा अप्रिय क्षण भी AJAX से संबंधित है। किसी कारण से, ExtJS4 में एक साधारण लेखक का अभाव है जो HTTP कुंजी-मान मापदंडों के एक सेट के रूप में एक वस्तु भेजता है। इसका कार्यान्वयन तुच्छ है, लेकिन "तलछट बनी हुई है":

 Ext.define('My.data.writer.Http', { extend: 'Ext.data.writer.Writer', alias : 'writer.http', writeRecords: function(request, data) { if (Ext.isArray(data)) { data = data[0]; } Ext.apply(request.params, data); return request; } } );

गतिशील लोड हो रहा है

फ्रेमवर्क का नया संस्करण जेएस संसाधनों को गतिशील रूप से लोड करने की क्षमता प्रदान करता है (क्रॉस-डोमेन और यहां तक कि file:// प्रोटोकॉल - उदाहरण के लिए, मदद बस फ़ाइल सिस्टम से एक html फ़ाइल के रूप में खोला जा सकता है)। इस संबंध में, इसकी प्रत्येक कक्षा में उन वर्गों या पैकेजों के नामों को स्पष्ट रूप से पंजीकृत करने की सिफारिश की जाती है जिन पर यह वर्ग निर्भर करता है।
यह Ext.require () कॉल करके या वर्ग घोषणा के शरीर में एक ही नाम के अनुभाग का उपयोग करके किया जाता है।

जब स्रोत लोडिंग सक्षम होता है, तो ExtJS क्लास ग्राफ के सही लोडिंग की गारंटी देता है ताकि सभी निर्भरता को सही तरीके से ध्यान में रखा जाए।
फ़ाइल सिस्टम में स्रोत कोड के स्थान से संबंधित एक नई आवश्यकता इस सुविधा के साथ जुड़ी हुई है: पूर्ण वर्ग नाम को फ़ाइल सिस्टम में फ़ाइल स्थान को विशिष्ट रूप से निर्धारित करना चाहिए (जैसा कि प्रथागत है, उदाहरण के लिए, जावा में या PHP में Zend फ्रेमवर्क में)।

ExtJS स्रोतों में अब कई विकल्प भी हैं:

ext-सब-debug.js
ext-सभी डिबग-डब्ल्यू-comments.js
ext-सब-dev.js
ext-all.js
ext-debug.js
ext-dev.js
ext.js

Ext * .js फाइलें जिसमें नाम में सभी प्रत्यय शामिल नहीं हैं, वे गतिशील लोडिंग सक्षम करने वाले स्रोत हैं। ऐसे संसाधनों का उपयोग केवल डिबग मोड में किया जाना चाहिए।
वैसे, "दुर्घटनावश" सक्षम डायनेमिक रिसोर्स लोडिंग "साइलेंट" का एक अन्य स्रोत है, अगर लोड किए गए संसाधन में सिंटैक्स त्रुटि होती है, तो एक्सटीजेएस क्रैश हो जाता है। हालाँकि, किसी ने अभी तक JSLint को रद्द नहीं किया है।

आप यहां एक्सटीजेएस को जोड़ने के लिए प्रत्येक विकल्प के लक्ष्यों के बारे में अधिक पढ़ सकते हैं।

स्रोत पढ़ें और अच्छे प्रोग्रामर बनें!
आपका ध्यान देने के लिए धन्यवाद।

एक्सटीजेएस अवलोकन 4. पुराने संस्करण के साथ पोर्टिंग अनुभव

अनुप्रयोग वास्तुकला

कक्षाएं और घटक

एपीआई बदल जाता है

गतिशील लोड हो रहा है

More articles: