वेनिला जेएस बनाम jQuery 2.0

लेख Vanilla.js ढांचे से प्रेरित है।

पुराने ब्राउज़रों का युग विस्मरण में चला जाता है, अब डेवलपर्स के विरोध और तकनीकी प्रगति के विपरीत ie6,7,8 का उपयोग करने वाला शायद ही कोई जागरूक व्यक्ति है। शायद केवल आवश्यकता से, उदाहरण के लिए, कॉर्पोरेट सिस्टम IE6 के तहत लिखा गया है, या उपयोगकर्ताओं पर आलसी प्रशासक उपहास करते हैं और नए संस्करणों को अद्यतन / स्थापित नहीं करना चाहते हैं। फिर भी, इन ब्राउज़रों के उपयोग के आँकड़े शून्य हो जाते हैं। दरअसल, jQuery 2.0 के नए संस्करण ने विरासत ब्राउज़रों (IE 6-8) का समर्थन करने से इनकार कर दिया। और यहाँ jQuery के रिलीज के साथ, सवाल उठता है, तो आपको jQuery की आवश्यकता क्यों है?

मेरी राय है कि लोग jQuery का उपयोग केवल आदत से करते हैं, या केवल जावास्क्रिप्ट की बुनियादी चीजों और ब्राउज़र एपीआई को नहीं जानते हैं जो यह प्रदान करता है। क्या छुपाया जाए, मैंने javascript में महारत हासिल करने से पहले jQuery में लिखा था ...
लेकिन अंत में, वेनिला प्रबल हुई, कई कारण थे, लेकिन नीचे कुछ और अधिक विस्तार से।

आइए jQuery की मुख्य विशेषताओं पर एक नज़र डालें:

Sizzle Crossbrowser CSS चयनकर्ता इंजन

खैर, यह बहुत अच्छी बात है, लेकिन किस लिए? मुझे लगता है कि एक से अधिक प्रोजेक्ट / प्लगइन का सामना किया गया है जिसमें jQuery का उपयोग 3 स्थानों पर किया जाता है, जैसे $ ('# my_element')। Hide ()।
और इसके लिए, क्या लोग jQuery का उपयोग करते हैं और इसे निर्भरता में खींचते हैं? खैर, यह उनकी पसंद है ...

इस मामले में वनीला क्या पेश करती है?
जावास्क्रिप्ट डेवलपर्स के लिए, document.querySelectorAll परिचित है, ब्राउज़र में बनाया गया है और यहां तक ​​कि IE8 में भी दिखाई दिया है। क्या मैं उपयोग कर सकता हूँ?
लेकिन यहां कोई व्यक्ति हर बार इसे लिखने के लिए पात्रों के लिए खेद महसूस कर सकता है, जावास्क्रिप्ट का लाभ एक लचीली भाषा है और आपको विभिन्न निर्माणों को लिखने की अनुमति देता है, जिसका आप उपयोग कर सकते हैं।

var $ = document.querySelectorAll.bind(document) //  ,  bind    bind(  ) var $ = function(selector){ return document.querySelectorAll(selector) } //   ,   querySelector 

DOM ट्री को हेरफेर और नेविगेट करना

कई jQuery उपयोगकर्ताओं के लिए, यह एक रहस्य बना हुआ है कि क्या होता है जब वे $ ('चयनकर्ता') लिखते हैं या DOM में हेरफेर करते हैं।
अपने सभी तरीकों में, jQuery ने अपनी jQuery आवरण वस्तु लौटा दी, जो पुस्तकालय उपयोगकर्ताओं को jQuery कॉल से चेन लिखने की अनुमति देता है।

मुझे लगता है कि कई परियोजनाओं में तस्वीर से परिचित हैं:

  $(this).next().val(ui.item.id); $(this).next().next().val(ui.item.line); $(this).next().next().next().val(ui.item.id); $(this).next().next().next().next().next().val(ui.item.person.birth_date); $(this).next().next().next().next().next().next().next().val(ui.item.person.weight); $(this).next().next().next().next().next().next().next().next().val(ui.item.person.height); $(this).next().next().next().next().next().next().next().next().next().val(ui.item.person.name_translit); 

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

जाहिर है, कुछ लोग कार के लिए कोड लिखते हैं ... और उन लोगों के लिए नहीं जो इस कोड को प्राप्त करते हैं।

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

JQuery के बारे में, नमूना कोड:

 $([1,2,3]).each(function(index, element){ //do something }) $([1,2,3]).each(function(i,e){ console.log(this===e) }) // 2 

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

और वेनिला उदाहरण:

 [1,2,3].forEach(function(element, index){ //do something }, [, context]) 

पैरामीटर एक तार्किक क्रम में हैं, निष्पादन के संदर्भ (यह) को स्थापित करना संभव है, बिना अनावश्यक बंद किए।

डोम ऑब्जेक्ट्स में हेरफेर करने के लिए काफी व्यापक एपीआई है, आप इसे एमडीएन पर पढ़ सकते हैं।

घटनाओं

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

 $(function(){ $('.elements').bind('event', callback) }) 

यदि पृष्ठ पर कोई तत्व नहीं है, तो कुछ भी नहीं होगा, विकास प्रक्रिया के दौरान आप कक्षा के नाम में गलती कर सकते हैं, और jQuery इस मामले को सफलतापूर्वक पूरा करेगा, और आप तब तक यह देखना जारी रखेंगे कि बटन / लिंक पर ईवेंट तब तक काम नहीं करता है जब तक कि टाइपो को नोटिस नहीं किया जाता है। या इसी तरह की स्थिति जब एक तत्व विभिन्न पृष्ठों पर मौजूद होता है, लेकिन पहले आपको एक घटना की आवश्यकता होती है, लेकिन दूसरे पर नहीं। यहां आपको पहले से ही सुधार करना होगा, वर्ग के नाम बदलने होंगे या सशर्त चयन करना होगा।

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

यहाँ jQuery सिर्फ वाक्य रचना चीनी है , अधिक कुछ नहीं।

IE के शुरुआती संस्करणों में, अटैचमेंट का उपयोग करके घटनाओं को जोड़ा गया था, जिससे काम मुश्किल हो गया था, और jQuery ने बदले में, सब कुछ स्वचालित रूप से किया, लेकिन अब सभी ब्राउज़र EventListener का समर्थन करते हैं

 element.addEventListener('event', callback) 

यदि आपके पास पर्याप्त जावास्क्रिप्ट ज्ञान है, तो घटनाओं (20 लाइनों पर) पर एक छोटी विधि या एक सुविधाजनक आवरण लिखकर ओवरराइड किया जा सकता है।

दृश्य प्रभाव

प्रभाव के लिए सरल उपयोगिताओं का एक सेट, जिसकी हमेशा आवश्यकता नहीं होती है ... एक विकल्प? अपने आप को लिखें, केवल आपको वैनिला के बारे में लेख में इसके बारे में क्या चाहिए। बेशक, साइकिल की सवारी करने का कोई कारण नहीं है, लेकिन पूरी लाइब्रेरी को एक तरीके से नहीं खींचना चाहिए।

 var s = document.getElementById('thing').style; s.opacity = 1; (function fade(){(s.opacity-=.1)<0?s.display="none":setTimeout(fade,40)})(); 

jQuery

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('#thing').fadeOut(); </script> 

AJAX

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

 $.ajax({ method: 'get', url: 'http://habrahabr.ru/', success: function(data){ // ? } }) 

jQuery को छोड़कर, यह कम प्रतीत होता है, लेकिन आधुनिक ब्राउज़र देशी XMLHttpRequest का समर्थन करते हैं:

 var r = new XMLHttpRequest(); r.open("GET", "http://habrahabr.ru/", true); r.onreadystatechange = function () { if (r.readyState != 4 || r.status != 200) return; // ? }; r.send(); 

जो अपने आप में jQuery.ajax से आगे नहीं जाता है।

जावास्क्रिप्ट प्लगइन्स

JQuery, स्लाइडर, स्क्रॉलर, आदि के लिए प्लगइन्स की एक विस्तृत लाइब्रेरी ... हर स्वाद के लिए पुस्तकालयों के क्लोन, अनुरोध पर आप दर्जनों, या सैकड़ों समान प्लगइन्स पा सकते हैं जो कार्यान्वयन और / या लेखक द्वारा कुछ भी नहीं में भिन्न हैं।
$ ('चयनकर्ता')। do_all_ as_nad () में बहुत सी समस्याएं हैं, लेकिन पुस्तकालयों में से कौन सा लेखक आपको 100% गारंटी दे सकता है, और यदि कुछ गलत हो जाता है, तो ग्राहक को स्पष्ट रूप से यह सुनने के लिए दिलचस्पी नहीं होगी कि बग को लूटने वाले वासुकी पुपकीन को दोष देना है।

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

सारांश

नतीजतन, यह नहीं कहा जा सकता है कि हमारे डिजिटल युग में असीमित इंटरनेट और मोबाइल उपकरणों के साथ 1 जीबी से बड़ा मेमोरी वाला jQuery एक भारी ढांचा (33.6 KB संकुचित) है। लेकिन ज्यादातर मामलों में, एक बिल्कुल बेकार उपांग जो पृष्ठ को कई बार धीमा कर देता है (जैसा कि बेंचमार्क 50 के बारे में दिखाता है), जिसके साथ तिरस्कृत किया जा सकता है। प्लगइन्स के साथ एक पूरी तरह से अलग स्थिति। एक को यह आभास हो जाता है कि डेवलपर्स अपने लिए सोचना नहीं चाहते हैं, नया कार्य प्रोजेक्ट में एक नया प्लग-इन है। नतीजतन, jQuery प्लगइन्स की संख्या (जो jQuery के विभिन्न संस्करणों को खींच सकती है), js को 0.5 एमबी तक बढ़ाती है, या यहां तक ​​कि सामान्य रूप से ...

jQuery कई क्लाइंट-साइड जावास्क्रिप्ट कंस्ट्रक्शंस के लिए सिंटैक्टिक शुगर प्रदान करता है, लेकिन प्रदर्शन की लागत पर, जाहिर है, यह सभी के लिए तय करना है कि बलिदान, विकास समय या उत्पाद की गुणवत्ता क्या है।

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

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

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