AngularJS jQuery से बेहतर क्या करता है?



(1)

मैं मुख्य रूप से jQuery लाइब्रेरी का उपयोग कर रहा हूं और अभी AngularJS का उपयोग करना शुरू कर दिया है। मैंने कोणीय का उपयोग करने के तरीके पर कुछ ट्यूटोरियल पढ़े हैं, लेकिन मुझे यह नहीं पता कि क्यों या कब इसका उपयोग करना है, या सिर्फ jQuery का उपयोग करने के मुकाबले मुझे क्या लाभ मिल सकते हैं।

ऐसा लगता है कि कोणीय आपको एमवीसी सोचता है, जिसका शायद मतलब है कि आप अपने वेबपृष्ठ को टेम्पलेट + डेटा संयोजन के रूप में देखते हैं। जब भी आपको लगता है कि आपके पास गतिशील डेटा होगा, तो आप {{data bindings}} उपयोग करते हैं। कोणीय आपको एक $ स्कोप हैंडलर प्रदान करेगा, जिसे आप स्थिर रूप से या वेब सर्वर पर कॉल के माध्यम से पॉप्युलेट कर सकते हैं। यह विशेष रूप से वेबपृष्ठों को डिजाइन करने के जेएसपी तरीके के समान दिखाई देता है। क्या मुझे इसके लिए कोणीय की आवश्यकता है?

सरल डोम मैनिपुलेशन के लिए, जिसमें डेटा मैनिपुलेशन शामिल नहीं है (उदाहरण: माउसहोवर पर रंग परिवर्तन, छुपाएं / क्लिक पर तत्व दिखाना), jQuery या वेनिला जेएस पर्याप्त और क्लीनर है। यह मानता है कि कोणीय के एमवीसी में मॉडल कुछ भी है जो पृष्ठ पर डेटा को प्रतिबिंबित करता है , और इसलिए, रंग, प्रदर्शन / छुपा आदि जैसे सीएसएस गुण मॉडल को प्रभावित नहीं करते हैं। क्या कोणीय को डीओएम मैनिप्लेशंस के लिए jQuery या वेनिला जेएस पर कोई लाभ है?

कोणीय क्या कर सकता है जो प्लगइन के साथ jQuery के साथ क्या कर सकता है इसकी तुलना में विकास के लिए उपयोगी बनाता है?


अनिवार्य तथ्य

जब भी आपको लगता है कि आपके पास गतिशील डेटा होगा, तो आप अपना वेबपेज बनाने के लिए जाते हैं, और {{data bindings}} डालते रहते हैं। कोणीय आपको एक $ स्कोप हैंडलर प्रदान करेगा, जिसे आप पॉप्युलेट कर सकते हैं (स्थिर रूप से या वेब सर्वर पर कॉल के माध्यम से)।

यह डेटा बाध्यकारी की एक अच्छी समझ है। मुझे लगता है कि आपको वह मिल गया है।

डोम मैनिपुलेशन

सरल डोम मैनिपुलेशन के लिए, जिसमें डेटा मैनिपुलेशन शामिल नहीं है (उदाहरण: माउसहोवर पर रंग परिवर्तन, छुपाएं / क्लिक पर तत्व दिखाना), jQuery या पुराना स्कूल जेएस पर्याप्त और क्लीनर है। यह मानता है कि कोणीय के एमवीसी में मॉडल कुछ भी है जो पृष्ठ पर डेटा को प्रतिबिंबित करता है, और इसलिए, रंग, प्रदर्शन / छुपा आदि जैसे सीएसएस गुण मॉडल को प्रभावित नहीं करते हैं।

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

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

यह वह मार्कअप है जिसका हम उपयोग करना चाहते हैं। मैंने इसे एक सहज नाम दिया।

<div rotate-on-click="45"></div>

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

JQuery के साथ कार्यान्वयन

यहां लाइव डेमो (क्लिक करें)।

function rotate(deg, elem) {
  $(elem).css({
    webkitTransform: 'rotate('+deg+'deg)', 
    mozTransform: 'rotate('+deg+'deg)', 
    msTransform: 'rotate('+deg+'deg)', 
    oTransform: 'rotate('+deg+'deg)', 
    transform: 'rotate('+deg+'deg)'    
  });
}

