DOM Ready 방식 vs 모듈 패턴 방식

jQuery의 DOMReady 기능을 이용하여 호출하는 방식과 모듈 패턴을 이용하여 호출하는 방식의 차이점은 아래와 같다.

1. DOM Ready 기능을 이용하여 호출하는 경우

• DOM을 불러오기 전까지 이 함수를 호출할 수 없으며 DOM을 조작할 준비가 되면 실행하기 때문에 브라우저에서 최소 한 번 DOM 분석을 기다려야 한다.

jQuery DOM Ready의 사용

기본적으로 JavaSCript가 실행이 되기 위해서는 HTML, CSS 파싱을 중간에 멈추고 JavaScript 파싱을 먼저 한다. 그렇기 때문에 DOM Element를 조작할 경우, JavaScript 파일 위치에 따라 문제점이 발생하는 경우가 있다.

이를 대비하여 jQuery DOM Ready를 사용하게 되면 DOM의 로드가 끝난 뒤 JS가 실행이 되기 때문에 위와 같이 파일 위치에 오류가 나는 상황은 발생하지 않게 만들어주는 이점이 있다.

2. 인자로 '$'를 넣어 즉시 호출 함수를 실행할 경우

• DOM이 준비될 때까지 기다리지 않고 함수가 구문 분석이 되는 직후에 즉시 실행된다.
• 매개변수로 '$'를 전달함으로써 로컬 범위를 제공하여 '$'변수를 찾는 처리 시간을 줄이고 변수가 코드 외부로 노출되지 않게 한다.

해당 포스팅은 jQuery - DOM Ready vs Moule을 보며 공부한 것을 정리한 내용입니다.

참고 사이트

• jQuery - DOM Ready vs Moule