क्या AngularJS नियंत्रकों में कार्यक्षमता वाली वस्तुओं को बनाने या ढीले कार्यों को बनाना बेहतर है?

Question

कहो हम अपनी साइट पर तीन बटन है:

<button>Like</button> 
<button>Dislike</button> 
<button>Flag</button> 

प्रत्येक बटन अपने-अपने कार्यों कॉल करेगा:

<button ng-click="like()">Like</button> 
<button ng-click="dislike()">Dislike</button> 
<button ng-click="flag()">Flag</button> 

और नियंत्रक में यह कुछ इस तरह दिख सकता है:

$scope.like = function() { 
    return likes + 1; 
} 

$scope.dislike = function() { 
    return dislikes + 1; 
} 

$scope.flag = function() { 
    return flags + 1; 
} 

बहुत से दर्शक के साथ $scope को छेड़छाड़ करने के बाद प्रदर्शन के लिए बुरा है, यह बेहतर नहीं होगा:

$scope.actions = { 
    like: function() { 
    return likes + 1; 
    }, 
    dislike: function() { 
    return dislikes + 1; 
    }, 
    flag: function() { 
    return flags + 1; 
    } 
} 

और फिर इसे पसंद का उपयोग कर:

<button ng-click="actions.like()">Like</button> 
<button ng-click="actions.dislike()">Dislike</button> 
<button ng-click="actions.flag()">Flag</button> 

कौन सा करने से पर नजर रखने वालों की संख्या कम हो जाएगा, यह भी वर्गीकृत किया कार्यक्षमता बनाने के लाभ दे रही है। बेहतर पठनीयता के लिए अग्रणी भी।

मेरे दृष्टिकोण से यह आपके नियंत्रक में ढीले कार्यों की तुलना में अधिक समझ में आता है, खासकर जब सभी नियंत्रकों को हल्के वजन नहीं बनाया जा सकता है।

यह बात जो मुझे इस दृष्टिकोण पर संदेह करेगी वह यह है कि मैंने कभी भी इस विधि का उपयोग करके किसी भी उदाहरण में कभी नहीं देखा है। क्या इसका कोई कारण है?

आमतौर पर प्रयुक्त डिज़ाइन पैटर्न, सर्वोत्तम अभ्यास और प्रदर्शन के संदर्भ में उपयोग करने के लिए कौन सा दृष्टिकोण बेहतर होगा?

संपादित करें: सुझाव दिए गए हैं कि मुझे इसके बजाय controller as वाक्यविन्यास का उपयोग करना चाहिए, मुझे इसके बारे में पता है लेकिन यह सीधे मेरे प्रश्न का उत्तर नहीं देता है। जैसा कि मैं जानना चाहता हूं कि ऊपर वर्णित दो विधियों में से कौन सा तरीका controller as वाक्यविन्यास का उपयोग नहीं कर रहा है।

Answer 1

मैं सिर्फ दोनों अपने दृष्टिकोण बाहर की कोशिश की है और प्रदर्शन में कोई अंतर नहीं देख सकता था। यह दो मुख्य व्यावहारिक कारणों के लिए है:

1. यह कोणीय आवेदनों की परीक्षण के प्रदर्शन के लिए मुश्किल है, How to performance test an AngularJS Web Application? देखते हैं।

2. यह केवल बड़े पैमाने पर आवेदन पर प्रदर्शन के लिए परीक्षण करने के लिए समझ में आता है, न कि ऐसे छोटे उदाहरणों पर।

मैं समझता हूं कि आपका प्रश्न अवधारणा के सबूत के बारे में है। तो, सिद्धांत रूप में, आपकी दूसरी विधि बेहतर है क्योंकि यह $scope को दूसरे की तुलना में कम करती है और इसकी अनुशंसा की जाती है।

भविष्य में, मैं controllerAs वाक्यविन्यास का प्रयास करूंगा। वैकल्पिक रूप से यह भी दिलचस्प है if you're not a fan of that syntax। उम्मीद है कि यह मदद करता है।

Answer 2

मैं Jesús Quintana से सहमत हूं - दर्शकों की संख्या में बदलाव नहीं है।

इसके अलावा, मैं आपको 'नियंत्रक के रूप में' वाक्यविन्यास का उपयोग करने की सलाह देता हूं। अपने पृष्ठ में कुछ $ स्कोप के लिए काम करना अधिक सुविधाजनक है।

उदाहरण के लिए

, अपने मार्कअप में:

<div ng-controller='PageController as page'> 
    <button ng-click="page.like()">Like</button> 
    <button ng-click="page.dislike()">Dislike</button> 
    <button ng-click="page.flag()">Flag</button> 
</div> 

और कोड में:

myApp.controller('PageController', function() { 
    var page = this; 

    page.like = function() { 
     return page.likes + 1; 
    } 

    page.dislike = function() { 
     return page.dislikes + 1; 
    } 

    page.flag = function() { 
     return page.flags + 1; 
    } 
});