dojo by example(2) - 유틸리티 함수

자바스크립트에는 두 가지 타입 검사 연산자가 있다: instanceof와 typeof

그런데 이게 미묘하다. 예를 들어:

var hello = "hello"; 
alert(typeof hello); // string
var world = new String("world");
alert(typeof world); // object -,.-;;

dojo를 사용해보면 어떨까?

alert(dojo.isObject(hello)); // false
alert(dojo.isObject(world)); // true
alert(dojo.isString(hello)); // true
alert(dojo.isString(world)); // true

말나온 김에 한 가지만 더 예를 들어보면:

function test2() {
  alert(typeof arguments); // object
  // alert(arguments.join(',')); // 에러 -,.-;;;
  var args = []; // new Array();
  for (var i = 0; i < arguments.length; i++) { args[i] = arguments[i]; };
  alert(typeof args); // object typeof는 "array"를 모른다! -.-;
  alert(args.join(',')); // hello,world,1,2,3
}
test2('hello', 'world', 1, 2, 3);

dojo를 사용해보면 어떨까?

alert(dojo.isArray(arguments)); // false
alert(dojo.isArray(args)); // true
alert(dojo.isArrayLike(arguments)); // true
alert(dojo.isArrayLike(args)); // true

위의 것들은 생각나는 것을 예로 든건 뿐이고, 자바스크립트로 코딩하다보면 더 미묘한 경우도 많다. 그래서... dojo에는 이런 것들이 있다:

• dojo.isString(arg) : arg가 문자열이면 true
• dojo.isObject(arg): arg가 객체이면 true
• dojo.isFunction(arg): arg가 함수이면 true
• dojo.isArray(arg): arg가 배열이면 true
• dojo.isArrayLike(arg): arg가 유사배열이면 true
  

그냥 익혀두고 쓰면 날로 편한케 하고져 할 따름이다. 찝찝하다면 그냥 알아만 두자. 자바스크립트로 먹고 살다보면 아쉬울 때가 곧 올 것이다.

이것만으로 끝내기 아까우니까 dojo의 브라우져 검사 기능을 간단히 알아보자:

• dojo.isFF : 파이어폭스라면 메이저 버전 번호(숫자; 1.5, 2, 3)가 들어있다.
• dojo.isIE: IE계열이라면 6, 7, 8 등의 메이저 버전 번호가 들어있다.
• dojo.isSafari: 사파리라면 버전이 들어있다.
• dojo.isOpera: 오페라라면 버전이 들어있다.
• dojo.isMozilla: Gecko 기반 브라우져(Mozilla, Firefox, Camino 등)라면 Gecko 버전이 들어있다.
• dojo.isKhtml: KHTML 기반 브라우져(Safari, Konqurer 등)라면 버전이 들어있다.
• 기타 dojo.isBrowser, dojo.isQuirks, dojo.isGears, dojo.isAir, dojo.isRhino, dojo.isSpidermonkey 등이 있다.

이게 생각보다 편하다. 예를 들면:

if (dojo.isFF) {
  // FF workaround...
} else if(dojo.isIE) {
  // IE 공통 workaround...
  if (dojo.isIE === 6) {
    // IE6 전용 workaround...
  }
}
if (!dojo.isIE && !dojo.isMozilla) {
  alert('sorry unsupported!');
  return;
}
// 브라우져 공통 ...

직접(!) 제작한 짤방 하나 소개하며... 오늘은 여기까지~

덧 1. dijit을 사용하게 되면 위의 속성들을 참조해서 다음과 같은 css클래스를 html 태그에 추가해주므로, 브라우져별 css 핵을 적용할 때 편하게 사용할 수 있다:

dj_ie, dj_ie55, dj_ie6, dj_ie7, dj_iequirks, dj_opera, dj_opera8, dj_opera9, dj_khtml, dj_safari, dj_gecko, dj_ff2

덧 2. 나중에 얘기할 기회가 있겠지만(전에 했던가...-.-) 위의 예를 쉽게 테스트 해보려면 그냥 다음과 같은 태그를 다른 <script> 태그보다 앞에 추가해주면 된다:

<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js"></script>