xui.js 초간단 리뷰

요약

xui.js는 모바일 html5 웹앱에 특화된 초경량 자바스크립트 라이브러리

특징

• 초경량(9.4k) - jquery 최소 29k, dojo 최소 31k, jQueryMobile 최소 135k, Sencha Touch 최소 524k, …
• 단순 명쾌하고 익숙한(jQuery 스타일의 메소드 체이닝) 문법
• 모바일에 최적화(webkit, ie mobile, blackberry)
• 제약없는 오픈소스 라이센스(MIT; Sencha의 듀얼 라이센스 대비 장점)

개발 배경

Nitobi가 PhoneGap 용으로 개발한 자바스크립트 라이브러리.

기능 요약

아래에, xui.js가 제공하는 모든(!) 함수를 간략하게 설명합니다. 개발자 분들의 이해를 돕기 위해 대응하는 jquery와 dojo의 함수도 같이 소개 했습니다.

기본 함수

• extend(object)
• 프로토타입 상속
• [ jquery.extend(), dojo.extend() ]
• find(selector, context)
• css 셀렉터에 부합하는 노드 선택.
• [ jquery.find(), dojo.query() ]
• set(array)
• 명시적으로 노트 선택.
• reduce(elements, index)
• 중복 제거
• [ jquery.unique() ]
• has(selector)
• css 셀렉터에 부합 여부 확인
• [ jquery.has(), dojo.query() ]
• filter(fn)
• 노드 필터링(제외).
• [ jquery.filter(), dojo.filter() ]
• not(selector)
• css 셀렉터에 부합하지 않는지 확인.
• [ jquery와 dojo의 not() css selector ]
• each(fn)
• 노드 순회
• [ jquery.each(), dojo.forEach() ]

DOM 조작 함수

• html(location, html)
• HTML 컨텐츠 조작.
• location: inner,outer,top,bottom,remove,before,after 중의 하나(생략가능; 생략하면 inner). 동일한 이름을 가진 단축함수(inner(html) 등) 사용 가능.
• [ jquery.html(), dojo.place() ]
• attr(attribute, value):
• HTML 속성 조작.
• value를 생략하면 get.
• [ jquery.attr(), dojo.attr() ]

이벤트 함수

• on(type, fn)
• 이벤트 핸들러 등록.
• type: click, load, touchstart, touchmove, touchend, touchcancel, gesturestart, gesturechange, gestureend, orientationchange 등. 동일한 이름을 가진 단축함수(예: click() 등) 사용 가능.
• [ jquery.bind(), dojo.connect() ]
• un(type, fn)
• 이벤트 핸들러 등록 해제.
• fn을 생략하면 해당 이벤트에 등록된 모든 이벤트 핸들러 등록 해제.
• [ jquery.unbind(), dojo.disconnect() ]
• fire(type, data)
• 가상의 이벤트 발생.
• data: 이벤트 핸들러로 전달되는 event 객체의 data 속성으로 전달(생략 가능).
• [ jquery.trigger() ]

화면 효과 함수

• tween(properties, callback)
• css 속성 인비트윈(inbetween) 에니메이션.
• properties: 에니메이트할 css 속성-값 pairs과 duration, after, easing 등의 추가 속성들 또는 속성들의 배열.
• [ jquery.animateProperty(),  dojo.animateProperty() 등 ]

CSS 스타일 함수

• setStyle(property, value)
• css 속성 설정.
• [ jquery.css(), dojo.style() ]
• getStyle(property, callback)
• css (계산된)속성 얻기.
• [ jquery.css(), dojo.style() ]
• addClass(className)
• css 클래스 추가.
• [ jquery.addClass(), dojo.addClass() ]
• hasClass(className)
• css 클래스 확인.
• [ 참고: jquery.hasClass(), dojo.hasClass() ]
• removeClass(className)
• css 클래스 제거.
• [ jquery.removeClass(), dojo.removeClass() ]
• css(properties)
• css 속성 일괄 설정.
• [ jquery.css(), dojo.style() ]

