🎅🏼 🙋🏽 💡 JQuery से शुद्ध जावास्क्रिप्ट के लिए प्रवासन विकल्प 🤲🏻 ✳️ 👩🏿‍🎓

JQuery लाइब्रेरी को 2006 में लापता जावास्क्रिप्ट कार्यक्षमता के लिए बनाया गया था। तब से, बाद वाले अपने विकास में पर्याप्त रूप से आगे बढ़े हैं ताकि डेवलपर्स jQuery के बिना कर सकें, जिनमें से मुख्य समस्या प्रदर्शन है।

Habré पर चयनकर्ता प्रश्नों पर JQuery के "निषेध" के उद्देश्य माप के साथ कई लेख थे।

`// jQuery 2.0 var c = $("#comments .comment");`	4,649 मि
`// jQuery 2.0 var c = $(".comment");`	3,437 एमएस
`// native querySelectorAll var c = document.querySelectorAll("#comments .comment");`	1,362 मि
`// native querySelectorAll var c = document.querySelectorAll(".comment");`	1,168 एमएस
`// native getElementById / getElementsByClassName var n = document.getElementById("comments"); var c = n.getElementsByClassName("comment");`	107 मि
`// native getElementsByClassName var c = document.getElementsByClassName("comment");`	75 मि

(10,000 बार के चक्र में चलाएं)

नेटवर्क पर शुद्ध जावास्क्रिप्ट-ई पर jQuery फ़ंक्शंस के एनालॉग के बहुत सारे अच्छे विवरण हैं - उदाहरण के लिए, यहां ।

लेकिन jQuery की बहुत शक्ति इसकी अभिव्यक्तियों की संक्षिप्तता और सुंदरता में निहित है। मौजूदा कोड को फिर से लिखना मनोवैज्ञानिक रूप से कठिन है, सुरुचिपूर्ण $ () को बहु-पंक्ति निर्माणों में बदलना।

आइए जहाँ तक संभव हो JQuery की भाषा को छोड़ने की कोशिश करें, [आंशिक रूप से] इसकी जगह। ऐसा करने के लिए, हमें केवल $ () फ़ंक्शन को पुनर्परिभाषित करना होगा, या प्रतिस्थापित करना होगा (जो बेहतर है) अपने स्वयं के साथ - इसे $ jqr () होने दें। यह एक ऑब्जेक्ट भी लौटाएगा, लेकिन पहले से ही "देशी" और jQuery के कार्यों पर बोझ नहीं है जिन्हें हमें ज़रूरत नहीं है

कोड उदाहरण:

 <html> <body> <p id="message"></p> </body> </html>

JQuery कोड:

 $("#message").html("Hello world!");

इसमें परिवर्तन:

 $jqr("#message").html("Hello world!"); // JQuery Replacement function $jqr(sel) { return new JQR(sel); } class JQR { constructor(sel) { this.sel = sel; this.elements = document.querySelectorAll(sel); } html(str) { for (var i = 0; i < this.elements.length; i++) { this.elements[i].innerHTML = str; } } }

अधिक कुशलता से querySelectorAll (), getElementsByClassName () और getElementById () का उपयोग करने के लिए क्लास कंस्ट्रक्टर में sel पार्स करना वांछनीय है।

इस प्रकार, हम JQR वर्ग में केवल उन कार्यों को लागू कर सकते हैं जिनकी हमें आवश्यकता है, मानक जावास्क्रिप्ट से परे और मौजूदा कोड को स्पर्श किए बिना।

यह पूरी तरह से jQuery से छुटकारा पाने के लिए भी आवश्यक नहीं है - आंशिक अनुकूलन पहले से ही परिणाम देगा।

JQuery से शुद्ध जावास्क्रिप्ट के लिए प्रवासन विकल्प

More articles: