AngularJS में उदाहरणों के साथ वेब एप्लिकेशन में अंतहीन स्क्रॉलिंग

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

1. स्क्रॉलिंग का अनंत मार्ग

इसमें, लड़का कहता है कि उसे एंगुलर की टीम में Google में इंटर्नशिप मिली थी और उसे इस मुद्दे की जांच करने का काम सौंपा गया था। (मुझे खुशी है कि डेवलपर्स इसमें रुचि रखते हैं। मुझे आशा है कि जल्द ही अंतहीन स्क्रॉल के लिए देशी समर्थन देखने को मिलेगा)।

दो समाधान हैं: अच्छा पुराना पृष्ठांकन और अंतहीन स्क्रॉलिंग। इसके अलावा, अंतहीन स्क्रॉल दोनों आवश्यक डेटा को लोड कर सकते हैं और हटा सकते हैं जो पहले से ही देखा गया है, जिसे लागू किया गया है, उदाहरण के लिए, IOS से UITableView घटक में। लेखक ने इस घटक को एंगुलर के लिए फिर से बनाने की कोशिश की।



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

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

यह ध्यान दिया जाना चाहिए कि घटक सार्वभौमिक होना चाहिए और संपूर्ण ब्राउज़र विंडो और आंतरिक क्षेत्रों की स्क्रॉलिंग को संभालना चाहिए, अगर स्क्रॉलिंग स्थानीय हो।



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

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

उपयोगकर्ता वापस (ऊपर) स्क्रॉल कर सकता है और रिवर्स ऑर्डर में भी यही होता है। जो आइटम अंत में दिखाई नहीं देते हैं उन्हें पूल में रखा जाता है। अन्य वस्तुओं को डेटा स्टोर से लिया जाता है और पहले दृश्यमान आइटम से पहले रखा जाता है, और डेटा प्राप्त होने पर हटाए गए आइटम का पुन: उपयोग किया जाता है।

व्यूपोर्ट से बाहर निकलते ही वस्तुओं को हटाना एक अच्छा विचार नहीं है, क्योंकि यदि उपयोगकर्ता विपरीत दिशा में कई आइटम स्क्रॉल करता है तो आपको उनसे फिर से अनुरोध करना होगा। यह कैश में हाल ही में लोड की गई वस्तुओं को डालने के लिए समझ में आता है और केवल पुराने लोगों से सर्वर से फिर से अनुरोध करता है।



स्क्रोलर की सबसे महत्वपूर्ण विशेषताओं में से एक कई टेम्पलेट्स का समर्थन है , ताकि स्ट्रीम में अलग-अलग तत्व हो सकते हैं, उदाहरण के लिए, फेसबुक पर टेक्स्ट, फोटो, लिंक आदि जैसे तत्व।

न्यूनतम HTML एक घुमक्कड़ के लिए आवश्यक है:

<div ng-scroller> <div ng-scroller-repeat=”post in posts”> <div>{{post.author}}: {{post.text}}</div> </div> </div> 

ng-scroller साथ एक तत्व एक व्यूपोर्ट है, ng-scroller-repeat वाला एक तत्व एक कंटेनर (ऊपर दिए गए आरेख में नीला क्षेत्र) और एक आंतरिक टेम्पलेट तत्व है जिसे डुप्लिकेट किया जाएगा और प्रत्येक तत्व के लिए बनाए गए चाइल्ड स्कोप से जुड़ा होगा।

स्कोप की कुंजी, इस मामले में, डेटा स्टोर ऑब्जेक्ट को इंगित करना चाहिए जो आइटम क्वेरी करने के लिए निम्न इंटरफ़ेस को लागू करता है। यदि कुंजी किसी सरणी की ओर इशारा करती है, तो सुविधा के लिए यह एक लिपटे ऑब्जेक्ट को प्राप्त करता है जो आवश्यक इंटरफ़ेस को लागू करता है।

 IScrollerDataStore { void getRangeAfter(prev_id, length, function(Error, Array)); void getRangeBefore(next_id, length, function(Error, Array)); } 

