एक्सट जेएस 4 का इंतजार: डेटा पैकेज

अनुवादक से: हम आपको "लंबित एक्सएस जेएस 4" श्रृंखला के दूसरे लेख की पेशकश करते हैं। पिछले लेख में , एक्सट जेएस डेवलपर्स ने नए वर्ग प्रणाली के बारे में बात की थी।



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



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

नया क्या है

एक्सट जेएस 4 में डेटा पैकेज 43 वर्गों के होते हैं, लेकिन उनमें से तीन विशेष रूप से बाकी की तुलना में महत्वपूर्ण हैं - यह मॉडल , स्टोर और प्रॉक्सी है । उनका उपयोग लगभग हर अनुप्रयोग में उपग्रह कक्षाओं के साथ किया जाता है।

मॉडल और रिपॉजिटरी

पैकेज का मूल तत्व Ext.data.Model वर्ग है, जो मॉडल के साथ काम करने के लिए जिम्मेदार है। एक मॉडल एक एप्लिकेशन में कुछ डेटा का एक सेट है - उदाहरण के लिए, एक इलेक्ट्रॉनिक स्टोर में उपयोगकर्ता, उत्पाद और आदेश के लिए मॉडल हो सकते हैं।



सबसे सरल संस्करण में, मॉडल खेतों और उनके मूल्यों का एक सेट है। Ext JS 3 के साथ काम करने वाले किसी व्यक्ति ने Ext.data.Record वर्ग का उपयोग किया, जो कि Ext.data.Model का पूर्ववर्ती था। आइए देखें कि अब हम कैसे मॉडल बना रहे हैं:

Ext.regModel('User', { fields: [ {name: 'id', type: 'int'}, {name: 'name', type: 'string'} ] });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

आमतौर पर, मॉडल का उपयोग रिपॉजिटरी के साथ संयोजन में किया जाता है - मॉडल उदाहरणों के सेट। वेयरहाउस की घोषणा करना और उसमें डेटा लोड करना सरल है:

 new Ext.data.Store({ model: 'User', proxy: { type: 'ajax', url : 'users.json', reader: 'json' }, autoLoad: true });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

वह सब कुछ जो 'user.json' पते से उपयोगकर्ता मॉडल के उदाहरणों का एक सेट डाउनलोड करने के लिए किया जाना चाहिए। हम डेटा को ट्रांसकोड करने के लिए निर्दिष्ट पते और Ext.data.Reader क्लास में डेटा पढ़ने के लिए AjaxProxy का उपयोग करके हमारे वेयरहाउस को कॉन्फ़िगर करते हैं। हमारे मामले में, सर्वर JSON प्रारूप में एक प्रतिक्रिया देता है, इसलिए हमने प्रतिक्रिया पढ़ने के लिए JsonReader तैयार किया।



