만약 전체 개발자들 사이에 공유되는 만능 common.js 파일 같은 것이 있다면, 여기에 소개된 열 가지 (덤으로 하나 더) 함수들이 포함되어 있을 것이다. 이것들은 다용도 스위스 칼처럼 개발시 아주 유용하게 사용될 수 있는 것들이다. 이들 모두는 그 유용성이 이미 많은 사용자들로 인해 검증되었으며, 오늘날 가장 유용하게 사용되는 열 가지의 JavaScript 함수들이라 믿는다.

10) addEvent()

event 첨부를 위한 꺾쇠! 물론 몇 가지의 수정을 거친 나만의 addEvent()를 마련해 두었지만, 처음 참고가 된 Scott Andrew씨의 것을 기록해 둔다.

– Scott Andrew씨의 원래 addEvent() 함수

function addEvent(elm, evType, fn, useCapture) {
  if (elm.addEventListener) {
    elm.addEventListener(evType, fn, useCapture);
    return true;
  }
  else if (elm.attachEvent) {
    var r = elm.attachEvent('on' + evType, fn);
    return r;
  }
  else {
    elm['on' + evType] = fn;
  }
}

9) addLoadEvent()

원래 Simon Willison씨에 의해 쓰여졌으나 나중에는 페이지를 다 읽어드린 후에는 이벤트들을 추가하기 위한 방아쇠 작용을 구현하기 위해 쓰이고 있음. 물론 필요하면 모든 이벤트들을 onload 이벤트 핸들러에도 추가해 줌.

– Simon Willison씨의 addLoadEvent()

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  }
  else {
    window.onload = function() {
      oldonload();
      func();
    };
  }
}

또 다른 방법은 10 번에서 설명된 addEvent()를 사용해서 다음과 같이 간단히 여러 이벤트 인식자들을 추가해주어도 됨:

addEvent(window,'load',func1,false);
addEvent(window,'load',func2,false);
addEvent(window,'load',func3,false);

8 ) getElementsByClass()

원래 작성자는 알 수가 없음. 몇몇 개발자들은 자신들만의 버전을 구현했지만 특별히 누구의 것이 더 좋다고는 말할 수 없다. 짐작하겠지만, 나 자신도 여기에 손을 댓 것이 있다. 이 함수는 클래스 이름 별 요소들에 접근하는 빠르고 세련된 방법의 필요에 의해 생겨났는데, 놀랍게도 이것은 원래의 DOM 방법은 아니다. 어쨌든, 이미 getElementById, getElementsByName(), getElementsByTagName이 있는데 또 왠 getElementsByClass???
여기를 보면 그 이유가 있다:

– Dustin Diaz의 getElementsByClass

function getElementsByClass(searchClass,node,tag) {
  var classElements = [];
  if ( node === null )
    node = document;
  if ( tag === null )
    tag = '*';
  var els = node.getElementsByTagName(tag);
  var elsLen = els.length;
  var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
  for (i = 0, j = 0; i < elsLen; i++) {
    if ( pattern.test(els[i].className) ) {
      classElements[j] = els[i];
      j++;
    }
  }
  return classElements;
}

간단하게 클래스 이름을 함수 맨 앞에 추가하고 두 번째와 세 번째 변수들은 자유 선택이며 나머지는 마술과도 같이 이루어진다!

7) cssQuery()

Dean Edwards씨에 의해 쓰여졌으며, 선택자(selectors)의 multitude를 지원하는 CSS 속성들에 따른 DOM 탐색 방법이다. 공정하게 말한다면, 이것은 작은 라이브러리와도 같아서 그 크기는 결코 작지만은 않다. 전체 설명서는 myCssQuery reference and download page에서 찾을 수 있음.

6) toggle()

이벤트 발생시 특정 요소를 보여주고 가리는 아주 간단한 함수.

function toggle(obj) {
  var el = document.getElementById(obj);
  if ( el.style.display != 'none' ) {
    el.style.display = 'none';
  } else {
    el.style.display = '';
  }
}

5) insertAfter()

공개되어 있는 아주 간단한 방식 한 가지.