XHR(AJAX) 함수

• xhr(loation, url, options|fn)
• AJAX 요청.
• location: 결과(responseText)를 반영할 노드(생략 가능).
• options: method, async, data, callback 등의 추가 속성 지정(생략 하거나 callback 함수만 지정 가능).
• [ jquery.ajax(), ajax.load(), ajax.get(), ajax.post(), dojo.xhr(), dojo.xhrGet(), dojo.xhrPost()  등 ]

결론

xui.js는 jquery나 dojo 등의 기존 자바스크립트 라이브러리에서 널리 사용되지 않는 기능들과 다양한 데스크탑용 브라우져 지원을 위한 부가적인 코드를 제거하고, 자주 사용되는 함수들과 모바일 환경에서 꼭 필요한 브라우져만 지원하도록 최적화된 자바스크립트 라이브러리 입니다. 장단점을 요약하면 다음과 같습니다:

• PROS: 크기, 성능, 구성, 소스 코드 품질
• CONS: UI 툴킷 부재. 데스크탑 브라우져 호환성 부재. 문서 / 사용자 커뮤니티  부재.

직접 UI 툴킷을 만들 게 아니라면, 별도의 UI 툴킷을 사용해야 하므로 작은 크기로 인한 장점이 오히려 단점이 됩니다. JQueryMobile을 쓰려면 결국 jQuery가, Sench Touch를 쓰려면 결국 ExtJS가, Dijit(Dojo Widget)을 쓰려면 결국 dojo가 필요하게 되는데, 말 그대로 배보다 배꼽이 더 큰 상황이 됩니다. 또한, 데스크탑 브라우져 호환성이 부족하므로 xui.js는 모바일 웹에만 적용하고, 데스크탑 웹을 위해 별도의 자바스크립트 라이브러리를 사용해야 하므로 2중의 학습/개발이 필요하므로 장점보다는 단점이 커 보입니다.

여러 측면을 고려할 때, 새로운 모바일 웹 UI 툴킷을 자체 개발하거나, 새로운 범용 자바스크립트 라이브러리를 자체 개발한다면 좋은 기반(혹은 참고)가 될 수 있겠지만, 기존의 범용 자바스크립트 라이브러리(jquery, prototype, dojo 등...)의 대체품으로는 부적합 -_-;

function test(foo) {
  alert(typeof(foo));
  alert(foo);
  if (foo) { alert('foo'); }
  if (foo == null) { alert('foo == null'); }
  if (foo === null) { alert('foo === null'); }
}

test();
test(null);
test('hello');
test('');
test(true);
test(false);
test(1);
test(1/0);
test(0/0);

• underfined는 == null 이지만 === null 은 아니다.
• ''는 false다! (C에서는 !=0 이면 모두 true라는 사실을 기억하라)
• 1/0(불능)은 true지만, 0/0(부정)은 false다!

function test(foo) {
  alert(typeof(foo));
  alert(foo);
  if (foo) { alert('foo'); }
  if (!foo) { alert('!foo'); }
  if (!!foo) { alert('!!foo'); }
}

test(true);
test(false);
test('true');
test('false');

• !!'false'는 false가 아니라 true다.

function test(name, button) {

  this.name = name;

  button.onclick = function(event) {

    alert('hello, ' + this.name);

  };

}

function test(name, button) {

  this.name = name;

  var self = this;

  button.onclick = function(event) {

    alert('hello, ' + self.name);

  };

}

function get_result() {
  var result1, result2;
  $.ajax({ ..., success: function(data) { result1 = data; });
  $.ajax({ ..., success: function(data) { result2 = data; });
  return result1 + result2;
}

function get_image_size(image_src) {
  var img = new Image();
  img.src = image_src;
  return { w: img.width, h: img.height; };
}