ব্যবহারিক প্রয়োগ

ধরা যাক আমাদের কাছে সংখ্যা সহ দুটি ডিভ দেওয়া আছে:

<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 ভেরিয়েবলে সংরক্ষণ করি - প্রতিটি তার নিজস্ব মডিউলের নিজস্ব ভেরিয়েবলে। যদি এখানে মডিউল না থাকত, তাহলে আমাদের উপাদানগুলি সংরক্ষণ করার জন্য বিভিন্ন ভেরিয়েবল প্রবর্তন করতে হত। আর মডিউল সহ আমরা নির্বিঘ্নে আমাদের ভেরিয়েবল ব্যবহার করতে পারি, এই ভয় ছাড়াই যে কেউ এই ভেরিয়েবলটিও একইভাবে ব্যবহার করতে চাইবে।