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

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

JavaScript 파일은 페이지 로딩 속도 측면에서 페이지의 body가 닫히기 바로 전에 추가해 주는 것이 가장 좋은데, WordPress에 기본적으로 추가된 jQuery는 꼭대기 head 부분에 붙어 있다.

이놈을 맨 아랫부분에 추가하려면, 테마 파일에 있는 functions.php 파일을 열고 WordPress의 wp_register_script()와 wp_enqueue_script() function을 사용하는 다음과 같은 코드를 추가해 준다.

<?php
function my_scripts_enqueue() {
  wp_deregister_script('jquery');
  wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . '://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', false, NULL, true);
  wp_enqueue_script('jquery');
}    

if (!is_admin()) add_action('wp_enqueue_scripts', 'my_scripts_enqueue', 11);
?>

여기에 있는 wp_register_script() function의 parameter 중 네 번째와 다섯 번째가 중요한 요소인데, 각각 $ver과 $in_footer 변수를 의미한다.

$ver 변수는 보통 JavaScript 파일 경로의 마지막 부분에 query string처럼 붙으면서 JavaScript 파일이 갱신되었을 때 caching된 것의 사용을 막으려고 사용되는데, jQuery처럼 Google CDN에서 불러올 때는 오히려 방해되므로 NULL 값을 줘서 없애버린다. 그리고 $in_footer 값에 true를 주면 JavaScript가 body 맨 마지막 부분에 붙게 된다.

말장난으로 시작한 제목과는 달리 역설적으로 JavaScript에선 global space를 더럽히는 일은 죄악처럼 여겨진다. 특히나 통제할 수 없는 다른 사람이 작성한 JavaScript 코드가 섞여들어 갈 가능성이 큰 Client-Side JavaScript에선 더욱 그러하다.
그래서 뜻하지 않는 이런 실수를 저지르지 않으려면 변수가 global 해지는 경우를 정확하게 알고 있어야 하는데, 그 예로 다음과 같은 몇 가지 경우가 있다.

var로 시작되지 않는 변수 선언.

잘 알려진 내용으로 var 없이 선언된 변수는 global object의 properties에 붙게 된다.
참고로, 이렇게 만들어진 property는 var 선언문으로 생성된 property와는 다르게 다시 나중에 delete로 지울 수 있다.

var x = 1;      // A properly declared global variable, nondeletable.
y = 2;          // Creates a deletable property of the global object.
this.z = 3;     // This does the same thing.
delete x;       // => false: variable not deleted
delete y;       // => true: variable deleted
delete this.z;  // => true: variable deleted

다음은 JavaScript의 delete operator 작동 원리에 대한 자세히 설명해놓은 글. – Perfection Kills – Understanding delete

글 마저 읽기 »

자주 있는 일은 아니지만, 웹 페이지에 삽입될 링크를 JavaScript에서 생성해서 추가할 일이 있다면 다음과 같이 string-concatenating을 쓴 용법이 사용될 텐데,

var anchor = '<a href="' + url + '">' + text + '</a>';

String.link method를 쓰면 아래와 같이 깔끔하게 짤 수 있다.

var anchor = 'This is a link.'.link('http://appletree.or.kr');
// "<a href="http://appletree.or.kr">This is a link.</a>"

ECMAScript 표준에는 정의되어 있지는 않지만, 오래전부터 모든 브라우저에서 지원하고 있단다.

이 밖에도 여러 특이한 JavaScript의 HTML wrapper methods가 있는데, 그 용법이 제한적이라 사용될 일은 별로 없다.

 없음.