स्टोरेज का उपयोग करके, आप स्थानीय और दूरस्थ रूप से डेटा को छांट, फ़िल्टर और समूह कर सकते हैं। एक्सटी जेएस के चौथे संस्करण में एक अलग ग्रुपिंगस्टोर वर्ग का अभाव है, क्योंकि मानक संग्रहण कई छंटाई, छानने और रिकॉर्ड के समूह के लिए उपयुक्त है:

 new Ext.data.Store({ model: 'User', sorters: ['name', 'id'], filters: { property: 'name', value : 'Ed' }, groupers: { property : 'age', direction: 'ASC' } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

हमारे द्वारा बनाए गए वेयरहाउस में, डेटा को पहले नाम (फ़ील्ड नाम), और फिर फ़ील्ड आईडी द्वारा क्रमबद्ध किया जाएगा; रिकॉर्ड फ़िल्टर किए जाएंगे ताकि केवल 'एड' नाम वाले उपयोगकर्ता ही रहें और आयु (आयु क्षेत्र) द्वारा समूहीकृत हों। यदि आवश्यक हो, तो आप स्टोर एपीआई का उपयोग करके आसानी से किसी भी समय छँटाई, छानने या समूहीकरण के विकल्प बदल सकते हैं।

प्रॉक्सी

ऊपर, हमने देखा कि कैसे रिपोजिटरी डेटा को लोड करने के लिए प्रॉक्सी का उपयोग करती है और कैसे सर्वर प्रतिक्रिया को पार्स करने के लिए रीडर कक्षाओं का उपयोग करने के लिए प्रॉक्सी को कॉन्फ़िगर किया जा सकता है। तीसरे संस्करण की तुलना में, एक्सट जेएस 4 में एक संरचनात्मक परिवर्तन है: रिपॉजिटरी में अब रीडर और राइटर वर्गों के संदर्भ शामिल नहीं हैं जिन्हें प्रॉक्सी में पोर्ट किया गया है। यह दृष्टिकोण हमें एक अविश्वसनीय लाभ प्रदान करता है - प्रॉक्सी को अब सीधे मॉडल में निर्दिष्ट किया जा सकता है:

 Ext.regModel('User', { fields: ['id', 'name', 'age'], proxy: { type: 'rest', url : '/users', reader: { type: 'json', root: 'users' } } }); //   new Ext.data.Store({ model: 'User' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

 //     (User) var User = Ext.getModel('User'); var ed = new User({ name: 'Ed Spencer', age : 25 }); //    ,      //       - RestProxy,   //  POST       /users ed.save({ success: function(ed) { console.log("Saved Ed! His ID is "+ ed.getId()); } }); //  123  -    (   GET- /users/123) User.load(123, { success: function(user) { console.log("Loaded user 123: " + user.get('name')); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

हम आपके ध्यान में HTML 5 की क्षमताओं का उपयोग करने वाले कई नए प्रकार के प्रॉक्सी भी लाते हैं - LocalStorageProxy और SessionStorageProxy। हालाँकि पुराने ब्राउज़र HTML 5 नवाचारों का समर्थन नहीं करते हैं, लेकिन नए प्रॉक्सी इतने उपयोगी हैं कि कई एप्लिकेशन उनके उपयोग से लाभान्वित होंगे। यहां तक ​​कि अगर हमारे पास एक प्रॉक्सी नहीं है जो आपकी आवश्यकताओं को पूरा करती है, तो आप बस अपना खुद का बना सकते हैं।

संचार

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

 Ext.regModel('User', { fields: ['id', 'name'], hasMany: 'Posts' }); Ext.regModel('Post', { fields: ['id', 'user_id', 'title', 'body'], belongsTo: 'User', hasMany: 'Comments' }); Ext.regModel('Comment', { fields: ['id', 'post_id', 'name', 'message'], belongsTo: 'Post' });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

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

 //   ID 123     User User.load(123, { success: function(user) { console.log("User: " + user.get('name')); user.posts().each(function(post) { console.log("Comments for post: " + post.get('title')); post.comments().each(function(comment) { console.log(comment.get('message')); }); }); } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

कई सारे एक-से-एक रिश्ते (हैमनी) एक नए फ़ंक्शन में बदल जाते हैं जो मॉडल में जोड़ा जाता है। हम इंगित करते हैं कि प्रत्येक उपयोगकर्ता के पास कई रिकॉर्ड हैं। यह संबंध user.posts () फ़ंक्शन में वर्णित है, जिसे हम पिछले कोड टुकड़ा में मिले थे। इस फ़ंक्शन को कॉल करने से रिकॉर्ड मॉडल के साथ काम करने के लिए कॉन्फ़िगर की गई वॉल्ट वापस आ जाएगी। बदले में, नोट्स मॉडल में एक टिप्पणी () फ़ंक्शन है, क्योंकि टिप्पणियाँ मॉडल के साथ कई-से-एक संबंध निर्दिष्ट है।



शायद आप इस तथ्य से आश्चर्यचकित थे कि हमने User.load को कॉल करने के लिए 'सक्सेस' हैंडलर को क्यों सेट किया है, लेकिन हम उपयोगकर्ता के पोस्ट और टिप्पणियों को एक्सेस करते समय ऐसा नहीं करते हैं। यह माना जाता है कि सभी डेटा को दूरस्थ सर्वर से अतुल्यकालिक रूप से डाउनलोड किया जाता है। इस तथ्य का तात्पर्य विशेष सफलता-संचालकों के उपयोग से है, जिन्हें अंतिम और सफल डेटा लोडिंग के समय स्वचालित रूप से कहा जाता है - जैसा कि ऊपर उल्लेख किया गया है।

संबंधित डेटा डाउनलोड करें

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

 { id: 1 name: 'Ed', posts: [ { id : 12, title: 'All about data in Ext JS 4', body : 'One of the areas that has seen the most improvement in Ext JS 4...', comments: [ { id: 123, name: 'S Jobs', message: 'One more thing' } ] } ] }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

आप किसी भी स्रोत से डेटा प्राप्त करने के लिए प्रॉक्सी मॉडल को आसानी से कॉन्फ़िगर कर सकते हैं, और रीडर कक्षाएं सबसे जटिल प्रतिक्रिया प्रारूपों से निपटने में मदद करेंगी। एक्सट जेएस 3 के साथ शुरू, मॉडल और रिपॉजिटरी व्यापक रूप से ढांचे के भीतर घटकों द्वारा उपयोग किया जाता है, विशेष रूप से - टेबल्स (ग्रिड), पेड़ (ट्रेस) और फॉर्म (फॉर्म)।

अवसर प्रदर्शन

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



स्नेहा टच और एक्सट जेएस की दुनिया से अधिक समाचार जानने के लिए, मैं आपको हमारे मासिक समाचार पत्र की सदस्यता लेने का सुझाव देता हूं, जिसमें आमतौर पर ऐसे लेख होते हैं जो आपको कहीं और नहीं मिलेंगे (यहां तक ​​कि हमारे ब्लॉग पर भी)।