유틸리티 함수 - 플래그 사용하기

유틸리티 함수는 $이름공간에 속하며, 확장집합에서 동작하지 않고

$인스턴스에 정의되어 있다.

 

DOM엘리먼트보다는 자바스크립트 객체를 기반으로 동작하며

그렇지 않으면 객체와 관련되지 않은 동작을 수행한다.

 

메서드가 아닌 $에 정의된 변수를 이용해 정보를 제공한다.

 

 

* 사용자 브라우저 확인 방법 (참고만)

  . 지원하지 않는 브라우저라면 갑자기 에러가 발생

  . 모든 브라우저의 경우를 처리하는 거대하고 중첩된 조건문이 필요하므로, 확장성이 떨어짐

  . 사용자 에이전트 정보를 다른 값으로 변경할 수 있으므로 신뢰할 수 없음.

 

  . isIE, isFirefox, isSafari식의 특정 브라우저에 따라 처리하는 코드보다는

    객체 탐지(Object Detection)가 조금 더 낫다.

    : 특정 객체나 프로퍼티/메서드가 존재하는지 확인하여 분기하는 코드

      if( element.attachEvent ) { element.attachEvent('onclick', someHandler ); }

      else if( element.addEventListener ) { element.addEventListener('click', someHandler ); }

      else { throw new Error('이벤트 핸들링이 지원되지 않습니다.'); }

 

  . 객체 탐지도 반드시 필요하지 않다면, 사용하지 않는 것이 최선

    하지만 크로스 브라우저 문제에 직면한다면 다른 방식보다 먼저 고려해야

 

  . 객체 탐지로 동일한 결과를 가지는 경우(매개변수의 타입이 다른 경우)에는

    최적화와 거리가 멀지만 브라우저 탐지에 의지해야...

    : 매개변수가 객체참조인지 정수값인지를 확인할 수 없으므로

 

 

$.browser.xxx

현재 사용자 에이전트가 속한 브라우저 종류를 찾으려고 사용하는 플래그 집합을 정의

- msie : 인터넷 익스플로러로 식별하면 true

- mozilla : 모질라 기반 브라우저로 식별하면 true. 파이어폭스, 카미노, 넷스케이프

- safari : 사파리/옴니웹같은 사파리 기반 브라우저로 식별하면 true

- opera : 오페라로 식별하면 true

- version : 브라우저가 사용하는 렌더링 엔진의 버전 (브라우저의 버전 아님)

 

 

* 박스 모델 확인 방법 : $.boxModel

  대부분의 브라우저는 W3C 박스 모델을 지원(true)하지만,

  인터넷 익스플로러는 strict모드와 quirks모드로 랜더링

  랜더링 방식에 따라 코드를 작성해야 하는 경우에 사용

 

  두 모델의 차이는 width와 heigh 스타일을 어떻게 해석하느냐

  W3C 모델 : 엘리먼트 콘텐츠의 크기에 패딩과 테두리의 넓이를 더하지 않음

 

 

$.styleFloat

   cssFloat / styleFloat=IE

 

 

이것들 대신,

jQuery.support.xxx 사용

$( "div#view" ).style[ jQuery.support.cssFloat ? "cssFloat" : "styleFloat" ] = "left";