यदि कई पैटर्न प्रदर्शित करना आवश्यक है, तो ng-if और ng-switch निर्देशों का उपयोग किया जाना चाहिए। ज्यादातर मामलों में, यह पर्याप्त है।

 <div ng-scroller> <div ng-scroller-repeat=”post in posts”> <div ng-class=”{ link: post.link, photo: post.photo }”> {{post.author}}: <a ng-if="post.link" href=”{{post.link}}”>{{post.link}}</a> <img ng-if="post.photo" ng-src=”{{post.photo}}”> </div> </div> 

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



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



पहले दो प्रकार शुद्ध सीएसएस में किए जा सकते हैं। उत्तरार्द्ध अधिक कठिन है, क्योंकि स्क्रॉलिंग के दौरान चिपचिपाहट गतिशील रूप से बदल जाती है।

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

इसे संभालने के दो तरीके हैं। या तो ng-scroller-repeat (यानी tweet.open = true ) का उपयोग करके बनाए गए तत्व के दायरे में स्थिति को संग्रहीत करें या किसी तरह व्यक्तिगत तत्वों के साथ पत्राचार तालिका बनाकर गुंजाइश में परिवर्तन को ट्रैक करें और यदि तत्व का उपयोग किया जाता है तो उन्हें पुनर्स्थापित करें फिर से।

फिलहाल, उन्होंने पहले दृष्टिकोण को सबसे सरल चुना है।

गिथब परियोजना , डेमो
जाहिर है, इस परियोजना को अंतिम रूप नहीं दिया गया है, लेकिन इसमें शामिल विचार काफी ठोस हैं।

2. AngularJS वर्चुअल स्क्रॉलिंग। भाग १ , भाग २

यहाँ, आदमी ने ng-repeat निर्देश को फिर से लिखा, जिसे sf-repeat कहा जाता है। एक लॉग लॉग के उदाहरण का उपयोग करके कार्य को पार्स करता है।

 <div style="overflow: scroll; height:200px;"> <ol> <li ng-repeat="event in eventLog">{{event.time}}: {{event.message}} </ol> </div> 

उनका कहना है कि डायनेमिक एप्लिकेशन में पेजेशन करना एक बुरी बात है, क्योंकि तत्वों को हटाते / जोड़ते समय, आपको यह सुनिश्चित करने की आवश्यकता है कि तत्वों को पृष्ठों पर सही ढंग से स्थानांतरित किया गया है, कोई डुप्लिकेट या खोए हुए रिकॉर्ड नहीं हैं।

एक फिल्टर समस्या को हल करने की कोशिश कर रहा है

 angular.module('sf.virtualScroll').filter('sublist', function(){ return function(input, range, start){ return input.slice(start, start+range); }; }); 

 <div style="overflow: scroll; height:200px;"> <ol> <li ng-repeat="event in eventLog|sublist:rows:offset">{{event.time}}: {{event.message}}</li> </ol> </div> 

एक निर्देश में एक अभिव्यक्ति को पास करना दो भागों में विभाजित है: event के मूल्य के लिए एक पहचानकर्ता और संग्रह के लिए एक पहचानकर्ता है। संग्रह पहचानकर्ता की गणना हर बार एक गंदे चेक के दौरान और पिछले मूल्य के साथ की जाती है। इस प्रकार, केवल दृश्यमान श्रेणी की गणना की जाती है। यदि संग्रह बदल गया है, तो स्क्रीन को अपडेट किया गया है और यदि क्षेत्र में मान बदल गया है, तो सूची की दृश्यमान स्थिति बदल जाती है।

यह उपयोगकर्ता को स्क्रॉल स्थिति को बदलने की क्षमता देने के लिए बना हुआ है।

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

यहाँ लेखक तत्व की औसत ऊँचाई लेने और तत्वों की संख्या से गुणा करने का सुझाव देता है। यह रोल करता है, लेकिन उन स्थितियों में समस्या जहां तत्वों का आकार बहुत अलग रहता है।

अपने स्क्रॉल विजेट बनाता है:

 <div style="overflow: scroll; height:200px;"> <div sf-scroller="y = 0 to eventLog.length" ng-model="slicePosition"></div> </div> 

एक श्रेणी अभिव्यक्ति (y = 0 to eventLog.length) पार्स करना

 function parseRangeExpression (expression) { var match = expression.match(/^(x|y)\s*(=|in)\s*(.+) to (.+)$/); if( !match ){ // throw an informative Error. } return { axis: match[1], lower: match[3], upper: match[4] }; } 

आदेश

 var mod = angular.module('sf.virtualScroll'); mod.directive("sfScroller", function(){ //function parseRangeExpression ... return function(scope, element, attrs){ // ... }; }); 

वह इस दृष्टिकोण की कमियों को नोट करता है: डेवलपर को अपना स्क्रॉलबार बनाना होगा, लेकिन उपयोगकर्ता के लिए यह अभी भी मूल नहीं लगेगा।

ng-repeat को फिर से करने का निर्णय करता है , इसे पार्स करता है ।

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

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

हटाते समय DOM तत्व की स्थिति को बचाने का निर्णय नहीं करता है, क्योंकि राज्य को मॉडल में संग्रहीत किया जाना चाहिए (पिछले लेखक ने ऐसा ही किया था)

ng-repeat की एक और सूक्ष्मता यह है कि संग्रह एक ऑब्जेक्ट हो सकता है और तत्वों को for(key in collection) का उपयोग करके प्रदर्शित किया जाएगा। क्योंकि इस वजह से, अनुक्रमित और तत्वों की व्यवस्था के साथ समस्याएं हैं, केवल सरणियों के साथ प्राप्त करने का निर्णय लेता है।

अपने sf-repeat वर्णन करता है, कहता है कि तत्वों को सर्वर से निश्चित भागों में आना चाहिए।



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

व्यूपोर्ट की ऊंचाई भी CSS से ली गई है।

आदेश

 var mod = angular.module('sf.virtualScroll'); mod.directive("sfVirtualRepeat", function(){ return { transclude: 'element', priority: 1000, terminal: true, compile: sfVirtualRepeatCompile }; // ... }); 

संकलन समारोह

 function sfVirtualRepeatCompile(element, attr, linker) { var ident = parseRepeatExpression(attr.sfVirtualRepeat), LOW_WATER = 100, HIGH_WATER = 200; return { post: sfVirtualRepeatPostLink }; // ... } 

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

ऑब्जर्वर एल्गोरिथ्म को नई सक्रिय सीमा की मौजूदा के साथ तुलना करने और यह तय करने के लिए कम किया जा सकता है कि कौन सी रेखाओं को नष्ट करना है और किसे बनाना है। किसी विशिष्ट स्थान पर तत्वों की व्यवस्था पूर्ण तत्व या पहले तत्व के इंडेंटेशन द्वारा की जा सकती है। लेखक इंडेंट है।

sf.virtualScroll sf-virtual-repeat डायरेक्टिव github पर sf.virtualScroll मॉड्यूल का हिस्सा है। स्रोत , बोवर घटक , डेमो ।

इस समाधान के साथ मुख्य समस्या यह है कि आपको सीएसएस का उपयोग करने की आवश्यकता है।

---

लेख अनंत स्क्रॉलिंग की समस्या को हल करने के लिए अच्छी तरह से दृष्टिकोण का वर्णन करते हैं, लेकिन अभी तक इष्टतम समाधान नहीं मिला है। टिप्पणियों में कुछ उपयोगी देखने की उम्मीद है

PS लिंक्डइन डेवलपर रिसर्च
पीपीएस प्रश्न टोस्टर पर । दिलचस्प जवाब हैं।