function insertAfter(parent, node, referenceNode) {
  parent.insertBefore(node, referenceNode.nextSibling);
}

4) inArray()

이것도 DOM 핵심 기능에 포함되지 않았다는 것은 매우 슬픈 일이다. 하지만, DOM Array object를 확장하는 prototype으로 구현 가능하다. 다음은 EmbiMEDIA에서 따온 버전.

Array.prototype.inArray = function (value) {
  var i;
  for (i=0; i < this.length; i++) {
    if (this[i] === value) {
      return true;
    }
  }
  return false;
};

2, 3, & 1) getCookie(), setCookie(), deleteCookie()

솔직히 이 함수들 없이 나는 아무것도 못 한다. 하지만 JavaScript의 쿠키 설정을 위한 DOM의 구현 방식은 정말 마음에 안든다. PHP에서 이것은 누워서 떡먹기이고, 이렇게 쉬운 이유는 아래의 함수처럼 동작하기 때문이다. 아래의 함수는 일반에 공개되어 있으며 물론 사용도 자유롭다.

function getCookie( name ) {
  var start = document.cookie.indexOf( name + "=" );
  var len = start + name.length + 1;
  if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
    return null;
  }
  if ( start == -1 ) return null;
  var end = document.cookie.indexOf( ';', len );
  if ( end == -1 ) end = document.cookie.length;
  return unescape( document.cookie.substring( len, end ) );
}
 
function setCookie( name, value, expires, path, domain, secure ) {
  var today = new Date();
  today.setTime( today.getTime() );
  if ( expires ) {
    expires = expires * 1000 * 60 * 60 * 24;
  }
  var expires_date = new Date( today.getTime() + (expires) );
  document.cookie = name+'='+escape( value ) +
    ( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString() 
    ( ( path ) ? ';path=' + path : '' ) +
    ( ( domain ) ? ';domain=' + domain : '' ) +
    ( ( secure ) ? ';secure' : '' );
}
 
function deleteCookie( name, path, domain ) {
  if ( getCookie( name ) ) document.cookie = name + '=' +
    ( ( path ) ? ';path=' + path : '') +
    ( ( domain ) ? ';domain=' + domain : '' ) +
    ';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

덤 하나 더: Prototype의 달러($) 함수

이 함수는 겉모습에서도 너무나 멋지다. 먼저, 한번 살펴 보시길.

function $() {
  var elements = [];
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);
    if (arguments.length == 1)
      return element;
    elements.push(element);
  }
  return elements;
}
 
// Sample Usage: 
var obj1 = document.getElementById('element1');
var obj2 = document.getElementById('element2');
function alertElements() {
  var i;
  var elements = $('a','b','c',obj1,obj2,'d','e');
  for (i = 0; i < elements.length; i++ ) {
    alert(elements[i].id);
  }
}

멋지지 않은가? 이름이 짧을 뿐만 아니라 조회도 간단하다. 그리고 string과 더불어 object들도 받을 수 있다. 속성으로 하나, 혹은 여럿도 가능하다! 이것은 내가 가장 마음에 들어하는 함수이고 앞으로 적어도 몇 년은 아주 유용하게 사용될 수 있을 것이다.

마무리

이 짧은 JavaScript 함수들의 목록이 여러분들에게도 아주 유용하게 쓰이길 바라며, 여기서 위의 모든 함수들을 common.js 파일에 모아 놓은 것을 내려받으실 수 있다.

따온 글 – Top 10 custom JavaScript functions of all time

물론, 필자도 말했듯이 각자 Top 10을 꼽으라면 이 곳에 나열되어 있는 함수들과는 사람들마다 차이가 있겠지만, 설명된 함수들의 씀씀이를 눈여겨 보는 것도 흥미로운 일.

여기에 덧붙여서, 요새 주목받고 있는 유용한 JavaScript 함수들 모음집(JavaScript Framework)으로, Prototype과 script.aculo.us 그리고 Dojo도 꼭 참고해 두어야 할 것.

 없음.

관련된 주제의 글

• 관련된 주제의 글이 없습니다.