प्रोटोटाइप का परिचय। js

मैं एक परियोजना के विकास से जुड़ा हुआ हूं जो इस अद्भुत js ढांचे का उपयोग करता है। इससे पहले, मैंने केवल jQuery का उपयोग किया था, इसलिए मुझे इस पुस्तकालय का अध्ययन करना पड़ा, मेरे लिए नया।

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

सभी रुचि - मैं एक कटौती के लिए पूछना

परिचय

के साथ शुरू करने के लिए, मैं यह नोट करना चाहता हूं कि यह विषय एक होलीवर के लिए जगह नहीं है, जैसे "एक्स वाई की तुलना में ठंडा है"। मैं केवल दूसरों को प्रभावित किए बिना, इस ढांचे की क्षमताओं के बारे में बात करना चाहता हूं।

यह रूपरेखा इंटरनेट एक्सप्लोरर 6.0+, मोज़िला फ़ायरफ़ॉक्स 1.5+, ऐप्पल सफारी 2.0+ और ओपेरा 9.25+ द्वारा समर्थित है। तदनुसार, इसका उपयोग 99% परियोजनाओं में किया जा सकता है।

वर्तमान में, नवीनतम संस्करण 1.7 है, 22 नवंबर 2010 को जारी किया गया।

इसलिए, हमने लाइब्रेरी के स्रोत कोड को डाउनलोड किया और इसे अपने html-document में शामिल किया

<script src="prototype.js" type="text/javascript"></script> 

अब उन अवसरों पर विचार करें जो हमारे लिए उपलब्ध हो गए हैं

बुनियादी सुविधाएँ

दरअसल, फ्रेमवर्क का सारा नमक 5 कार्यों में प्रस्तुत किया जाता है। उनके बारे में नीचे।

$ ()
यहां सब कुछ सरल है। अब

 document.getElementById('elementId'); 

द्वारा प्रतिस्थापित किया जा सकता है

 $("elementId"); 

इसके अलावा, यदि आप फ़ंक्शन में कई पैरामीटर पास करते हैं, तो यह तत्वों की एक सरणी लौटाएगा

 var array = $('elementId-1', 'elementId-2', 'elementId-3'); 

इस सरणी को एक लूप में संसाधित किया जा सकता है, उदाहरण के लिए

 for (i=0; i<array.length; i++) { alert(array[i].innerHTML); } 

$ $ ()
फ़ंक्शन एक या अधिक सीएसएस चयनकर्ताओं को तोड़ता है जो इनपुट हैं, और इन फिल्टर से मेल खाने वाले तत्वों को लौटाता है

 <div id='loginForm'> <div class='field'> <label class='black'>User name:</label> <input type='text' id='name' value='My name'/> </div> <div class='field'> <label class='red'>Password:</label> <input type='password' id='pass' value='pass' /> </div> <input type='submit' value='login' /> </div> 

 var array = $$('div#loginForm .field input'); for(var i=0; i<array.length; i++){ alert(array[i].value); } 

यह कोड आउटपुट करेगा:
मेरा नाम
पास

आइए एक अधिक जटिल तरीके से एक उदाहरण पर विचार करें, जब फ़ंक्शन के लिए कई फ़िल्टर इनपुट होंगे

  array = $$('div#loginForm .field input', 'div#loginForm .red'); s = ''; for(var i=0; i<array.length; i++){ s = ( array[i].value ? array[i].value : array[i].innerHTML ); alert(s); } 

यहाँ हम निम्नलिखित परिणाम देखेंगे:
मेरा नाम
पास
पासवर्ड

$ F ()
ऊपर दिए गए कोड के लिए, हम फार्म तत्वों के मूल्यों को निम्न प्रकार से प्राप्त कर सकते हैं:

  alert($F('name')); alert($F('pass')); 

जैसा कि आप शायद पहले से ही अनुमान लगा चुके हैं, परिणाम होगा
मेरा नाम
पास

एक बेहतर समझ के लिए, निम्नलिखित तीन डिज़ाइन समान हैं।

 var a = document.getElementById('name').value; var b = $('name').value; var c = $F('name'); 

मान a, b, c बराबर होंगे

$ A ()
$ A () फ़ंक्शन एक तर्क को परिवर्तित करता है जो इसे एक ऐरे ऑब्जेक्ट में प्राप्त करता है।

 <select id="list" > <option value="3">Test 1</option> <option value="2">Test 2</option> <option value="4">Test 3</option> </select> 

 var someNodeList = $('list').getElementsByTagName('option'); var nodes = $A(someNodeList); //      nodes.each(function(node){ alert(node.nodeName + ': ' + node.innerHTML); }); 

हमें मिलता है
3: टेस्ट 1
2: टेस्ट 2
4: टेस्ट 3

$ H ()
$ H () फ़ंक्शन ऑब्जेक्ट को एन्यूमरेटेड हैश ऑब्जेक्ट में परिवर्तित करता है जो एक साहचर्य सरणी की तरह दिखता है।

