AngularJS बनाम KnockoutJS

शुभ दोपहर, प्रिय, हब्बोक्लोवेकी।
इस लेख में मैं आपके साथ AngularJS और नॉकआउट जैसे ढांचे के साथ अपने अनुभव को साझा करना चाहता हूं।
लेख उन लोगों के लिए दिलचस्प होगा जो जावास्क्रिप्ट से परिचित हैं और कम से कम एक उल्लेखित रूपरेखा का विचार रखते हैं और स्वाभाविक रूप से अपने क्षितिज को व्यापक बनाना चाहते हैं।

सिंहावलोकन

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

विशेषताएं

• डेटा-बाइंडिंग: UI और डेटा मॉडल को लिंक करने का एक सरल और अच्छा तरीका।
• डेवलपर के लिए टूल का एक शक्तिशाली सेट (विशेष रूप से AngularJS के साथ, नॉकआउट में एक खराब सेट है)
• आसानी से विस्तार योग्य टूलकिट

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

प्रलेखन के अनुसार, कोणीय अनुप्रयोगों को मॉड्यूल में विभाजित करके संरचना प्रदान करता है। प्रत्येक मॉड्यूल में शामिल हैं:

• फ़ंक्शन मॉड्यूल को कॉन्फ़िगर करना - यह मॉड्यूल लोड करने के तुरंत बाद शुरू होता है;
• नियंत्रक;
• सेवाएं;
• निर्देशों।

कोणीय की समझ में एक नियंत्रक एक फ़ंक्शन है जो डेटा मॉडल का निर्माण करता है। $ स्कोप सेवा का उपयोग मॉडल बनाने के लिए किया जाता है, लेकिन इसके बारे में थोड़ा आगे। निर्देश HTML के लिए एक्सटेंशन हैं।
बदले में, नॉकआउट ने मॉडलव्यू में विभाजित करते हुए, एप्लिकेशन को बनाने की पेशकश की, जो मॉडल और कंट्रोलर का मिश्रण है। Ko.bindingHandlers ऑब्जेक्ट के भीतर डेटा-बाइंडिंग हैं, जो कोणीय निर्देशों के अनुरूप हैं। मॉडल और उसके प्रतिनिधित्व के बीच संबंध बनाने के लिए अवलोकन योग्य और अवलोकन योग्य एरे का उपयोग किया जाता है।
प्रतिरूपकता की बात करें तो एएमडी टेम्पलेट को याद नहीं किया जा सकता है - एसिंक्रोनस मॉड्यूल परिभाषा। कोणीय और नॉकआउट में अपना स्वयं का एएमडी टेम्पलेट कार्यान्वयन नहीं है। मैं आपको आवश्यकताएँ पुस्तकालय का उपयोग करने की सलाह देता हूं। उसने कोणीय और नॉकआउट दोनों के साथ संगतता के मामले में खुद को बहुत अच्छी तरह से साबित कर दिया है। आप इसके बारे में और अधिक रोचक जानकारी यहाँ पा सकते हैं: http://www.kendoui.com/blogs/teamblog/posts/13-05-08/requirejs-fundamentals.aspx और http://habrahabr.ru/post/152833/ ।

मानकीकरण

(इतनी खूबसूरत तस्वीर के लिए AngularJS डेवलपर्स का विशेष धन्यवाद)

फिलहाल, पहले से ही बड़ी संख्या में टेम्पलेट इंजन हैं। उदाहरण के लिए, jQuery के टेम्पलेट (दुर्भाग्य से, अब समर्थित नहीं है)। उनमें से अधिकांश सिद्धांत पर काम करते हैं: एक स्ट्रिंग के रूप में एक स्थिर टेम्पलेट लेते हैं, इसे डेटा के साथ मिलाते हैं, एक नई लाइन बनाते हैं, और परिणामस्वरूप स्ट्रिंग को आंतरिक HTML संपत्ति का उपयोग करके वांछित DOM तत्व में चिपकाते हैं। इस तरह के दृष्टिकोण का मतलब है कि किसी भी डेटा परिवर्तन के बाद हर बार टेम्पलेट री-रेंडरिंग। इस दृष्टिकोण में कई ज्ञात समस्याएं हैं, उदाहरण के लिए: उपयोगकर्ता इनपुट पढ़ना और उन्हें मॉडल से कनेक्ट करना, उपयोगकर्ता डेटा खोना, उन्हें अधिलेखित करने के कारण, डेटा और / या प्रस्तुति को अपडेट करने की पूरी प्रक्रिया का प्रबंधन करना। इसके अलावा, यह दृष्टिकोण, मेरी राय में, उत्पादकता को नकारात्मक रूप से प्रभावित करता है।
कोणीय और नॉकआउट एक अलग दृष्टिकोण लेते हैं। अर्थात्, दो तरह से बाध्यकारी। इस दृष्टिकोण की एक विशिष्ट विशेषता मॉडल तत्वों के साथ एक पृष्ठ तत्व के द्विदिश संचार का निर्माण है। यह दृष्टिकोण आपको काफी स्थिर डोम प्राप्त करने की अनुमति देता है। नॉकआउट में, अवलोकन योग्य और अवलोकन योग्य कार्यों का उपयोग करके द्विदिश संचार को लागू किया जाता है। टेम्पलेट का विश्लेषण करने के लिए, jQuery HTML पार्सर का उपयोग किया जाता है (यदि जुड़ा हुआ है, अन्यथा एक समान देशी पार्सर)। उल्लिखित कार्यों का परिणाम एक ऐसा फ़ंक्शन है जो मॉडल तत्व की वर्तमान स्थिति को एन्क्रिप्ट करता है और दो-तरफ़ा बाइंडिंग के लिए जिम्मेदार है। यह कार्यान्वयन, मेरी राय में, बहुत सुविधाजनक नहीं है क्योंकि मॉडल की स्थिति को कॉपी करने से जुड़ी एक समस्या है: फ़ंक्शन स्कोप की प्रतिलिपि नहीं बनाई गई है, इसलिए आपको इसे फ़ंक्शन के रूप में संदर्भित करके पहले मॉडल तत्व से डेटा प्राप्त करना होगा और उसके बाद ही परिणाम का क्लोन करना होगा।
कोणीय में, द्विदिश संचार सीधे संकलक ($ संकलन सेवा) द्वारा बनाया गया है। डेवलपर को अवलोकन जैसे कार्यों का उपयोग करने की आवश्यकता नहीं है। मेरी राय में, यह बहुत अधिक सुविधाजनक है क्योंकि अतिरिक्त डिजाइन का उपयोग करने की कोई आवश्यकता नहीं है और मॉडल तत्व की स्थिति की नकल करते समय कोई समस्या नहीं है।
कोणीय और नॉकआउट में टेम्पलेट इंजन के कार्यान्वयन में महत्वपूर्ण अंतर यह है कि तत्वों को किस तरह से प्रदान किया जाता है: कोणीय DOM तत्वों को उत्पन्न करता है, जो तब इसका उपयोग करता है; नॉकआउट - स्ट्रिंग्स और इनर-HTML को जेनरेट करता है। इसलिए, बड़ी संख्या में तत्वों को उत्पन्न करना नॉकआउट को अधिक समय लगता है (एक अच्छा उदाहरण थोड़ा कम है)।

डेटा मॉडल

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

डेटा बाइंडिंग

नॉकआउट में बाइंडिंग, कोणीय में निर्देश का उपयोग एचटीएमएल सिंटैक्स का विस्तार करने के लिए किया जाता है, अर्थात, ब्राउज़र को नई ट्रिक्स सिखाने के लिए। मैं डेटा-बाइंडिंग और निर्देशों की अवधारणा का विस्तार से विश्लेषण नहीं करूंगा। मैं केवल यह नोट करना चाहता हूं कि डेटा को प्रदर्शित करने के लिए डेटा-बाइंडिंग एकमात्र तरीका है और प्रस्तुति के साथ इसका कनेक्शन है।
लेख में इस मुद्दे पर अधिक विस्तार से चर्चा की गई है:
AngularJS: http://habrahabr.ru/post/164493/ , http://habrahabr.ru/post/179755/ , http://habrahabr.ru/post/180365/
नॉकआउटJS: http://www.knockmeout.net/2011/07/another-look-at-custom-bindings-for.html
मैं कोणीय में फिल्टर की उपस्थिति का भी उल्लेख करना चाहूंगा। फ़िल्टर का उपयोग स्क्रीन पर प्रदर्शित डेटा को प्रारूपित करने के लिए किया जाता है। दुर्भाग्य से, नॉकआउट हर चीज के लिए बाइंडिंग का उपयोग करता है।

उदाहरण

फीका-एनीमेशन में

AngularJS: http://jsfiddle.net/yVEqU/

var ocUtils = angular.module("ocUtils", []); ocUtils.directive('ocFadeIn', [function () { return { restrict: 'A', link: function(scope, element, attrs) { $(element).fadeIn("slow"); } }; }]); function MyCtrl($scope) { this.$scope = $scope; $scope.items = []; $scope.add = function () { $scope.items.push('new one'); } $scope.pop = function () { $scope.items.pop(); } } 

नॉकआउट: http://jsfiddle.net/fH3TY/

 var MyViewModel = { items: ko.observableArray([]), fadeIn: function (element) { console.log(element); $(element[1]).fadeIn(); }, add: function () { this.items.push("fade me in aoutomatically"); }, pop: function () { this.items.pop(); } }; ko.applyBindings(MyViewModel, $("#knockout")['0']); 

मुझे लगता है कि इस उदाहरण की तुलना में कुछ सरल खोजना मुश्किल होगा, यह पूरी तरह से फ्रेमवर्क के सिंटैक्स को प्रदर्शित करता है।

फीका-बाहर एनीमेशन

AngularJS: http://jsfiddle.net/SGvej/

 var FADE_OUT_TIMEOUT = 500; var ocUtils = angular.module("ocUtils", []); ocUtils.directive('ocFadeOut', [function () { return { restrict: 'A', link: function(scope, element, attrs) { scope.$watch(attrs["ocFadeOut"], function (value) { if (value) { $(element).fadeOut(FADE_OUT_TIMEOUT); } }); } }; }]); function MyCtrl($scope, $timeout) { this.$scope = $scope; $scope.items = []; $scope.add = function () { $scope.items.push({removed: false}); } $scope.pop = function () { $scope.items[$scope.items.length - 1].removed = true; $timeout(function () { $scope.items.pop(); console.log($scope.items.length); }, FADE_OUT_TIMEOUT); } } 

नॉकआउट: http://jsfiddle.net/Bzb7f/1/

 var MyViewModel = { items: ko.observableArray([]), fadeOut: function (element) { console.log(element); if (element.nodeType === 3) { return; } $(element).fadeOut(function () { $(this).remove(); }); }, add: function () { this.items.push("fade me in aoutomatically"); }, pop: function () { this.items.pop(); } }; ko.applyBindings(MyViewModel, $("#knockout")['0']); 

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

पॉपअप

AngularJS: http://jsfiddle.net/vmuha/EvvY7/ , http://angular-ui.imtqy.com/bootstrap/ (दूसरे लिंक में आपको बहुत सारे अच्छे और उपयोगी उपाय मिलेंगे)

 var ocUtils = angular.module("ocUtils", []); function MyCtrl($scope, $compile) { var me = this; this.$scope = $scope; $scope.open = function (data) { var popupScope = $scope.$new(); popupScope.data = data; me.popup = $("<div class=\"popup\">{{data}}<br /><a href=\"#\" ng-click=\"close($event)\"> Close me</a></div>"); $compile(me.popup)(popupScope); $("body").append(me.popup); } $scope.close = function () { if (me.popup) { me.popup.fadeOut(function () { $(this).remove(); }); } } } 

नॉकआउट: http://jsfiddle.net/vmuha/uwezZ/ , http://jsfiddle.net/vmuha/HbVPp/

 var jQueryWidget = function(element, valueAccessor, name, constructor) { var options = ko.utils.unwrapObservable(valueAccessor()); var $element = $(element); setTimeout(function() { constructor($element, options) }, 0); //$element.data(name, $widget); }; ko.bindingHandlers.dialog = { init: function(element, valueAccessor, allBindingsAccessor, viewModel) { console.log("init"); jQueryWidget(element, valueAccessor, 'dialog', function($element, options) { console.log("Creating dialog on " + $element); return $element.dialog(options); }); } }; ko.bindingHandlers.dialogcmd = { init: function(element, valueAccessor, allBindingsAccessor, viewModel) { $(element).button().click(function() { var options = ko.utils.unwrapObservable(valueAccessor()); $('#' + options.id).dialog(options.cmd || 'open'); }); } }; var viewModel = { label: ko.observable('dialog test') }; ko.applyBindings(viewModel); 

पॉपअप को लागू करने के कई तरीके हैं। निर्देश या बाध्यकारी और एक ViewModel या मॉड्यूल के हिस्से के रूप में।
कोणीय में, पॉपअप को $ गुंजाइश का एक नया उदाहरण बनाने की आवश्यकता होगी, जैसा कि मैंने ऊपर उल्लेख किया है, और टेम्पलेट को संकलित करने के लिए $ संकलन सेवा का उपयोग करें।
नॉकआउट में, आपको सबसे अधिक संभावना है कि एक नया मॉडल दृश्य बनाएं और मॉडल और दृश्य को जोड़ने के लिए applyBindings फ़ंक्शन को कॉल करें। मुझे लगता है कि यह ध्यान देने योग्य है कि अगर पॉपअप के लिए एक नया डेटा मॉडल बनाया जाता है, तो नॉकआउट को पॉपअप टेम्पलेट से $ rootModel तक पहुंचने में समस्या होगी। नॉकआउट में डेटा मॉडल का पदानुक्रम क्रमशः DOM तत्वों पर बनाया गया है, यदि पॉपअप कंटेनर अनुप्रयोग के लिए कंटेनर के बाहर है, तो पॉपअप में $ rootModel तक पहुंच नहीं होगी।

मूल्य स्वरूपण

AngularJS: http://jsfiddle.net/vmuha/k6ztB/1/
नॉकआउट: http://jsfiddle.net/vmuha/6yqDw/

उत्पादकता

हम प्रदर्शन के मुद्दे की ओर मुड़ते हैं। 2 परीक्षण किए गए: "हैलो वर्ल्ड!" की ठंडी शुरुआत और 1000 तत्वों की एक सरणी का प्रतिपादन।
सभी आरेखों पर, लंबवत - मिलीसेकंड, क्षैतिज रूप से प्रयोग की संख्या।


यहां यह स्पष्ट रूप से देखा जाता है कि नॉकआउट की ठंड शुरू से कोणीय की तुलना में बहुत तेज है।


लेकिन जब यह प्रतिपादन करने की बात आती है, तो कोणीय स्पष्ट रूप से यहाँ के नेता हैं। जैसा कि हम 1000 लाइनों को प्रस्तुत करने के लिए देखते हैं, नॉकआउट 2.5 सेकंड तक खर्च करता है जबकि इस कार्य को पूरा करने के लिए कोणीय में 500 मिलीसेकंड से कम है। इसके अलावा, उपयोगकर्ता के स्क्रीन पर रेंडर किए गए तत्वों को प्रदर्शित करने में भी अलग-अलग समय लगता है: कोणीय के लिए यह 1-3 सेकंड है, और नॉकआउट के लिए यह 14-20 सेकंड है। ऐसा इसलिए है क्योंकि नॉकआउट तार उत्पन्न करता है और कोणीय डोम तत्व उत्पन्न करता है।

सारांश

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

पुनश्च:

मुझे उम्मीद है कि यह लेख सभी के लिए दिलचस्प होगा। मुझे आपकी टिप्पणियों, समीक्षाओं और रचनात्मक आलोचना को पढ़ने में खुशी होगी! मैं आप सभी के सुखद काम की कामना करता हूँ!