वेनिला जेएस - एक बहुत शक्तिशाली जावास्क्रिप्ट रूपरेखा

जैसा कि लग सकता है अजीब है, हेबे पर इस शक्तिशाली ढांचे का उल्लेख अप्रैल 2012 से केवल एक टिप्पणी में पाया गया था।

प्रविष्टि

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

मेरी राय है कि आपको अतिरेक कोड की कमी के लिए प्रयास करना चाहिए, अधिकतम अतिसूक्ष्मवाद के लिए, टॉटोलॉजी के लिए खेद है।
यदि पूरी साइट के लिए आपको केवल अपनी आईडी द्वारा HTML तत्वों का चयन करना होगा - यह jQuery को शामिल करने के लिए मूर्खतापूर्ण है।

यदि आपको Node.js परियोजना पर js-files का एक पैकेट एकत्र करने और उन्हें संपीड़ित करने की आवश्यकता है - यह सेटिंग्स, मापदंडों, परिवर्धन और विधियों के एक समूह के साथ भारी रूपरेखा लिखने या जोड़ने के लिए बेवकूफ है, क्योंकि सबसे सरल स्क्रिप्ट जो फाइलों के साथ चिपक जाती है और क्रॉफर्ड jsmin के माध्यम से उन्हें चलाता है, बहुत तेज़, अधिक विश्वसनीय होगा और आसान।

अधिक कोड, अधिक त्रुटियां। जितना अधिक तृतीय-पक्ष कोड, उतना ही मुश्किल है कि एक परियोजना को बनाए रखना। आखिरकार, जब आप किसी और का कोड लेते हैं, तो आप उसके समर्थन की जिम्मेदारी लेते हैं। यह कहना संभव नहीं होगा "यह बग मेरा नहीं है, लेकिन उस पुस्तकालय से है।"

वेनिला जे.एस.

इसलिए, हम दुनिया में इस सबसे शक्तिशाली और सबसे लोकप्रिय जेएस-ढांचे की समीक्षा शुरू करेंगे।

(इसके बाद की रूपरेखा की आधिकारिक वेबसाइट से अनुवाद के रूप में संदर्भित)

वेनिला JS टीम फ्रेमवर्क कोड के हर बाइट का समर्थन करती है और इसे छोटा और सहज बनाने के लिए हर दिन कड़ी मेहनत करती है।
वेनिला JS का उपयोग कौन कर रहा है? आपके द्वारा पूछी गई अच्छी बात, यहाँ कुछ उदाहरण हैं: फेसबुक, Google, YouTube, Yahoo, Wikipedia, Windows Live, Twitter, Amazon, LinkedIn, MSN, eBay, Microsoft, Tumblr, Apple, Pinterest, PayPal, Reddit, Netflix, Stack Overflow।

वास्तव में, वैनिला JS पहले से ही jQuery, प्रोटोटाइप JS, MooTools, YUI, और Google वेब टूलकिट की तुलना में अधिक साइटों पर उपयोग में है!

साइट पर आप अपनी ज़रूरत की कार्यक्षमता का चयन करके रूपरेखा डाउनलोड कर सकते हैं:

• डोम (हेरफेर / चयनकर्ता)
• वस्तुओं का प्रोटोटाइप सिस्टम
• AJAX
• एनिमेशन
• घटना प्रणाली
• नियमित अभिव्यक्ति
• वस्तुओं के रूप में कार्य
• शॉर्ट सर्किट
• गणितीय विधियों का पुस्तकालय
• सरणियों के साथ काम करने के लिए पुस्तकालय
• स्ट्रिंग्स के साथ काम करने के लिए लाइब्रेरी

इसके अलावा आप अपने निर्माण को अनुकूलित कर सकते हैं:

• संपीडन स्रोत
• UTF8 एन्कोडेड
• "CRLF" लाइन ब्रेक (विंडोज) का उपयोग करें

अधिकतम कॉन्फ़िगरेशन के साथ, फ्रेमवर्क का वजन होगा:
असंपीड़ित: 0 बाइट्स, संपीड़ित: 25 बाइट्स।

deploymenta

वेनिला जेएस टीम सभी समय का सबसे हल्का ढांचा होने का दावा करती है; हमारी उत्पादन साझाकरण रणनीति का उपयोग करें, और आपके उपयोगकर्ताओं के ब्राउज़र वेनिला JS को आपकी साइट लोड करने से पहले ही मेमोरी में लोड कर देंगे।

वेनिला JS को सक्षम करने के लिए, बस अपने HTML में निम्न पंक्ति जोड़ें:

<script src="path/to/vanilla.js"></script> 

जब आप अपनी परियोजना को उत्पादन पर लगाने के लिए तैयार हों, तो कनेक्शन को बहुत तेज़ विधि से बदलें:

यह सही है, जिसमें कोई कोड नहीं है। वेनिला जेएस इतना लोकप्रिय है कि ब्राउज़र अब दस वर्षों के लिए स्वचालित रूप से डाउनलोड करते हैं।

अन्य चौखटों के साथ गति की तुलना

ID द्वारा DOM तत्व खोजें

ढांचा	कोड	ऑप। \ सेक
वेनिला जे.एस.	document.getElementById('test-table');	12,137,211
डोजो	dojo.byId('test-table');	5,443,343
प्रोटोटाइप js	$('test-table')	2,940,734
एक्सट जेएस	delete Ext.elCache['test-table']; Ext.get('test-table');	997.562
jQuery	$jq('#test-table');	350.557
YUI	YAHOO.util.Dom.get('test-table');	326.534
MooTools	document.id('test-table');	78.802

टैग नाम से आइटम खोजें

ढांचा	कोड	ऑप। \ सेक
वेनिला जे.एस.	document.getElementsByTagName("span");	8,280,893
प्रोटोटाइप js	Prototype.Selector.select('span', document);	62.872
YUI	YAHOO.util.Dom.getElementsBy(function(){return true;},'span');	48.545
एक्सट जेएस	Ext.query('span');	46.915
jQuery	$jq('span');	19.449
डोजो	dojo.query('span');	10.335
MooTools	Slick.search(document, 'span', new Elements);	5457

कोड उदाहरण

धीरे से आइटम छिपाना

वेनिला जे.एस.	var s = document.getElementById('thing').style; s.opacity = 1; (function(){(s.opacity-=.1)<0?s.display="none": setTimeout(arguments.callee,40)})();
jQuery	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $('#thing').fadeOut();</script>

AJAX कॉल

वेनिला जे.एस.	var r = new XMLHttpRequest(); r.open("POST", "path/to/api", true); r.onreadystatechange = function () { if (r.readyState != 4 || r.status != 200) return; alert("Success: " + r.responseText); }; r.send("banana=yellow");
jQuery	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $.ajax({ type: 'POST', url: "path/to/api", data: "banana=yellow", success: function (data) { alert("Success: " + data); }, }); </script>

निष्कर्ष

आप Vanilla JS के बारे में और जानकारी लिंक पर प्राप्त कर सकते हैं:

• वेनिला जेएस प्रलेखन
• वेनिला जेएस पर विभिन्न पुस्तकें
• या वेनिला JS के लिए कुछ प्लगइन्स आज़माएं

जब आप वैनिला जेएस पर अपनी परियोजना की सुविधा देते हैं, तो आप इस सुविधाजनक बटन का उपयोग कर सकते हैं:

-

पोस्ट के लेखक से

खैर, शायद यह वास्तव में सबसे अच्छा जेएस फ्रेमवर्क है!
मैं सलाह देता हूं, सबसे पहले, इस पर विचार करने के लिए, और केवल कुछ और लेने की तत्काल आवश्यकता के मामले में।