हैश ऑब्जेक्ट का प्रत्येक तत्व दो तत्वों की एक सरणी है: एक कुंजी और एक मूल्य। इसके अलावा, ऑब्जेक्ट में 5 विधियां हैं
कुंजियाँ () - सभी कुंजियों की एक सरणी देता है
मान () - सभी मानों की एक सरणी देता है
मर्ज (हैश) - टाइप हैश की वस्तुओं को स्वीकार करता है, केवल एक वस्तु देता है, उनके संयोजन का परिणाम है
.StString () - किसी ऑब्जेक्ट को क्वेरी-स्ट्रिंग में परिवर्तित करता है। यह है कि, "key1 = value1 & key2 = value2 & key3 = value3" फॉर्म की एक पंक्ति
निरीक्षण () - एक सरणी प्रारूप में एक वस्तु लौटाता है, "कुंजी: मूल्य" फॉर्म का

 //  var a = { first: 10, second: 20, third: 30 }; // hash var h = $H(a); alert(h.toQueryString()); // "first=10&second=20&third=30" 

कूल, है ना?

उपयोगी विशेषताएं

और कुछ और कार्यों पर विचार करें जिनके बिना जीवन इतना सुंदर नहीं होगा

getElementsByClassName ()
यह getElementsByTagName () फ़ंक्शन के समान काम करता है। अंतर केवल इतना है कि टैग नाम नहीं, बल्कि वर्ग नाम प्रस्तुत करना आवश्यक है। निर्दिष्ट वर्ग से मेल खाने वाले सभी तत्व सरणी में वापस आ जाते हैं। फ़ंक्शन तब भी काम करता है, जब एक तत्व के लिए कई कक्षाएं परिभाषित की जाती हैं।
मुझे लगता है, एक उदाहरण के बिना, सब कुछ स्पष्ट है।

कोशिश करो। ()

 return Try.these( function() { alert(""); jkgjhgjhg //  alert(" "); return 1; }, function() { alert(""); return 2; } ); 

परिणामस्वरूप, इसे मुद्रित किया जाएगा
पहला
दूसरा

और फ़ंक्शन स्वयं 2 वापस आ जाएगा।
मुझे लगता है कि यहां सब कुछ स्पष्ट है। डिबगिंग के लिए एक अनिवार्य उपकरण

लाइब्रेरी की एक अन्य उपयोगी विशेषता टेक्स्ट टेम्प्लेट के साथ काम करना है।

  //  var cart = new Object(); cart.items = [ ]; //  cart.items.push({product: '', price: 24.50, quantity: 1}); cart.items.push({product: '', price: 5.44, quantity: 3}); cart.items.push({product: '', price: 10.00, quantity: 4}); //  Template var itemFormat = new Template( '  #{quantity} . ' + ' #{product}  #{price}. ' ); for(var i=0; i<cart.items.length; i++){ var cartItem = cart.items[i]; alert(itemFormat.evaluate(cartItem)); } 

हमें मिलता है:
आप 1 पीसी का ऑर्डर करें। 24.50 बजे उत्पाद बुक। प्रत्येक
आप 3 पीसी का ऑर्डर करें। 5.44r पर प्रोडक्ट पेन। प्रत्येक
आप 4 पीसी का ऑर्डर करें। 10.00 रगड़ के लिए नोटबुक। प्रत्येक

खैर, बेशक, आधुनिक दुनिया में आप AJAX के बारे में बात किए बिना खत्म नहीं कर सकते। अब AJAX अनुरोध को निम्नानुसार निष्पादित किया जा सकता है:

 var myAjax = new Ajax.Request( url, {method: 'post', parameters: data, onComplete: ajax_response} ); 

विधि हो या पद।
पैरामीटर - प्रपत्र कुंजी = मान, एक क्वेरी-स्ट्रिंग में संयुक्त।
OnComplete - फ़ंक्शन जो AJAX अनुरोध के पूरा होने के बाद कहा जाएगा

एक उदाहरण:

 var url = 'http://yourserver/app/get_sales'; var pars = 'id=123&value=456'; var myAjax = new Ajax.Request( url, { method: 'get', parameters: pars, onComplete: showResponse }); } function showResponse(originalRequest) { alert(originalRequest.responseText); } 

निष्कर्ष

प्रोटोटाइप.जेएस लाइब्रेरी में कई बेहतरीन विशेषताएं हैं जो डेवलपर के लिए जीवन को आसान बना सकती हैं और इसे केवल एक छोटे लेख में वर्णित नहीं किया जा सकता है।

अगर आप इस जगह पर पढ़ते हैं तो धन्यवाद।

उपयोगी लिंक

परियोजना की आधिकारिक साइट । यहां आप फ्रेमवर्क के नवीनतम संस्करण को डाउनलोड कर सकते हैं और आधिकारिक दस्तावेज के साथ खुद को परिचित कर सकते हैं।

बाकी सब चीजों के लिए, Google है