शायद यह लेख जावास्क्रिप्ट गुरुओं के लिए दिलचस्प नहीं होगा, लेकिन शुरुआती लोगों के लिए, यह संभवतः उपयोगी है।
मैं तुरंत एक आरक्षण कर दूंगा कि तीसरे पक्ष के ढांचे (उदाहरण के लिए jquery) को जोड़ने के बिना लेख में केवल शुद्ध जावास्क्रिप्ट का उपयोग किया जाएगा।
एक घोषणात्मक शैली में जावास्क्रिप्ट लिखना अधिक सुविधाजनक है:
- एक विशिष्ट HTML ब्लॉक में आवश्यक जावास्क्रिप्ट कार्यक्षमता को बांधने की क्षमता
- सीएसएस की तरह जावास्क्रिप्ट कोड लिखने की क्षमता (एक वस्तु के लिए गुण बाँधें)
- अलग-अलग फ़ाइलों के लिए विशिष्ट HTML ब्लॉक से जुड़े तर्क को स्थानांतरित करके कोड पठनीयता में सुधार करें
- और भी बहुत कुछ। इसे आज़माएं और अपने लिए देखें।
तो चलिए शुरू करते हैं।
शुरू करने के लिए, आइए 3 फाइलें प्राप्त करें:
- index.html - html ब्लॉक वाली एक फाइल, जिसे हम प्रोसेस करेंगे
- index.js - ब्लॉक-बाउंड फ़ंक्शंस के इनिशियलाइज़ेशन फ़ंक्शंस वाली फ़ाइल
- init.js - संलग्न ब्लॉकों के प्रसंस्करण के लिए तर्क युक्त फ़ाइल
Index.html फ़ाइल की सामग्री:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="init.js"></script> <script type="text/javascript" src="index.js"></script> </head> <style type="text/css"> div { margin:30px; padding:10px; background: #ccc; border:solid 1px #666; font-family:arial; font-size:12px; } </style> <body> <div class="b-block init_block1"> , ))) </div> <div class="init_block2"> ..))) </div> </body> </html>
Index.js फ़ाइल:
function addEvent(elem,evType,call) { if(elem.addEventListener) { elem.addEventListener(evType, call, false); } else if(elem.attachEvent) { elem.attachEvent('on' + evType, call); } } function initStart() { var arrayElem = document.getElementsByTagName('*'); var arrayElemLength = arrayElem.length; for(var i=0;i<arrayElemLength;i++) { var attr = arrayElem[i].className; if(attr) { if(attr.indexOf('init_') !== -1) { var initText = attr.substr(attr.indexOf('init_')); if (initObject[initText]) { initObject[initText](arrayElem[i]) } } } } } addEvent(window,'load',initStart);
Init.js फ़ाइल:
var initObject = { init_block1: function(elem) { elem.innerHTML += ' ... '; }, init_block2: function(elem) { elem.innerHTML += ' . '; addEvent(elem,'click',function(){ alert('!'); }); } }
तो हर कोई जुड़ा हुआ है, अब मैं समझाता हूँ।
पृष्ठ पर किसी भी ब्लॉक में कुछ तर्क को बांधने के लिए, आपको इस तत्व के वर्ग में initObject ऑब्जेक्ट विधि को निर्दिष्ट करना होगा।
Html एलिमेंट स्वयं (अधिक सटीक रूप से, इसके लिए एक लिंक) विधि को पारित कर दिया गया है, इसके साथ आप कुछ भी कर सकते हैं जैसे कि: किसी घटना को बांधें, डेटा को पास करें, संपत्ति को बदलें, आदि।
ऐसे सरल तरीके से, हम पृष्ठ पर आवश्यक वस्तुओं के लिए एक निश्चित तर्क को बांध सकते हैं।
यह ध्यान देने योग्य है कि initStart फ़ंक्शन पूरी तरह से आदर्श नहीं है - संशोधित करने के लिए कुछ है।
लेकिन यह एक केस स्टडी है, इसलिए मैंने "मौके पर" सब कुछ नहीं किया, मुझे लगता है कि सामान्य अवधारणा पहले से ही स्पष्ट है।
यह कैसे काम करता है, आप
यहां देख सकते हैं।
एक
उदाहरण संग्रह डाउनलोड करें।