জাভাস্ক্রিপ্টে ক্লোজারের মাধ্যমে মডিউলে প্যারামিটার পাঠানো

যেকোনো মান সরাসরি মডিউলের মধ্যে হার্ডকোড না করে, মডিউলের প্যারামিটার হিসেবে সেগুলো পাঠানো একটি ভালো প্র্যাকটিস (অর্থাৎ, অবিলম্বে কল হওয়া ফাংশনের প্যারামিটার হিসেবে):

;(function(arg1, arg2) { // প্যারামিটারগুলি ভেরিয়েবলে যায়
	
})(1, 2); // কিছু প্যারামিটার পাঠাচ্ছি

আসুন একটি উদাহরণ দেখি। ধরা যাক আমাদের কাছে একটি সংখ্যা সহ একটি div এবং একটি বাটন আছে:

<div id="div">3</div>
<button id="btn">click me</button>

ধরা যাক আমাদের একটি মডিউলও আছে:

;(function() {
	let div = document.querySelector('#div');
	let btn = document.querySelector('#btn');
	
	function func(num) {
		return num * num;
	}
	
	btn.addEventListener('click', function() {
		div.textContent = func(div.textContent);
	});
})();

আপনি দেখতে পাচ্ছেন, আমাদের এলিমেন্টগুলির সিলেক্টরগুলি মডিউলের কোডে শক্তভাবে হার্ডকোড করা আছে। মডিউলের প্যারামিটার হিসেবে সেগুলো পাঠানো একটি আরও ভালো সমাধান হবে - এইভাবে আমরা ভবিষ্যতে সহজেই সেগুলো পরিবর্তন করতে পারব। আমাদের মডিউলটি ঠিক করি:

;(function(selector1, selector2) {
	let div = document.querySelector(selector1);
	let btn = document.querySelector(selector2);
	
	function func(num) {
		return num * num;
	}
	
	btn.addEventListener('click', function() {
		div.textContent = func(div.textContent);
	});
})('#div', '#btn');

একটি বাটন এবং তিনটি ইনপুট দেওয়া আছে, যেখানে সংখ্যা ইনপুট করা হয়। বাটনে ক্লিক করলে কনসোলে ইনপুটকৃত সংখ্যাগুলোর যোগফল প্রিন্ট করুন। মডিউল ব্যবহার করে টাস্কটি বাস্তবায়ন করুন।