Truyền phần tử cha vào module thông qua closures trong JavaScript

Giả sử chúng ta có các phần tử sau:

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="res"></div>

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

Giả sử module sau làm việc với các phần tử này:

;(function(selector1, selector2, selector3, selector4, selector5) {
	let div1 = document.querySelector(selector1);
	let div2 = document.querySelector(selector2);
	let div3 = document.querySelector(selector3);
	let res  = document.querySelector(selector4);
	let btn  = document.querySelector(selector5);
	
	btn.addEventListener('click', function() {
		let num1 = Number(div1.textContent);
		let num2 = Number(div2.textContent);
		let num3 = Number(div3.textContent);
		
		res.textContent = num1 + num2 + num3;
	});
})('#div1', '#div2', '#div3', '#res', '#btn');

Như bạn thấy, số lượng tham số truyền vào module hơi nhiều và gây bất tiện. Thông thường trong trường hợp này, người ta làm như sau: truyền vào module một phần tử cha chung của tất cả các phần tử mà module làm việc, và sau đó bên trong module, lấy các phần tử khác nhau từ phần tử cha này.

Hãy tạo một phần tử cha chung cho các thẻ của chúng ta:

<div id="parent">
	<div id="div1">1</div>
	<div id="div2">2</div>
	<div id="div3">3</div>
	<div id="res"></div>
	
	<button id="btn">click me</button>
</div>

Bây giờ hãy cải tiến mã của module:

;(function(root) {
	let parent = document.querySelector(root);
	
	let div1 = parent.querySelector('#div1');
	let div2 = parent.querySelector('#div2');
	let div3 = parent.querySelector('#div3');
	
	let res  = parent.querySelector('#res');
	let btn  = parent.querySelector('#btn');
	
	btn.addEventListener('click', function() {
		let num1 = Number(div1.textContent);
		let num2 = Number(div2.textContent);
		let num3 = Number(div3.textContent);
		
		res.textContent = num1 + num2 + num3;
	});
})('#parent');

Như vậy, phần tử cha được chúng ta truyền từ bên ngoài vào module và có thể dễ dàng thay đổi nó. Còn các phần tử con là công việc nội bộ của module.