jQuery에서 이벤트를 심는 데 사용되는 여러 가지 방법과 그 장단점 비교

JavaScript 5개의 댓글 »

jQuery에서 많이 사용되는 이벤트(event) 심는 방법에는 옛 버전부터 최근까지 여러 용법이 소개되고 쓰여왔다. 이런 많은 용법이 함께 사용되면서 상황에 따라 어떤 것을 써야 할지 고민하게 되고, 또 서로 다른 용법으로 혼란을 줄 수도 있었다.
그래서 최신 1.7 버전부턴 과거부터 축적돼서 사용되던 이런 여러 방법을 통합하려는 시도로 .on() method가 소개되었는데, 이런 여러 용법을 잘 정리해서 비교해 놓은 글. – Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

결국, 전부터 쓰던 .bind(), .live(), .delegate() method는 더 일관된 사용법의 통합된 .on() method를 써서 다음과 같이 적용해 줄 수 있다.

/* The jQuery .bind(), .live(), and .delegate() methods are just one
   line pass throughs to the new jQuery 1.7 .on() method */
 
// Bind 
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );
 
// Live 
$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} );
 
// Delegate 
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );

jQuery 1.7.x 버전부턴 .on() method가 대세.

덧붙임: jQuery 1.7 버전의 문법을 지원하는 TextMate jQuery Bundle

꼬리표:

거의 막바지에 바뀐 CSS3 Gradients 용법

CSS 댓글이 없음 »

이미 널리 쓰이고 있는 CSS3 Gradients의 용법이 이번에 또 바뀌었는데, 관련 CSS Image Values and Replaced Content Module Level 3가 지난 1월 12일에 “Last Call” draft 상태로 진입한 것을 보면 어떤 커다란 용법의 변경은 더는 없으리라 예상(기대)된다.

우선 Linear Gradient 용법의 달라진 점.

Linear Gradient의 가장 단순한 사용 예로 다름과 같은 것이 있다. (vendor prefix는 생략함)

div { background: linear-gradient(white, black); }

적용하면 위에서 아래 방향으로 흰색을 시작으로 점점 짙어지면서 마지막은 검은색으로 표시된다.

linear gradient function의 첫 번째 argument는 gradient의 시작점과 끝점을 잇는 기준 축인 gradient-line을 지정하게 되는데, 위의 예에서처럼 생략되면 위에서 아래방향을 가리킨다. 그리고 gradient-line은 deg 단위를 써서 각도를 지정해 주거나, 혹은 몇몇 정의된 keywords를 쓸 수도 있다. 거의 막바지에 바뀐 CSS3 Gradients 용법(이)란 제목의 글 마저 읽기 →

꼬리표:

Google 족집게 검색 요령

Notes 댓글이 없음 »

실생활에서 어떤 것에 대한 궁금증으로 관련 정보를 얻으려고 할 때 가장 먼저 취하는 행동이 인터넷 검색이고 여기서 가장 적합한 정보를 효율적으로 빨리 취하는 것도 그만큼 중요할 것이다. 대부분 직접적이고 효율적인 관련 검색어의 선택만으로도 원하는 정보를 얻을 수 있지만, 좀 더 정교하게 추려낸 검색 결과를 원한다면 특별한 요령이 필요하다.

그래서 대표적으로 Google에서는 효율적인 정보 검색을 도와주는 몇 가지 요령을 담은 문서를 제공하고 있다.

다음은 개인적으로 몇 가지 몰랐던 내용:
검색 결과에서 특정 단어의 배제 (-) – 특정 검색어 앞에 마이너스 사인을 붙이면 해당 단어가 포함된 페이지는 솎아내고 나머지의 검색 결과를 보여준다. 마이너스 사인 바로 앞에 다른 글자가 붙어 있으면 안 되고 검색어 사이엔 공백으로 띄워져 있어야만 제대로 인식된다.
동의어 검색 (~) – 검색어와 더불어 해당 동의어도 함께 포함된 검색 결과를 얻으려면 검색어 앞에 물결무늬 사인(~)을 붙여주면 된다.

이 밖에도 Google 검색 요령에 관한 더 자세한 내용을 담은 cheat sheets:

이렇게 요긴한 검색 요령만 잘 알고 있으면 다음과 같은 족집게 검색도 가능하다.

site:nytimes.com filetype:html ~college intitle:"test scores" intext:"new york city" -SATs 2010..2011
꼬리표:

JavaScript의 Switch Statement를 약간 더 빠르게

JavaScript, Web Optimization 3개의 댓글 »
switch(foo) {
  case 'alpha':
    // do X 
    break;
  case 'beta':
    // do Y 
    break;
  default:
    // do Z 
    break;
}

위와 같은 구문을 다음처럼 Object notation을 써서 약간 더 빠르게 실행될 수 있도록 구현할 수 있다.

var switchObj = {
  'alpha': function() {
    // do X 
  },
  'beta': function() {
    // do Y 
  },
  '_default': function() {
    // do Z 
  }
};
(switchObj.hasOwnProperty(foo) && switchObj[foo] || switchObj._default)(args);

물론 비교 대상의 case가 별로 많지 않을 땐 속도의 차이는 크게 나지 않는다.

따온 곳 – How DRY Affects JavaScript Performance — Faster JavaScript Execution For The Lazy Developer

꼬리표: