• window.document
  • selector
  • querySelector

Selector 선택자

function $(selector){
	return document.querySelector(selector);
}

selector를 사용해 객체를 가져올 때 (Document) 자주 사용되는 객체라면 함수로 만들어 모듈화를 하자. selector를 호출할 때에 querySelector를 사용하여 해당되는 selector의 document element를 반환한다.

document는 윈도우 객체의 속성이기 때문에 window.document로 호출해야하나 window는 전역 객체로 생략이 가능하다.

querySelector

키 입력 이벤트 처리

window.addEventListener('keydown', inputNumberByKey);

먼저 윈도우에 keydown eventListener를 추가한다.

참고할만한 문서 : eventListener와 callBack

function inputNumberByKey(e){
	const key = document.querySelector(`td[data-key="${e.keyCode}"]`);
	if(!key) return;
	key.onclick();
}

전달된 event는 미리 html에 명시해 둔 keyCode와 일치하는지 qs로 검사한 뒤에 해당 td element를 반환한다.

응용

키 입력을 받아 css속성을 추가하고 transition이 종료되면 css속성을 제거하는 코드

function addKeyEventListener() {
	const keys = document.querySelectorAll('.key');
	keys.forEach(key => key.addEventListener('transitionend', removeTransition));
}
document.querySelectorAll('.key')
// NodeList(9) [div.key, div.key, div.key, div.key, div.key, div.key, div.key, div.key, div.key]

querySelectorAll을 실행하면 class가 key인 모든 element들을 NodeList로 반환한다.

	keys.forEach(key => key.addEventListener('transitionend', removeTransition));

NodeList에 forEach문을 돌려 각각의 element에 EventListener를 추가한다.

eventListener가 추가되고 'transitionend'event가 발생하면 removeTransition을 실행한다.

function removeTransition(e) {
	 if(e.propertyName != 'transform') return; // skip it if it's not a transform
	 this.classList.remove('playing');
}

이벤트가 발생할 때 반환되는 요소들이 많기 때문에 transform이 들어가 있는 요소만 걸러내서 playing을 다시 제거해준다.

모듈화

코드의 재활용성 높이는 작업을 항상 생각하자. 모듈화부터가 클린코드의 시작이고 코드가 매우 간결해진다.

함수와 객체

js에서는 함수도 객체이다. 함수도 value처럼 사용된다. 다음은 calculator-step2를 진행하면서 작성한 코드이다.

function calculate(symbol){
	var CalculationFuncs = {
		'+' : function(former, later){return former+later;},
		'-' : function(former, later){return former-later;},
		'*' : function(former, later){return former*later;},
		'/' : function(former, later){return former/later;}
	}
	return CalculationFuncs[symbol];
}

각각의 연산을 함수로 만드는 것보다 훨씬 코드가 간결하다. 함수 안에 객체를 만들어 객체의 요소를 반환하게 했다.

오랜만에 클린코드를 진행하면서 많은 것을 다시 생각하게 되었다.

  • 한번 다운로드된 모듈은 웹브라우저에 의해서 저장되기 때문에 동일한 로직을 로드 할 때 시간과 네트워크 트래픽을 절약 할 수 있다.(브라우저에서만 해당)

태그:

카테고리:

업데이트:

댓글남기기