1. 튀지 않는 자바스트립트
HTML 문서에서 스타일 정보를 분리하는 것과 마찬가지로 문서에서 동작을 분리하는 작업은 커다란 이점을
제공한다.
이러한 전략을 튀지 않는 (unobtrusive) 자바스트립트라고 하며, 개발자들이 동작을 분리하도록 요구한다.
튀지 않는 자바스크립트는 HTML 페이지의 <body>에 포함된 자바스크립트 표현식이나 구문을 잘못된
것으로 본다. onclick과 HTML 엘리먼트의 어트리뷰트나 페이지 몸체 <body>에 위치한 스크립트 블록이
해당된다.
그럼 어떻게 onclick 어트리뷰트를 사용하지 않고 버튼을 동작하게 할까?
----- HTML Code -----
<button type="button" id="testButton">클릭하세요.</button>
----- script -----
<script type="text/javascript">
window.onload = function(){
document.getElementById('testButton').onclick = function(){
document.getElementById('xyz').style.color = 'red';
};
};
</script>
2. 브라우저 탐지의 대안은 무엇일까?
어떤 브라우저를 사용하는지 반드시 알아야 할까? 브라우저 탐지를 고려하는 이유는 오직 하나다.
사용할 수 있는 브라우저의 기능과 특징을 알기 위함이다. 결국 필요한건 브라우저의 기능과 특징이다.
브라우저를 확인하여 추측하기 보다는 기능을 확인해보는 것은 어떨까?
이러한 기법을 요소 탐지 (Feature Detection)이라고 한다. 요소 탐지는 특정 객체나 프로퍼티 또는
메소드가 존재하는지 확인하여 분기하는 코드를 사용한다.
if(element.attachEvent){
element.attachEvent('onclick', someHandler);
}
else if(element.addEventListener){
element.addEventListener('click', someHandler);
}
else{
throw new Error ('이벤트 핸들링이 지원되지 않습니다.);
}
3. 문서 준비 핸들러
튀지 않는 자바스크립트를 적용하면 동작은 문서 구조에서 분리된다.
그러므로 문서 마크업 외부에서 동작을 정의하여 페이지 엘리먼트의 연산을 수행한다.
이를 위해 DOM엘리먼트를 모두 로드할 때까지 동작의 실행을 기다려야 한다.
이러한 방식은 문서 전체가 로드된 이후에 정의된 코드가 실행되도록 만든다. 이렇게 하면 브라우저는
DOM 트리를 생성할 뿐만 아니라 모든 외부 리소스까지 로드된 후에야 onload 코드를 실행하고 페이지를
브라우저에 표시한다.
이보다 나은 접근법은 문서 구조를 파싱하고 브라우저가 HTML을 최종 DOM트리도 변활할 때까지만
기다린 다음 동작을 적용하는 스크립트를 실행하는 것이다.
jQuery에는 DOM트리가 로드된 다음 다른 외부 리소스를 로드할 때까지 기다릴 필요 없이 코드를
실행하는 간단한 방법이 있다.
jQuery(document).ready(function(){
$("div.notLongForThisWorld").hide();
});
먼저 document 인스턴스를 jQuery 함수로 감싼 다음 ready() 메소드를 호출한다.
ready()메소드는 문서를 조작할 준비가 되었을 때 실행될 함수를 매개변수로 전달받는다.
jQuery(function(){
$("div.notLongForThisWorld").hide();
});
jQuery() 혹은 $()에 함수를 전달하면 브라우저는 DOM이 모두 로드될 때까지 코드 실행을 미뤄둔다.
jQuery(function($){
alert("ready");
});
jQuery 함수에 매개변수로 함수를 전달하면 해당 함수를 준비 핸들러로 선언한다.
$식별자를 사용하여 준비 핸들러로 전달되는 매개변수를 하나 선언한다.
jQuery는 준비 핸들러의 매개변수로 항상 jQuery 참조를 전달하기 때문에 $는 준비 핸들러 안에서
어떠한 외부 정의와 상관없이 jQuery객체를 참조할 수 있다.
var $ = "hi!";
jQuery(function(){
alert('$ = ' + $);
});
// 결과
$ = hi!
var $ = "hi!";
jQuery(function($){
alert('$ = ' + $);
});
// 결과
$ = function(selector, context){
return new (jQuery.fn.init)(selector, context);
}
'jQuery' 카테고리의 다른 글
| jQuery 확장 메소드 만들기 (0) | 2014.07.16 |
|---|---|
| jQuery Deprecated API (0) | 2014.07.15 |
| jQuery 사용자 정의 함수 만들기 (0) | 2014.07.15 |
| jQuery 확장 (0) | 2014.07.15 |
| jQuery Utility API (0) | 2014.07.15 |
