प्रायोगिक अनुप्रयोग

मान लीजिए कि हमें दो डिव्स संख्याओं के साथ दिए गए हैं:

<div id="div1">10</div>
<div id="div2">10</div>

आइए ऐसा व्यवस्थित करें कि पहले डिव पर क्लिक करने पर उसका मान वर्ग में बदल जाए, और दूसरे डिव पर क्लिक करने पर - घन में।

आइए हम अपना कोड दो मॉड्यूल के रूप में व्यवस्थित करें:

;(function() {
	let elem = document.querySelector('#div1'); // पहला डिव
	
	function func(num) {
		return num * num; // वर्ग में बदलें
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

;(function() {
	let elem = document.querySelector('#div2'); // दूसरा डिव
	
	function func(num) {
		return num * num * num; // घन में बदलें
	}
	
	elem.addEventListener('click', function() {
		this.textContent = func(elem.textContent);
	});
})();

अब प्रत्येक मॉड्यूल में हम किसी भी वेरिएबल और फ़ंक्शन का उपयोग कर सकते हैं, इस डर के बिना कि वे अन्य वेरिएबल्स और हमारी स्क्रिप्ट के फ़ंक्शन्स के साथ टकराव करेंगे।

उदाहरण के लिए, हम दोनों एलिमेंट्स को elem वेरिएबल में संग्रहीत करते हैं - प्रत्येक अपने मॉड्यूल की अपनी वेरिएबल में। यदि यहाँ मॉड्यूल नहीं होते, तो हमें हमारे एलिमेंट्स को संग्रहीत करने के लिए अलग-अलग वेरिएबल्स पेश करने पड़ते। जबकि मॉड्यूल के साथ हम बिना किसी डर के हमारे वेरिएबल का शांति से उपयोग कर सकते हैं, इस बात से बेफिक्र कि कोई और भी इस वेरिएबल का उपयोग करना चाहेगा।