간단한 jQuery 플러그인 작성하기(번역)

jQuery 객체에 어떤 기능을 추가하고 싶은 경우 플러그인을 작성해서 사용할 수 있다.

1 jQuery 객체 메소드

먼저 jQuery가 작동하는 방식에 대해서 알아 둘 필요가 있다.

$( "a" ).css( "color", "red" ); 

$ 함수를 사용하여 엘리먼트를 선택하면 jQuery 객체를 반환하게 된다. 이 객체는 .css(), .click() 등과 같은 jQuery의 모든 메소드와 선택한 모든 엘리먼트를 가지게 된다. jQuery 객체는 $.fn 객체로부터 이러한 메소드를 가져와 사용하게 된다. 이 객체는 모든 jQuery 객체 메소드를 포함하기 때문에 플러그인을 작성할 때 이 메소드를 포함게 될 것이다.

[2] 기본 플러그인 작성

선택된 엘리먼트내의 텍스트를 green 색상으로 변경하는 플러그인을 작성해 보자.

$.fn 객체에 greenify라는 이름의 함수를 작성하면 다른 jQuery 객체 메소드와 같이 사용할 수 있게 된다.

$.fn.greenify = function () { 
  this.css("color", "green"); 
}; 
$("a").greenify(); 
// 모든 링크를 green 색상으로 변경한다. 

주의할 것은 jQuery의 다른 메소드인 .css()를 사용하기 위해서 $( this )가 아니라 this를 사용해야 한다는 것이다. 이것은 greenify 함수가 .css()와 동일한 객체에 대해서 정의되기 때문이다.

[3] 체인방식으로 메소드 사용하기

jQuery의 특징 중의 하나는 특정 선택자에 대해서 5 또는 6개의 액션을 연결할 때 메소드를 체인방식으로 연속해서 사용할 수 있다는 것이다. 이것은 모든 jQuery 객체 메소드가 최종적으로 원래의 jQuery 객체를 다시 반환하기 때문에 가능한 것이다. 그러나 몇가지 예외는 있다.

예를 들어, .width()를 매개변수 없이 호출 할 경우에는 해당 엘리먼트의 폭을 반환하여 다른 메소드를 연결해서 사용할 수 없다. 이와 같이 메소드를 체인방식으로 사용하기 위해서는 아래와 같이 코드 한줄을 추가해 주면 된다.

$.fn.greenify = function () { 
  this.css("color", "red"); 
  return this; 
}; 
$("a").greenify().addClass("greenified"); 

[4] $ 변수 충돌 피하기

$ 변수는 자바스크립트 라이브러리에서 자주 사용하기 때문에 jQuery를 다른 라이브러리와 함께 사용할 경우 jQuery.noConflict() 메소드를 사용하여 jQuery에서 $ 변수를 사용하지 못 하도록 해야 한다. 그러나 이와 같은 조치를 취하게 되면 $를 jQuery 함수의 별칭으로 사용하여 작성한 플러그인은 제대로 동작하지 못하게 된다. 다른 플로그인과 함께 사용하면서 $ 별칭을 계속 사용하도록 하기 위해서는 작성하는 모든 코드를 IIFE 내부에 두고 함수로 jQuery를 넘겨주고 매개변수의 이름을 $로 명명한다.

(function ($) { 
  $.fn.greenify = function () { 
    this.css("color", "red"); return this; 
  }; 
}(jQuery)); 

이와 같이 IIFE를 사용하는 주된 목적은 자신만의 특별한 변수를 사용할 수 있게 하기 위함이다. 다른 색상의 green을 원할 경우 특정 변수에 저장하여 사용할 수 있다.

(function ($) { 
  var shade = "#556b2f"; 
  $.fn.greenify = function () { 
    this.css("color", shade); 
    return this; 
  }; 
}(jQuery)); 

[5] 플러그인을 최소화하기

플러그인을 작성할 때 가능한한 $.fn 객체 내에 하나의 슬롯(slot, 차지하는 공간)만을 가지도록 하는 것이 좋다. 이것은 자신의 플러그인이 다른 플러그인에 의해서 변경되거나 반대의 경우가 발생할 경우를 줄여 주게 된다.

따라서 아래와 같은 코드는 바람직하지 못한 것이라고 할 수 있다.

(function ($) { 
  $.fn.openPopup = function () { 
    // 팝업을 여는 코드 
  }; 
  $.fn.closePopup = function() { 
    // 팝업을 닫는 코드 
  }; 
}( jQuery )); 

따라서, 하나의 슬롯을 가지도록 작성하는 것이 더 좋기 때문에 매개변수를 사용하여 하나의 슬롯이 수행하는 동작을 제어하도록 작성한다.

(function ($) { 
  $.fn.popup = function (action) { 
    if (action === "open") { 
      // 팝업을 여는 코드 
    } 
    if ( action === "close" ) { 
      // 팝업을 닫는 코드 
    }; 
  }; 
}( jQuery )); 

[6] ‘each( )’ 메소드 사용하기

일반적인 jQuery 객체는 DOM 엘리먼트에 대한 참조값들을 포함하기 때문에 jQuery 객체들은 종종 컬렉션으로 참조되기도 한다. 따라서 특정 엘리먼트에 대해서 데이터 속성 값을 가져오거나 특정 위치를 계산하는 것 같은 조작을 하고자 한다면 .each() 메소드를 사용해서 루프를 사용하도록 한다.

$.fn.myNewPlugin = function () { 
  return this.each(function () { 
    // 각 엘리먼트에 대해서 수행할 코드를 여기에 작성한다. 
  }); 
}; 

주의해서 볼 것은 this가 아니고 .each()의 결과를 반환한다는 것이다. .each() 메소드는 체인방식으로 사용할 수 있기 때문에 이 메소드가 반환하는 this를 반환하게 되는 것이다. 이 방법이 지금까지 사용했던 것보다 체인방식을 유지하기가 더 용이하다.

[7] 옵션 사용하기

플러그인이 점점 더 복잡해지면 옵션을 넘겨 주어 플러그인의 설정을 쉽게 할 수 있도록 하는 것이 좋다. 특히 옵션이 많을 경우 가장 손쉽게 구현할 수 있는 방법은 옵션 객체를 사용할 것이다. 지금까지 작업한 greenify 플러그인을 변경해서 옵션을 받을 수 있도록 하자.

(function ($) { 
  $.fn.greenify = function (options) { 
    // 기본 옵션을 지정하는 가장 손쉬운 방법 
    var settings = $.extend({ 
      // 기본 옵션 
      color: "#556b2f", backgroundColor: "white" 
    }, options ); 
    // settings 변수를 이용하여 색상값을 변경한다 
    return this.css({ 
      color: settings.color, backgroundColor: settings.backgroundColor 
    }); 
  }; 
}( jQuery )); 

사용예:

$( "div" ).greenify({ 
  color: "orange" 
}); 

[8] 종합해서 보기

지금까지 논의되었던 방법을 이용해서 작성한 플러그인 예는 아래와 같다.

// 사용예 $( "a" ).showLinkLocation();
(function ($) { 
  $.fn.showLinkLocation = function () { 
    this.filter("a").each(function () { 
      var link = $(this); link.append(" (" + link.attr("href") + ")"); 
    }); 
    return this; 
  }; 
}(jQuery)); 

이 플러그인은 컬렉션 내의 모든 a 태그를 찾아서 href 속성 값을 괄호 안에 추가해 태그 뒤에 붙여 준다.

<!-- 플러그인 호출 전 --> 
<a href="page.html">Foo</a> 
<!-- 플러그인 호출 후 --> 
<a href="page.html">Foo (page.html)</a> 

이것은 아래와 같이 코드를 최적화할 수 있다.

(function ($) { 
  $.fn.showLinkLocation = function () { 
    this.filter("a").append(function () { 
      return " (" + this.href + ")"; 
    }); 
    return this; 
  }; 
}(jQuery)); 

콜백을 호출할 수 있는 .append() 메소드를 사용했고 콜백이 반환하는 값이 각 엘리먼트에 붙게 되는 값이 된다. 또한 href 속성값을 얻기 위해서 .attr() 메소드를 사용하지 않았다는 것을 주의해서 보자. DOM API의 href 메소드를 사용하면 쉽게 href 속성값을 얻을 수 있기 때문이다.


원문 : How to Create a Basic Plugin

댓글 남기기

This site uses Akismet to reduce spam. Learn how your comment data is processed.