function addRotateOnClick($elems) {
  $elems.each(function(i, elem) {
    var deg = 0;
    $(elem).click(function() {
      deg+= parseInt($(this).attr('rotate-on-click'), 10);
      rotate(deg, this);
    });
  });
}

addRotateOnClick($('[rotate-on-click]'));

कोणीय के साथ कार्यान्वयन

यहां लाइव डेमो (क्लिक करें)।

app.directive('rotateOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var deg = 0;
      element.bind('click', function() {
        deg+= parseInt(attrs.rotateOnClick, 10);
        element.css({
          webkitTransform: 'rotate('+deg+'deg)', 
          mozTransform: 'rotate('+deg+'deg)', 
          msTransform: 'rotate('+deg+'deg)', 
          oTransform: 'rotate('+deg+'deg)', 
          transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

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

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

यह अधिक संबंधित जानकारी के लिए एक महान पोस्ट है: यदि मेरे पास jQuery पृष्ठभूमि है तो मैं "एंगुलरजेएस में कैसे सोचूं"?

सामान्य मतभेद

उपरोक्त बिंदु ओपी की विशिष्ट चिंताओं के उद्देश्य से हैं। मैं अन्य महत्वपूर्ण मतभेदों का एक अवलोकन भी दूंगा। मैं सुझाव देता हूं कि प्रत्येक विषय के बारे में अतिरिक्त पढ़ाई करें।

कोणीय और jQuery की तुलना उचित रूप से नहीं की जा सकती है।

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

ढांचे का उपयोग क्यों करें?

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

यहां कुछ चीजें हैं जो आधुनिक ढांचे प्रदान कर रहे हैं:

  • templating
  • अनिवार्य तथ्य
  • रूटिंग (एकल पृष्ठ ऐप)
  • स्वच्छ, मॉड्यूलर, पुन: प्रयोज्य वास्तुकला
  • सुरक्षा
  • सुविधा के लिए अतिरिक्त कार्यों / सुविधाओं

कोणीय पर चर्चा करने से पहले, मैं यह इंगित करना चाहता हूं कि कोणीय अपनी तरह का एकमात्र नहीं है। उदाहरण के लिए, Durandal, jQuery, Knockout, और RequJS के शीर्ष पर बनाया गया एक ढांचा है। फिर, jQuery, अपने आप से, नॉकआउट, RequJS, और शीर्ष ढांचे पर बनाए गए पूरे ढांचे को प्रदान नहीं कर सकता है। यह सिर्फ तुलनीय नहीं है।

यदि आपको किसी ग्रह को नष्ट करने की आवश्यकता है और आपके पास डेथ स्टार है, तो डेथ स्टार का उपयोग करें।

कोणीय (पुनरीक्षित)।

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

डीओएम संदर्भ।

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

<clock></clock>

किया हुआ।

हां, हमें इसका मतलब कुछ बनाने के लिए जावास्क्रिप्ट पर जाना होगा, लेकिन हम इसे jQuery दृष्टिकोण के विपरीत तरीके से कर रहे हैं। हमारे कोणीय निर्देश (जो इसकी अपनी छोटी दुनिया में है) ने एचटीएमएल को "उत्साहित" किया है और एचटीएमएल कार्यक्षमता को स्वयं में हुक करता है।

एमवीडब्ल्यू आर्किटेक्चर / मॉड्यूल / निर्भरता इंजेक्शन

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

अंगुलर में चीजें "काम" करना आसान नहीं है।

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

कोणीय बिल्कुल सही से दूर है। वेब विकास दुनिया हमेशा बढ़ रही है और बदल रही है और समस्याओं को हल करने के लिए नए और बेहतर तरीके दिए जा रहे हैं। फेसबुक के रिएक्ट एंड फ्लक्स, उदाहरण के लिए, कोणीय पर कुछ शानदार फायदे हैं, लेकिन अपनी खुद की कमियों के साथ आते हैं। कुछ भी सही नहीं है, लेकिन कोणीय अभी भी अद्भुत है और अभी भी अद्भुत है। जैसे ही jQuery ने वेब दुनिया को आगे बढ़ने में मदद की, इसलिए एंगुलर है, और ऐसे में आने वाले कई लोग भी होंगे।





angularjs