कस्टम फ़िल्टर बनाम नियंत्रक प्रदर्शन की तुलना में फिल्टर समारोह

Question

मान लीजिए मैं 5000 वस्तुओं (बूलियन मूल्यों के साथ) जो मैं टेम्पलेट में ng-repeat करने के लिए है की एक सरणी है:

$scope.arr = [ 
    { 
     "value": true 
    }, 
    { 
     "value": false 
    }, 
    { 
     "value": false 
    } 
    //and so on 
] 

अब, मैं फिल्टर करने के लिए इस ng-repeated सरणी चाहते हैं एक गतिशील चर के आधार पर, 'show_filter' कहें, जिसे मैं कहीं और स्थापित कर रहा हूं।

यदि 'show_filter' को 'सभी' पर सेट किया गया है, तो मैं सभी ऑब्जेक्ट्स दिखाना चाहता हूं। यदि यह गलत (बूलियन मान) पर सेट है तो मैं वस्तुओं को 'मान' कुंजी सेट के साथ गलत दिखाना चाहता हूं। जब 'show_filter' सत्य पर सेट किया जाता है तब भी वही होता है।

1. बिल्ड कस्टम फ़िल्टर:

फिल्टर:

मैं इस तरह छानने कार्य के लिए एक कस्टम फ़िल्टर लिखते थे

तो, दो दृष्टिकोण देखते हैं

app.filter('filterArr', function() { 
    return function(arr, show_filter) { 
     var filtered_arr = []; 
     if(show_filter != 'All') { //if show_filter is a boolean value 
      for(var i = 0; i < arr.length; i++) { 
       if(arr[i].value == show_filter) { 
        filtered_arr.push(arr[i]); 
       } 
      } 
      return filtered_arr; 
     } 
     else { 
      return arr; //return the entire array if show_filter is set to 'All' 
     } 
    } 
}) 

टेम्पलेट:

obj in arr | filterArr : show_filter 

2. लिखें नियंत्रक में एक फिल्टर समारोह:

फिल्टर:

$scope.filterObjects = function(arr) { 
    var filtered_arr = []; 
    if($scope.show_filter != 'All') { //if $scope.show_filter is a boolean value 
     for(var i = 0; i < arr.length; i++) { 
      if(arr[i].value == $scope.show_filter) { 
       filtered_arr.push(arr[i]); 
      } 
     } 
     return filtered_arr; 
    } 
    else { 
     return arr; //return the entire array if show_filter is set to 'All' 
    } 
} 

टेम्पलेट:

obj in filterObjects(arr) 

उपर्युक्त दो तरीकों में से कौन सा तेज़ होगा? मैंने प्रत्येक डायजेस्ट लूप के लिए हर बार कस्टम फ़िल्टर कोड निष्पादित किया है और न केवल $scope.show_filter में किए गए परिवर्तनों के लिए, जो मुझे काफी अक्षम मानने के लिए प्रेरित करता है। हालांकि मुझे यकीन नहीं है कि दोनों तरीकों के बीच तेज़ कौन सा है।

Answer 1

दोनों कार्यों को प्रत्येक पाचन चक्र में बुलाया जाएगा। यह दूसरे समारोह के लिए कुछ हद तक स्पष्ट है। filterObjects(arr) का वापसी मूल्य प्रत्येक कॉल पर अलग हो सकता है।

यह इतना स्पष्ट नहीं है कि फ़िल्टर प्रत्येक पाचन चक्र में क्यों कहा जाएगा। दस्तावेज निम्नलिखित में बताता है:

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

तो अगर न arr है और न ही show_filter परिवर्तन तो फिल्टर बुलाया नहीं किया जाना चाहिए, है ना? लेकिन यहां पकड़ है: arr में बदलाव का पता लगाना महंगा है।

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

एप्लिकेशन को तेज़ करने के लिए आपके पास दो विकल्प हैं। सबसे पहले केवल सरणी को फ़िल्टर करना आवश्यक है और फ़िल्टर किए गए सरणी को ng-repeat पर बेनकाब करना है। जैसे यदि आप एक मान दर्ज कर सकते हैं जिसके द्वारा सरणी फ़िल्टर की जाएगी, तो जब भी मान बदलता है तो सरणी फ़िल्टर करें।

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

<li ng-repeat="item in ::array | filter"> 

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